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
Related
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.
I received a github repo backup from somebody elses account. The project is running gatsby, sanity cms and is hosted via netlify. When I extract the archive and saving the folder locally, I am perfectly able to get the gatsby development server runnning just by doing "yarn install" and "yarn gatsby develop".
However, when I create a new repo and import the project to my github account, the development server is not running anymore. We tried it on several machines and we always get the same error in terminal trying "yarn gatsby develop".
success open and validate gatsby-configs - 0.131s
success load plugins - 2.486s
success onPreInit - 0.038s
success initialize cache - 0.009s
success copy gatsby files - 0.091s
info [sanity] Fetching remote GraphQL schema
ERROR #gatsby-source-sanity_drafts.10003
[sanity] The token specified is not valid or has been deleted
How is that possible? I tried to fix this for days but I don't get it. The only differnce between being able to run the dev server and this error is to save the code to github... Is it maybe some sort of routing problem in the gatsby-config.js?
Would appreciate your help a lot!
It seems that you are missing the environment variables in your new projects so your Sanity configuration is not valid, hence Gatsby is not able to fetch the data from the sources.
There should be a .env.development or .env.production files in your original code placed in the root of the project.
I just started working on new reactjs app for learning purpose.
I installed app using this command: npx create-react-app reactnotes.
Then I am trying to start the app using this command: yarn start.
But in the browser it's been 2 minutes and the app is still loading but not opening on port http://localhost:3000/ default by React app. In the terminal
react-app-start only that is shown their and code is error-free.
I had the same issue and realized that it's happening while the network tab is open for the developer tool, so after I found the network throttling was enabled for "Fast 3G", just changed it to "No Throttling", so the issue was solved
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
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