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

> event-app@0.1.0 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

score 125 · Accepted Answer · edited Nov 01 '21 at 03:34

125

I solved the problem by setting

"homepage": "."

in package.json according to this doc

edited Nov 01 '21 at 03:34

Eat at Joes

4,937
1
40
40

answered Apr 09 '19 at 12:33

Verthon

2,937
3
20
32

5

I am getting a blank page even after adding "." as the homepage. Any clues on what else could be wrong – mvinayakam Aug 05 '20 at 15:28
3

Yes, see [my answer](https://stackoverflow.com/a/63277866/2517147) below. – Zach Olivare Aug 06 '20 at 20:54
In my case the resolution was to add `onload` param to the loading google api scripts, as in the [google api client docs](https://developers.google.com/api-client-library/javascript/reference/referencedocs#auth-setup) mentioned [here](https://stackoverflow.com/questions/44213061/cannot-read-property-load-of-undefined/53252605#53252605) – Charney Kaye Nov 27 '20 at 05:24
2

it resolved my issue but how can I host my application on github if i give my homepage a value like "." ? – Nov 27 '21 at 04:54

Zach Olivare · Answer 2 · 2020-08-06T20:53:36.977

82

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.

edited Aug 06 '20 at 20:53

answered Aug 06 '20 at 06:16

Zach Olivare

3,805
3
32
45

6

Dude, saved my life also. do you have any idea as why HashRouter works? – vexingCoder Sep 29 '20 at 21:09
4

`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. – Zach Olivare Sep 30 '20 at 19:31
2

thank's for you'r answer. this is work but after i tried click to another page cannot redirect. – naufal syarifuddin Oct 22 '20 at 17:17
1

This solved the problem for me as well, thank you very much! Do we know why though? Is this a known bug? – Márk Farkas Dec 04 '20 at 16:36
2

`HashRouter` worked perfectly, with `react-router-dom`. – Saurabh Kiri Jun 05 '21 at 17:14
2

THIS! Thanks for saving lives, man. Do we have any Documentation where this is detailed? – Abhishek Saini Jul 19 '21 at 10:51
2

This is proof that not all hero's wear capes. And if someone is interested in more details about HashRouter, see https://stackoverflow.com/a/51976069/9231525 – Jakov Gl. Aug 23 '21 at 12:43
1

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` – mivilar Nov 17 '21 at 15:15
Can we use this for our production environment like AWS ec2 and nginx? – MD SHAYON Jan 29 '22 at 01:45
1

this isnt working now, I am using react router v6. any help ? – Nabeel K Aug 19 '22 at 13:26
For react-router v6, Switching to a HashRouter instead of BrowserRouter solved the problem for me. – Anup Shetty Sep 12 '22 at 08:07

score 38 · Answer 3 · edited Oct 31 '21 at 17:11

38

Add

"homepage": ".",

in your package.json then build again.

edited Oct 31 '21 at 17:11

Rifky Niyas

1,737
10
25

answered Aug 31 '19 at 19:47

Umair Sultan

618
6
10

score 20 · Answer 4 · edited Oct 30 '21 at 20:24

20

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

edited Oct 30 '21 at 20:24

Rifky Niyas

1,737
10
25

answered May 25 '20 at 15:38

adir abargil

5,495
3
19
29

1

You saved me here thank you sir! Wonder why this isn't captured in documentation somewhere, unless I overlooked? – twknab Jul 29 '21 at 08:30

score 15 · Answer 5 · answered Nov 20 '20 at 15:10

15

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

answered Nov 20 '20 at 15:10

Oystein

1,232
11
26

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. – Dustin English Feb 17 '21 at 03:17
That could very well be. But in my case it was just a momentary lapse of brain activity... :-) – Oystein Feb 17 '21 at 08:06
1

D'oh! And how did I skip this suggestion two hours ago – Patrik Rikama-Hinnenberg Jan 12 '23 at 06:17

score 2 · Answer 6 · answered Jun 02 '22 at 06:30

2

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"

answered Jun 02 '22 at 06:30

Mostafa Matar

21
2

score 1 · Answer 7 · edited Oct 30 '21 at 13:10

1

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.

edited Oct 30 '21 at 13:10

Rifky Niyas

1,737
10
25

answered Mar 07 '21 at 14:44

Uche Azinge

682
1
8
14

score 0 · Answer 8 · answered May 26 '21 at 06:07

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

score 0 · Answer 9 · answered Sep 27 '21 at 11:10

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

score 0 · Answer 10 · answered May 17 '22 at 21:13

0

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

answered May 17 '22 at 21:13

H.b

239
2
13

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](/help/how-to-answer). – Community May 18 '22 at 08:07

score 0 · Answer 11 · answered Jul 19 '22 at 23:54

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'

score 0 · Answer 12 · answered Oct 07 '22 at 18:25

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

}**

score 0 · Answer 13 · answered Oct 13 '22 at 12:37

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.

score -1 · Answer 14 · answered Apr 09 '22 at 07:06

-1

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

answered Apr 09 '22 at 07:06

Excel Bill

9
2

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](/help/how-to-answer). – Community Apr 09 '22 at 10:39
that didnt work for me and seems dangerous – VibrationPositive Jul 22 '22 at 16:13

score -2 · Answer 15 · edited Oct 30 '21 at 20:12

-2

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

edited Oct 30 '21 at 20:12

Rifky Niyas

1,737
10
25

answered Mar 03 '20 at 11:56

Tabrez Ansari

9
1

score -3 · Answer 16 · answered Sep 22 '20 at 15:08

-3

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/

answered Sep 22 '20 at 15:08

cabita

832
2
12
36

score -6 · Answer 17 · edited Mar 31 '20 at 09:51

-6

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.

edited Mar 31 '20 at 09:51

Shoukat Mirza

800
9
19

answered Mar 31 '20 at 07:37

bravho

13
1

Blank page after running build on create-react-app

17 Answers17

Linked

Related