Open terminal and navigate to react-app directory and execute “npm install --save-dev webpack webpack-cli” to install Webpack
webpack.config.js file need to be created and paste the following code snippet----
const path = require("path");
module.exports = {
entry: "./src",
output: {
filename: "App.js",
path: path.resolve(__dirname, "dist")
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-react"]
}
},
enforce: "post"
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
}
]
}
};
In project root add .babelrc file and paste the following configuration
{
"presets": [
[
"@babel/preset-react",
{
"pragma": "dom", // default pragma is React.createElement
"pragmaFrag": "DomFrag", // default is React.Fragment
"throwIfNamespace": false // defaults to true
}
]
]
}
Find and open package.json and add the following under scripts
"develop": "webpack --mode development"
And add the following DevDependencies section
"devDependencies": {
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"webpack": "^4.28.3",
"webpack-cli": "^3.3.0"
}
Run “npm install” and “npm run develop” to build project.
A folder named dist and App.js will be under it (if you don’t have any styles)
Take the index.html from public folder of your react-app and place it in your web server’s doc root folder. Update the file to include <script src="App.js" type="text/JavaScript"></script> before body tag close
You should see your React application work fine in browser without dev server
Could you please clarify the ask here? This section is to propose ideas and enhancements for AEM but this looks more like some problem with react app in which case, this hasn't been posted in the right section unfortunately