Flutter Web App Blank after Firebase Deploy - javascript

My Web app works fine when I run it in debug mode using vs-code and chrome, but when I use flutter build web followed by Firebase deploy and open the app using the hosting link, my app is blank.
When I inspect it
Uncaught ReferenceError: firebase is not defined
at Object.a0s (animation_controller.dart:248)
at Object.a56 (cloud_firestore_platform_interface.dart:47)
at cloud_firestore_web.dart:26
at a0o.a (async_patch.dart:308)
at a0o.$2 (main.dart.js:22669)
at Object.a4 (async_patch.dart:238)
at Object.IT (main.dart.js:7072)
at js_helper.dart:3221
at js_helper.dart:3221
at dartProgram (js_helper.dart:3221)
This is the error I see in the console.
I have tried most of the solutions on the web, any and all help will be highly appreciated.

Related

typeEror - o.map is not a function shows in react from hosted

I am making a MERN e-commerce project with redux.
I have hosted my backend in Heroku and my frontend is hosted in vercel .
everything running fine from localhost but when I open hosted site
then it shows "o.map is not a function" on console
Here is my project github link-
Frontend- https://github.com/arijitdas13105/Ashop-frontend-new
Backend- https://github.com/arijitdas13105/ashop-backend
My hosted website link - https://ashop-frontend-99x2ayoh7-arijitdas13105.vercel.app/products
My backend Product API - https://ashop-server.herokuapp.com/api/products
let me know anything else need.
When you host in vercel, your JS code is minified with react-scripts build (You can see it in your package.json). This o.map is other variable in your code, probably the products.map. You can solve this issue using products?.map instead, so it will try to render the elements only when it has content.
If the data is not load and you don't know why, I recommend you to run it with npm run dev and figure out the reason (you can use debugger or console.log).
You can see the Network Tab in your devtools to see what the backend is returning as well.

URIError: failed to decode param "/%PUBLIC_URL%/favicon.ico"

Please help fix I ran into this error after deploying my webpage to git-pages,
now after running my React app it compiles successfully but does not display anything in the browser when you refresh the page this error pops up on the console.
link to the React app
Please follow the steps given on this repo - Deploy React to GithubPages
Alternative - React Deployment pages also explains how you can deploy to github pages Create-react-app deploy to githubpages

Getting a 404 error when trying to setup WebStorm IDE JavaScript debugger for a create-react-app

When following an article entitled, "Debugging React apps created with Create React App in WebStorm", the Debugger says it's connected to the JetBrains IDE Chrome Extension, but I can't get breakpoints to execute when using port 3000 and when I try to use the default debug port 63342 a 404 error is shown.
Here is a recording of my settings in Chrome and Webstorm 2016.2 IDE when trying to debug: http://recordit.co/MQ3LICuUIc
Steps Taken:
I've created a new JS debug configuration with the name 'ERS React Debug', the browser set to Chrome, and I've tried using the following URLs in the configuration:
http://localhost:3000/
http://localhost:3000/ers_react/public/index.html
http://localhost:63342/ers_react/public/index.html
(YT video I watched used the debug port, which is what is in my recording)
I also setup the mapping to webpack:///src as recommend in the article.
Default ReactJS app created with create-react-app is designed to be hosted on webpack server started with react-scripts start, that builds the application and starts the server. You won't be able to open this application on the simple built-in webserver (localhost:63342).
To be able to debug modern React app, you need upgrading Webstorm to the most recent version - debugging will work out of the box. Fot Webstorm 2016.2, you can try specifying URL mappings... For "react-scripts": "1.0.17", it should be http://localhost:3000/static/js/full/path to project, like http://localhost:3000/static/js/C:/WebstormProjects/untitled if the project path is C:/WebstormProjects/untitled should work:
Note that you would need to refresh the browser page to get breakpoints in code executed on pagfe loading hit

Configuring Sentry with React JS

I am trying to integrate Sentry error reporting with my react app. I have it working with my backend fine, but I am now having issues with the frontend.
What I have found is that if I run the Raven.configure("sdn").install() from my webrowser console, the error logging will work.
I have added the the script & configure to my index.html, but it will not log errors without my manually configuring in the browser console.
Thanks

Google Cloud Bug - Issue deploying node js app to google cloud instance

I've downloaded the latest hello world node js app from google cloud.
I can run the app locally using npm start and then by visiting localhost:8080 and I see the app running.
I've also created a project and have a project id.
I've also enabled billing like the tutorial suggests.
This is the tutorial I am following: https://cloud.google.com/nodejs/getting-started/hello-world
I then go to deploy the app with this command in the google cloud sdk:
gcloud preview app deploy app.yaml --promote
I then can this message in my console and its not very helpful:
This is the tutorial part I'm following:
Then this is the screen I get when I visit the website on the google cloud instance (It should say hello world):

Categories