Blank page after running build on create-react-app
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 with source “file:///event-app/static/js/main.108757a0.js”"
package.json: https://gist.github.com/Verthon/f82371ad2bb636b2e95c5b7697aa0bb5
➜ event-app git:(master) ✗ npm run build
> [email protected] build /home/jurr/Projects/event-app
> node scripts/build.js
Creating an optimized production build...
Compiled with warnings.
./src/components/Router.js
Line 12: 'withFirebase' is defined but never used no-unused-vars
./src/components/Firebase.js
Line 21: 'Firebase' is defined but never used no-unused-vars
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
File sizes after gzip:
282.86 KB build/static/js/main.108757a0.js
3.1 KB build/static/css/main.8e671453.css
I solved the problem by setting
"homepage": "."
in package.json
according to this doc
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.
Add
"homepage": ".",
in your package.json
then build again.
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...
}