'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

Solution 1:^[1]

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 2:^[2]

Add

"homepage": ".",

in your package.json then build again.

Solution 3:^[3]

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 4:^[4]

Oooor as I just found out that I had done again and again: You published the public folder instead of the build folder.

Solution 5:^[5]

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 6:^[6]

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 7:^[7]

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 8:^[8]

simply change the private property value in your package.json to false

Solution 9:^[9]

i had the same problem and it was because i was importing useContext wrong

Solution 10:^[10]

If it's in the root folder you can use homepage

  "homepage":"."

in package.json

if it's in any other folder like https://example.com/admin you can use

  "homepage":"https://example.com/admin"

Solution 11:^[11]

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:^[12]

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();

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Rifky Niyas
Solution 3	Rifky Niyas
Solution 4	Oystein
Solution 5	kuzdogan
Solution 6	Boanerges
Solution 7	Rifky Niyas
Solution 8	Excel Bill
Solution 9	H.b
Solution 10	Mostafa Matar
Solution 11	cabita
Solution 12	Rifky Niyas

'Blank page after running build on create-react-app

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]