Uncaught ReferenceError: ReactDOM is not defined while deplying reactjs app - reactjs

Question

I'm new to react and I've finished my project so now when I built the app using yarn build command I got this error while using serve.js web server.
I've deleted node_modules and installed them but no result aquired
Uncaught ReferenceError: ReactDOM is not defined
at Object. (bundle.js:1)
this the package.json file content
{
"name": "behtabweb",
"version": "1.0.2",
"description": "",
"main": "index.js",
"scripts": {
"start": "node server.js",
"stop": "pkill --signal SIGINT myApp",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"author": "alireza",
"license": "MIT",
"dependencies": {
"#material-ui/core": "^3.9.2",
"#material-ui/icons": "^3.0.2",
"#react-pdf/renderer": "^1.6.0",
"bootstrap": "^4.3.1",
"brfs": "^2.0.2",
"chart.js": "^2.8.0",
"cross-spawn": "^6.0.5",
"downloadjs": "^1.4.7",
"jspanel4": "^4.6.0",
"material-table": "^1.32.0",
"material-ui-image": "^3.2.0",
"notistack": "^0.6.1",
"ol": "^5.3.1",
"pdfkit": "^0.9.1",
"react": "^16.8.6",
"react-bootstrap": "^1.0.0-beta.5",
"react-chartjs-2": "^2.7.6",
"react-dom": "^16.7.0",
"react-jss": "^8.6.1",
"react-localize-redux": "^3.5.2",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0",
"react-scripts": "^3.0.0",
"react-swipeable-bottom-sheet": "^1.1.1",
"save-dev": "^2.0.0",
"unicode-properties": "^1.1.0",
"universal-cookie": "^3.0.7",
"vazir-font": "^19.2.0"
},
"devDependencies": {
"#babel/core": "^7.4.5",
"#babel/plugin-proposal-class-properties": "^7.4.4",
"#babel/preset-env": "^7.4.5",
"#babel/preset-react": "^7.0.0",
"autoprefixer-loader": "^3.2.0",
"babel-loader": "^8.0.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-latest": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"json-loader": "^0.5.7",
"less-loader": "^4.1.0",
"react-to-print": "^2.1.2",
"style-loader": "^0.23.1",
"transform-loader": "^0.2.4",
"url-loader": "^1.1.2",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.2.1"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
and this the webpack config file content
var webpaqck = require("webpack");
module.exports = {
resolve: {
alias: {
fs: 'pdfkit/js/virtual-fs.js'
}
},
entry: "./src/index.js",
output: {
path: __dirname + "/public/assets",
filename: "bundle.js",
publicPath: "assets"
},
devServer: {
inline: true,
contentBase: "./public",
port: 3003
},
// mode: 'development',
mode: 'production',
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ['#babel/preset-env', {
"targets": {
"node": "current"
}
}],
presets: ["#babel/preset-env", "#babel/preset-react"]
}
}
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}, {
test: /\.less$/,
use: ['style-loader',
'css-loader',
'less-loader']
},
{
test: /\.(png|jp(e*)g|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8000, // Convert images < 8kb to base64 strings
name: 'images/[hash]-[name].[ext]'
}
}]
}
// ,
// {
// test:/\.json$/,
// exclude:/(node-modules)/,
// use:{
// loader:"json-loader"
// }
// }
]
}
}
this is the index.js file
import React from 'react'
import ReactDOM from 'react-dom'
import { render } from 'react-dom'
import { LocalizeProvider, Translate, withLocalize } from "react- localize-redux";
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import SignIn from './pages/SignIn'
import { SnackbarProvider } from 'notistack';
import Button from '#material-ui/core/Button';
import Login from './pages/login'
import whoops404 from './components/whoops404'
import dashboard from './pages/Dashboard'
import { MuiThemeProvider, createMuiTheme } from '#material-ui/core/styles';
import white from '#material-ui/core/colors/yellow'
window.React = React.def
const themeRtl = createMuiTheme({
direction: 'rtl',
typography: {
fontFamily: 'Vazir, sans-serif',
useNextVariants: true,
}
});
const App = props => (
<MuiThemeProvider theme={themeRtl}>
<LocalizeProvider>
<SnackbarProvider maxSnack={3}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
action={[
<Button size="small">
<Translate id="dismiss" />
</Button>
]}>
<Router >
<div>
<Route path="/login" component={SignIn}></Route>
<Route exact path="/" component={dashboard}></Route>
</div>
</Router>
</SnackbarProvider>
</LocalizeProvider>
</MuiThemeProvider>
);
render(
<App />,
document.getElementById('react-continer')
)
the app works in development by webpack-dev-server but not in the deployment.