I have a react app implemented with create-react-app. When I view the site locally using npm run start, it works fine. But when I build it using npm run build and view the built site, it's just a blank white screen with the following errors.
When I go into the compiled build/index.html and look at the links, they're all missing . before them, such as <link href="/static/css/main.60d8d896.chunk.css". and Adding . before the / fixes many of the errors and makes the site no longer a blank white screen, but even after doing that to all of the links I can find many of the SVG icons on my site are completely missing and the console logs these errors.
It seems that for some reason the build is just messing up all of the links, which has never happened before and is unexpected considering the production version works fine.
Here's a gist of the compiled build/index.html, and here's the source code to the entire react app.
The problem turned out to be that I just wasn't serving the files correctly on my remote nginx server. I must have sent the files using scp incorrectly, because when I deleted all of the files and re-scp'd it, it worked properly.
Related
I'm building a MERN stack application and am currently having an issue with getting the the front end content to display while running npm run develop.
The index.html file I'm using is the standard template of create-react-app and my index.js file uses ReactDom.render with and document.getElementById('root').
react and react-dom are both version 17.0.1.
I can't see why this wouldn't work but when I enter npm run develop in the terminal, I receive a blank screen and the devtools show that <div id='root> is completely empty but the only error I have in my console log is a GraphQL syntax error. It can see the index file, along with my css files, pages and components but the app isn't displaying on the page.
I've tried importing different versions of react and react-dom, deleted and remade my index.html and index.js, substituting different content into the JSX app element, redoing my npm installs to see if something had gone wrong there and just about everything else I can think of but the result is always the same. On top of that I have run other apps with the same setup on my laptop and they work fine.
If anyone has encountered a similar problem, advice would be welcome.
I am working on a project that includes react as frontend technology. Python Django is used for backend and both of them dockerized by a docker-compose file and Dockerfiles. When I try to edit and save index.html or App.js file, nothing happened. Docker container terminal and browser stayed still, despite app's files are mounted correctly in docker-compose file.
When I look up for the solution to this case on SO and other websites, all of the suggestions were made towards to environment variables like CHOKIDAR_USEPOLLING, WATCPACK_POLLING and FAST_REFRESH.
In those websites, WATCHPACK_POLLING was suggested to use instead of CHOKIDAR_USEPOLLING due to using react-scripts version 5.0.1 in my project. So I set WATCHPACK_POLLING=true in environment variable and tried again.
This time webpack compiles with this message in terminal:
frontend-app-1 | Compiling...
frontend-app-1 | Compiled successfully!
frontend-app-1 | webpack compiled successfully
But after compiling successfully nothing happens, browser still does not refresh. I've tried to set FAST_REFRESH=false to enable hot reloading but nothing changed.
I've mixed up old and new solutions and using CHOKIDAR_USEPOLLING and WATCHPACK_POLLING at the same time. This time after editing and saving compiling has done again and browser refreshes but with a slight issue. Browser refresh process cant catch up the compiling and these two process are being done unsynchronized.
So when I change the website title from "React App" to "React" and save it, compilation starts and broser refreshes. Browser still displays "React App" title. After that when I edit index file again to change title from "React" to "Test", refreshed browser diplays title "React". Refreshment is following at least one step behind like this.
Essentially my problem is after edit and save in a dockerized react app, webpack compiles successfully but browser does not refresh.
How can I solve this problem?
Edit: I've tried FAST_REFRESH with these two variables and nothing changed.
Are you editing source code on host machine? If yes then do you have a bind mount of the source code folder or file to the container?
Please try different node versions. I had the same issue recently and got it resolved after taking an image with different node version.
If previous options don't work then you can setup directory synchronization between host and container. See how to rsync from a host computer to docker container using docker cp for details.
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+).
my problem resides around Gatsby's production build failing to make project, which would seem and work as it should.
My goal is to adapt material-kit-react into Gatsbyv2 generated project.
done project in develop mode
so far so good i managed to do it all no problem, site looks exactly like it should in developer mode on my computer, but when i tried to put it on Github pages Gatsby build command needed to be executed, and when it did i errors appear around window object which is not defined on server where project tries to run when building (or something like that source: https://github.com/gatsbyjs/gatsby/issues/309 ). I resolved all of those errors as Gatsby employee suggested using if statement to not use window when its undefined, an it worked just fine, Gatsby ended its 'gatsby build' function and automatically published it to Github Pages thanks to ""deploy": "gatsby build --prefix-paths && gh-pages -d public""
After deploying however something strange happens to my site
project after publishing it onto Github pages
i found that it may be because css random class generator overlap somewhere, so i added JssProvider with generateRandomClassName from #material-ui/core into new layout component and it kida worked
material ui random name generator
but effect was far from desired:
deployed project after adding random class generator
and i tried to found whats wrong with this code, but i don't understand everything in react and gatsby yet and im empty of ideas. no errors, no eslint warning, everything falls apart anyway with no visible sign for me.
here is source material: https://github.com/Thrajnor/Gatsby-material-ui/tree/master/landingpage
and here is deployed page after build: https://thrajnor.github.io/Gatsby-material-ui/
i would really appreciate help or even a little advice in whats happening