Blank page after running build on create-react-app
ReactjsCreate React-AppNetlifyReactjs Problem Overview
Trying to deploy create-react-app on netlify, however my build is blank page. I'm using .env file for loading firebase api key is that a problem for build?
Even when I tried to open it locally on my computer its blank page and it outputs an error in console: "Loading failed for the
Reactjs Solutions
Solution 1 - Reactjs
Solution 2 - Reactjs
If you're using react-router
and trying to open index.html
directly in the browser (or using electron, which essentially does that), in addition to setting homepage
as others have suggested, replace your BrowserRouter
with a HashRouter
.
I was trying to build an electron app using create-react-app. When running in development everything was fine, but when I built the CRA and then pointed the electron app to the index.html
file, I got the blank page.
I found that that was exactly the same as opening the index.html
file directly in the browser. Everyone says "set homepage
in package.json
", but I already had that. So what now!?
I eventually figured out that the problem was react-router
. I was using a BrowserRouter
. Switching to a HashRouter
solved the problem for me.
Solution 3 - Reactjs
Add
"homepage": ".",
in your package.json
then build again.
Solution 4 - Reactjs
Just as @Verthon said putting the "homepage": ".",
in your package.json file, in the top level like this:
{
"name": "myApp",
"homepage": ".",
// all other package.json stuff...
}
Solution 5 - Reactjs
Oooor as I just found out that I had done again and again: You published the public folder instead of the build folder.
Solution 6 - Reactjs
I had a comment inside my return
method and this caused the problem for me.
If the error message in the browser console is
> Minified React error #152;
Then removing any comment inside the return
method might solve your problem as it did mine.
Solution 7 - Reactjs
For me the issue was the inline runtime script was not being run as I was getting the error:
> Refused to execute inline script because it violates the following > Content Security Policy directive: "script-src 'self'". Either the > 'unsafe-inline' keyword, a hash ('sha256-5='), or a nonce > ('nonce-...') is required to enable inline execution.
This was fixed by adding the INLINE_RUNTIME_CHUNK=false
variable to the build script.
"build": "INLINE_RUNTIME_CHUNK=false react-scripts build",
This is because of the Content Security Policy of browsers: "A CSP compatible browser will then only execute scripts loaded in source files received from those allowlisted domains, ignoring all other script (including inline scripts and event-handling HTML attributes)."
Solution 8 - Reactjs
I faced similar issue. But if you follow React-Deployment, correctly, you will realise that there is a "homepage":"." // User "." if you are deploying on your local machine, but on a server hosted somewhere you can use your domain or ip address the homepage field.
{
"homepage":"https://example.com"
}
Solution 9 - Reactjs
simply change the private property value in your package.json to false
Solution 10 - Reactjs
So the problem is with the caching of your app in the browser.
I have solved this problem with serviceWorker()
in create-react-app
.
Here is the solution: Just add this in you index.js
file and remove service worker register
import { unregister } from './registerServiceWorker';
unregister();
Solution 11 - Reactjs
I was trying to open the application after build with double-clicking the index.html and didn't work either, I got the blank page but if the built files are run in a server environment works. https://create-react-app.dev/docs/deployment/
Solution 12 - Reactjs
-
Run
npm run eject
-
Edit file webpack.config in the config folder
-
Find path with "static/" or "static/js/" or "static/css/" in the file and delete such path
-
Build your project again
This work for me. hope this works for you, too.