CODEWITHSUNDEEP
reactjscreate-react-appnetlify
Verthon
Verthon

Reputation: 3247

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

Upvotes: 86

Views: 184756

Answers (21)

Faisal Murad
Faisal Murad

Reputation: 1

For me, Browser Router worked.

I was actually using Hash Router before, and I switched to browser router and it worked like a charm. The local and build both worked perfectly.

Upvotes: 0

Mahesh Shinde
Mahesh Shinde

Reputation: 27

Add "homepage": "." in your package.json file. This resolved my problem of blank page.

{
  "name": "reactpractice",
  "homepage": ".",
...
}

Upvotes: -1

Jeremy Thompson
Jeremy Thompson

Reputation: 65614

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.

Upvotes: 0

Danial Sa'adati
Danial Sa'adati

Reputation: 129

I installed react-outer-dom using

npm i react-router-dom

and deactivated my VPN. It's now working.

Upvotes: 0

Susobhan Das
Susobhan Das

Reputation: 1154

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.

Upvotes: 0

Bujaq
Bujaq

Reputation: 80

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

}**

Upvotes: 0

RecepU
RecepU

Reputation: 21

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'

Upvotes: 0

Mostafa Matar
Mostafa Matar

Reputation: 21

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"

Upvotes: 2

H.b
H.b

Reputation: 439

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

Upvotes: 0

Excel Bill
Excel Bill

Reputation: 9

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

Upvotes: -1

Verthon
Verthon

Reputation: 3247

I solved the problem by setting

"homepage": "."

in package.json according to this doc

Upvotes: 143

Umair Sultan
Umair Sultan

Reputation: 656

Add

"homepage": ".",

in your package.json then build again.

Upvotes: 40

adir abargil
adir abargil

Reputation: 5745

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

Upvotes: 20

Tabrez Ansari
Tabrez Ansari

Reputation: 9

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

Upvotes: -2

Uche Azinge
Uche Azinge

Reputation: 692

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.

Upvotes: 1

Boanerges
Boanerges

Reputation: 1368

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

Upvotes: 0

kuzdogan
kuzdogan

Reputation: 815

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

Upvotes: 0

Oystein
Oystein

Reputation: 1322

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

Upvotes: 18

cabita
cabita

Reputation: 852

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/

Upvotes: -3

Zach Olivare
Zach Olivare

Reputation: 4161

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.

Upvotes: 94

bravho
bravho

Reputation: 9

  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.

Upvotes: -8

Related Questions