Blank white screen after React run build-CodePudding

I created a react app which works when I run npm start, but when I run npm run build, It gives me a white screen. I tryed to fix it but to no avial. There are many similar questions, but none of those solutions fixed my problem. My code is below.

App.jsx:

import React from 'react';
import Home from './pages/Home/Home'
import SignIn from './pages/Sign-In/Sign-In'
import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";


function App(){
    return(
    <BrowserRouter basename="/">
        <Routes>
            <Route path="/" element={<Home/>}/>
            <Route path="/sign-in" element={<SignIn/>}/>
        </Routes>
    </BrowserRouter>
    )
}

export default App;

package.json:

  "homepage": ".",
  "name": "frontend",
  "version": "0.1.0",
  "type": "module",
  "private": true,

index.js:

import React from 'react';
import {createRoot} from 'react-dom/client';
import App from './App.jsx';


createRoot(document.getElementById('root')).render(<App />)

index.html(after 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" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
    <title>React Home</title>
    <script defer="defer" src="./static/js/main.3f6694dc.js"></script>
    <link href="./static/css/main.4026a363.css" rel="stylesheet">
</head>

<body>
    <div id="root"></div>
    <script src="../../../satishSite/frontend/src/index.js"></script>
</body>

</html>

CodePudding user response：

I Think you opened "index.html" locally that's why it's showing a white screen.

don't open "index.html" locally, try to host your build folder to any server. it's working on the server.

CodePudding user response：

script in html should look like <script src="/index.jsx" type="module">, it does not need to go from root, and jsx files must always be declared as modules.

You should also use parcel to server your html files

npm install parcel -D

package.json:

scripts: {
  "dev":"parcel serve index.html"
}

Then run npm run dev in console