npm run build index.html creates blank page without errors/ warnings

Question

I created a react app and ran npm run build, however, when I clicked on index.html, the web browser opens a blank page.

I have read multiple solutions but none worked. For example, including "homepage": "./" or "homepage": "." in package.json. As well as changing start_url from "start_url": "." to "start_url": "/" in manifest.json. Another solution I tried was including basename="/" in my BrowserRouter like this:

<BrowserRouter basename="/">
      <Route exact path="/" component={App} />
      <Route path="/something" component={Something} />
</BrowserRouter>,

When I use serve -s build, the application works fine, but since I have to embed my application in an <iframe> inside another website, using index.html as the source will be a straightforward way to do so.

Included some of the other parts of my code below, thanks in advance.

Package.json

{
  "name": "example",
  "version": "0.1.0",
  "homepage": "./",
  "private": true,
  "dependencies": {
    ...
    "@material-ui/core": "^4.10.2",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@testing-library/jest-dom": "^5.10.1",
    "@testing-library/react": "^10.3.0",
    "@testing-library/user-event": "^12.0.2",
    "axios": "^0.19.2",
    "firebase": "^7.15.2",
    "npm-check": "^5.9.2",
    "react": "^16.13.1",
    ...
    "react-firebaseui": "^4.1.0",
    ...
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.0",
    ...
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "https://asia-east2-example.cloudfunctions.net/api"
}

manifest.json

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffeeff"
}

firebase.json

{
  "hosting": {
    "public": "functions",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "headers": [
      {
        "source": "**",
        "headers": [
          {
            "key": "Access-Control-Allow-Origin",
            "value": "*"
          }
        ]
      }
    ]
  }
}

index.html (build)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="./favicon.ico" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="something" />
    <link rel="apple-touch-icon" href="./logo192.png" />
    <link rel="manifest" href="./manifest.json" />
    <title>Title</title>
    <link href="./static/css/2.eec0e34d.chunk.css" rel="stylesheet" />
    <link href="./static/css/main.002abad3.chunk.css" rel="stylesheet" />
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script>
      ...
    </script>
    <script src="./static/js/2.1e3b5120.chunk.js"></script>
    <script src="./static/js/main.673dd343.chunk.js"></script>
  </body>
</html>

There is one warning from firebase:` `When deploying Firebase apps to production, it is advisable to only import the individual SDK components you intend to use.`, and also another line in console: `Failed to get subsystem status for purpose {rejected: true, message: {…}}` — YYY, Jul 13 '20 at 01:10

score 1 · Accepted Answer · answered Jul 13 '20 at 09:48

Finally found the solution, all I have to do was to change BrowserRouter to HashRouter, which adds a hash(#) in the URL. Like this: file:///Users/example/Project/build/index.html#Route https://reactrouter.com/web/api/HashRouter

The code:

<Router basename="/" hashType="noslash">
   <Route exact path="/" component={App} /> 
   <Route path="/example" component={Example} />
</Router>

Btw, Thanks for helping.

npm run build index.html creates blank page without errors/ warnings

1 Answers1