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