I am building a full-stack app with React for the frontend and Express for the backend. I tested everything in localhost, it is working fine. After I did "npm run build" in the frontend, I tried to test it, it gave me an error that I did not have in development mode, only have error in production mode.
The error is "this.state.books.map is not a function". I read some Stack overflow posts, someone said it might be a JSX problem, he suggested changing "this.state.books.map" to "const books = this.state.books", and then do "books.map" in the render. I changed that, everything works fine in development mode, I deleted the old build folder and created a new one after I had changed the codes and tested in localhost but still has the same problem in production mode.
Please help me to figure out what wrong.....
Related
I keep getting this error after I deploy my app with npm run preview and when I deploy through Vercel. I get no error when the app is "building"
The problem isn't the .env variables being used in Vercel's environment as it successfully builds.
The problem is somewhere in my code as it also happens in localhost when previewing.
npm run dev works fine.
I have also rebuilt my app as well - meaning I started a new sveltekit project, reinstalled supabase and set everything up from scratch and still no luck.
In my react js project once I build npm run build and deploy it on the server let's say dev environment using Webpack. The rest of the project works fine but when I click one specific button in my UI in the dev environment. I get the following error -
Error: Minified React error #301; visit https://reactjs.org/docs/error-decoder.html?invariant=301 for the full message or use the non-minified dev environment for full errors
Too many re-renders. React limits the number of renders to prevent an infinite loop.
But when I try to replicate the issue in my local environment it works completely fine, without any issues. I am not able to find the root cause of this issue.
Please help
So I have built a react app from scratch using npx create-react-app. Everything was going great and I decided to deploy it, to which I hit a lot of problems. Using BlueHost has the host, I accessed the CPanel and inserted the build folder, which i used npm run build to create. The website loaded correctly on chrome, however issues within Safari and Mobile browsers emerged, the page was empty.
After doing further research, I decided that the issue was in deployment and not dependencies. I came to this conclusion because I was able to run a local server on both Chrome and Safari, to which the website worked. If it was a dependency issue, it would not have worked on the local server.
So, I decided to start debugging the build folder. However, this is where an issue emerged, I could not load it at all on a server. I tried using serve -s build, but that directed me to an error screen, 404: the requested path could not be found. If I try to plainly use the index.html, open with browser method on my build, it directs my to an empty page with an invalid url, file:///Users/danieldobrovolskiy/Documents/optimal-exterior/build/index.html.
Apologies if my question is vague or incoherent in someway. I'm seriously confused with the deployment process and have no idea what to even ask. All help is appreciated! Let me know if further information is needed.[
Have you set a homepage in package.json? it should be like "homepage": "./" if you're deploying off the main folder of the webserver
I have a Visual Studio project with a simple React ClientApp that I'm using for testing. The client app was working well until suddenly it wasn't. (It may have broken when I added a static wwwroot folder to the project, but that has since been removed--I was testing with a different React App at the time so I wasn't paying much attention to whether my admin utility app was still working.)
Now for the life of me I can't get webpack-dev-server to serve the React app. I've tried:
/invalidate,
npm build
Changing the ports the server is running on
Hitting it from a different browsers.
npm cache clean --force
Reverting back to a much earlier version of the project when this front end was definitely working
Strangely enough if I run npm start directly in the ClientApp folder the app runs fine. For workflow reasons, and for reasons of just wanting to understand how this works, I'd like to keep using the VS launched version.
The symptom is that it simply displays the Index.html page and does not load the app. In Chrome it keeps failing to load 0.chunk.js with error ERR_HTTP2_PROTOCOL_ERROR. In Firefox this there are no errors loading this file, but only the index.html file displays.
I can navigate to /webpack-dev-server and everything looks good. I can click through to all of the individual files from there.
Any ideas for how to diagnose this would be fantastic!
FWIW - if anyone runs into this issue, the solution was to simply update Microsoft.AspNetCore.SpaServices.Extensions to the latest version (in this case 5.0+).
So I am new with working with react and have followed this tutorial here to assist me. All runs fine following these videos and all locally, but after doing a npm run build and then pushing to Azure via a local git repo, the UI runs as expected, but whenever the UI tries to hit the Express/Node backend, it gets an error that I am not understanding how to resolve. Looking at the build scripts that runs on both, I do not see where or if I need to change an environment variable as it is already hitting the correct port on Azure. What I get is the following:
What do I need to revise for this? Since webpack with the build script in create-react-app seems to do what it needs to, I am not quite sure where things are going wrong.