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

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.


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


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


{   "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>  
Add Comment
1 Answer(s)

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

The code:

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

Btw, Thanks for helping.

Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.