I am getting this error when refresh the page or manually enter url
devDependencies": {
"@babel/core": "^7.17.8","@babel/preset-env": "^7.16.11","@babel/preset-react": "^7.16.7","babel-core": "^6.26.3", "babel-loader": "^8.2.4", "babel-preset-es2015": "^6.24.1","babel-preset-react": "^6.24.1",
}
devDependencies
"cpx": "^1.5.0","env-cmd": "^10.1.0","html-webpack-plugin": "^5.5.0",
"webpack": "^5.70.0", "webpack-cli": "^4.9.2", "webpack-dev-server": "^4.7.4"
scripts
"start-server": "node server/index.js",
"start": "react-scripts start",
"build": "react-scripts build && npm run copyindex && cpx .env build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build:uat": "env-cmd -f ./.env.uat npm run-script build && npm run copyindex && npm run copyuatenv && npm run renameuat",
"build:prod": "env-cmd -f ./.env.prod npm run-script build && npm run copyindex && npm
},
scripts:
"run copyprodenv && npm run renameprod",
"copyindex": "cpx server/index.js build",
"copyuatenv": "cpx .env.uat build",
"copyprodenv": "cpx .env.prod build",
"renameprod": "node -e \"require('fs').rename('build/.env.prod', 'build/.env', () => { console.log('File successfully renamed!') })\"",
"renameuat": "node -e \"require('fs').rename('build/.env.uat', 'build/.env', () => { console.log('File successfully renamed!') })\""
webpack
const HtmlWebPackPlugin = require( 'html-webpack-plugin' );
const path = require( 'path' );
module.exports = {
context: __dirname, entry: './src/index.js', output: {path: path.resolve( __dirname, 'dist' ),filename: 'main.js',publicPath: '/',},
devServer
devServer: {
historyApiFallback: true
},
module
module: {rules: [{ test: /\.js$/, use: 'babel-loader',},{ test: /\.css?$/, use: [ 'style-loader', 'css-loader' ]},{test: /\.(png|j?g|svg|gif)?$/, use: 'file-loader'}]},
plugins
plugins: [new HtmlWebPackPlugin({template: path.resolve( __dirname, 'public/index.html' ),
filename: 'index.html'})]};
index.html
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
