Blank page after running build on create-react-app

Question

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

Obliquity

Answer 1

I solved the problem by setting

"homepage": "."

in package.json according to this doc

Obliquity

I am getting a blank page even after adding "." as the homepage. Any clues on what else could be wrong – Hindenburg

Yes, see my answer below. – Ebby

In my case the resolution was to add onload param to the loading google api scripts, as in the google api client docs mentioned here – Festination

it resolved my issue but how can I host my application on github if i give my homepage a value like "." ? – Billionaire

I faced the same issue even after adding "homepage": "." in my package.json. I changed my BrowersRouter to HashRouter now it works. – Anemography

Answer 2

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.

Ebby

Dude, saved my life also. do you have any idea as why HashRouter works? – Tinny

HashRouter works because nothing after the "#" in the URL is sent to the "server". That part of the URL is only interpreted by react-router. – Ebby

thank's for you'r answer. this is work but after i tried click to another page cannot redirect. – Weitzel

This solved the problem for me as well, thank you very much! Do we know why though? Is this a known bug? – Welty

HashRouter worked perfectly, with react-router-dom. – Doordie

THIS! Thanks for saving lives, man. Do we have any Documentation where this is detailed? – Tempura

This is proof that not all hero's wear capes. And if someone is interested in more details about HashRouter, see https://mcmap.net/q/125553/-what-is-the-difference-between-hashrouter-and-browserrouter-in-react – Bassesalpes

Using a HashRouter instead of the BrowserRouter fixed the issue for me while running the app on a prefix such as www.site.com/appprefix/ and PUBLIC_URL=/appprefix/ set during build. However, BrowserRouter also works fine if you explicitly set basename=process.env.PUBLIC_URL – Inform

Can we use this for our production environment like AWS ec2 and nginx? – Trillbee

this isnt working now, I am using react router v6. any help ? – Doctrine

For react-router v6, Switching to a HashRouter instead of BrowserRouter solved the problem for me. – Malvern

This worked for me when trying to serve the static content on AWS lightsail storage. – Astaire

This saved my hours! thanks – Rizzio

Answer 3

Add

"homepage": ".",

in your package.json then build again.

Perceptive

Answer 4

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...
}

Dissuasion

You saved me here thank you sir! Wonder why this isn't captured in documentation somewhere, unless I overlooked? – Highgrade

Answer 5

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

Dorrie

I hate that this was my error. I wonder if there's a tutorial that says "for example: public" for build folder instructions that we both followed. – Formenti

That could very well be. But in my case it was just a momentary lapse of brain activity... :-) – Dorrie

D'oh! And how did I skip this suggestion two hours ago – Ventilator

Answer 6

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"

Deprecate

Answer 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.

Weiser

Answer 8

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)."

Narcose

Answer 9

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"
}

Outcross

Answer 10

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

Gibeon

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Bailes

Answer 11

I solved it. It happened to me after deploying to GitHub page.

It is working to local but after deployment it is opening the blank page.

Problem is we changed the homepage path. So We need to update paths which are in our code.

If I give an example with my case, I added homepage into the "package.json" file something like:

"homepage": "https://[YourGitHubAccountName].github.io/[YourProjectName]"

So after adding this, app doesn't work because The paths which are inside of my code need to be change.

For example:

'/' paths should become '/[YourProjectName]' or

'/test' should become '/[YourProjectName]/test'

Tsang

Answer 12

I had a black screen when i was trying to map an undefined property

importing_file.js

<MediaImage  />

imported_file.js

export const MediaImage = props => {
    console.log("areas", props.areas)
    return (

        <div className={props.className} id={props.id}>

        <img src="../../favicon-flat.png" alt="Workplace" useMap={"#mapa"+props.id}/>

        <map name={'element'props.id}>
 {props.areas.map(m=>{} )}

        </map>

        </div>)

}**

Qintar

Answer 13

Working solution for React with typescript is to add "homepage": "." in package.json

  {
  "name": "todo-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
  },
  "scripts": {    
  },
  "eslintConfig": {    
  },
  "browserslist": {
  },
  "homepage": "."
}

now build the Application with npm run build and open the production html file.

Montemontefiascone

Answer 14

I installed react-outer-dom using

npm i react-router-dom

and deactivated my VPN. It's now working.

Ferrous

Answer 15

import '//css/Popup.css';

It gives no error unless you call a black screen of death an error.

Specify the path properly or better yet move it out of a component to be referenced in the index.js.

Muimuir

Answer 16

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

Sensuous

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Bailes

that didnt work for me and seems dangerous – Dowland

Answer 17

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

Spoliation

Answer 18

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/

Tomasine

Answer 19

1. Run npm run eject

2. Edit file webpack.config in the config folder

3. Find path with "static/" or "static/js/" or "static/css/" in the file and delete such path

4. Build your project again

This work for me. hope this works for you, too.

Unreal