80

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

18 Answers 18

129

I solved the problem by setting

"homepage": "."

in package.json according to this doc

5
  • 6
    I am getting a blank page even after adding "." as the homepage. Any clues on what else could be wrong
    – mvinayakam
    Aug 5, 2020 at 15:28
  • 3
    Yes, see my answer below. Aug 6, 2020 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 mentioned here Nov 27, 2020 at 5:24
  • 2
    it resolved my issue but how can I host my application on github if i give my homepage a value like "." ?
    – user14101590
    Nov 27, 2021 at 4:54
  • I faced the same issue even after adding "homepage": "." in my package.json. I changed my BrowersRouter to HashRouter now it works.
    – tom hikari
    Nov 8 at 9:47
84

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.

11
  • 6
    Dude, saved my life also. do you have any idea as why HashRouter works? Sep 29, 2020 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. Sep 30, 2020 at 19:31
  • 2
    thank's for you'r answer. this is work but after i tried click to another page cannot redirect. Oct 22, 2020 at 17:17
  • 2
    HashRouter worked perfectly, with react-router-dom. Jun 5, 2021 at 17:14
  • 2
    THIS! Thanks for saving lives, man. Do we have any Documentation where this is detailed? Jul 19, 2021 at 10:51
39

Add

"homepage": ".",

in your package.json then build again.

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...
}
1
  • 1
    You saved me here thank you sir! Wonder why this isn't captured in documentation somewhere, unless I overlooked?
    – twk
    Jul 29, 2021 at 8:30
15

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

enter image description here

3
  • 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. Feb 17, 2021 at 3:17
  • That could very well be. But in my case it was just a momentary lapse of brain activity... :-)
    – Oystein
    Feb 17, 2021 at 8:06
  • 1
    D'oh! And how did I skip this suggestion two hours ago Jan 12 at 6:17
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"
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.

0

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

0

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

0

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

1
  • 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.
    – Community Bot
    May 18, 2022 at 8:07
0

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'

0

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

}**
0

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.

0

I installed react-outer-dom using

npm i react-router-dom

and deactivated my VPN. It's now working.

-1

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

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.
    – Community Bot
    Apr 9, 2022 at 10:39
  • that didnt work for me and seems dangerous Jul 22, 2022 at 16:13
-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();
-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/

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.