I tried to create a basic React app with webpack 4 following this link
until installing "html-webpack-plugin", I did not face any errors. But, once I run the command "npm run start", I keep getting the following error:
**Error: Cannot find module 'html-webpack-plugin'
at Function.Module._resolveFilename (module.js:547:15)
at Function.Module._load (module.js:474:25)
at Module.require (module.js:596:17)**
I tried to solve this issue using the following two threads by installing packages globally and locally, but it didn't help.
error: cannot find module html-webpack-plugin
https://github.com/webpack/webpack-dev-server/issues/1330
Please see my code below:
package.json:
{
"name": "react_website",
"version": "1.0.0",
"description": "Website using React and Webpack",
"main": "index.js",
"scripts": {
"start": "webpack --mode development",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.16.2",
"webpack-cli": "^2.1.5"
},
"dependencies": {
"react": "^16.4.1",
"react-dom": "^16.4.1"
}
}
webpack.config.js:
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
],
};
- .babelrc:
{
"presets": ["env", "react"]
}
Use this command:
npm i --save-dev html-webpack-plugin