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"]
}
The HtmlWebpackPlugin simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation.
copy-webpack-plugin is not designed to copy files generated from the build process; rather, it is to copy files that already exist in the source tree, as part of the build process.
Use this command:
npm i --save-dev html-webpack-plugin
Try removing Node Modules: rm -rf node_modules
.
Next re-install all dev dependencies npm install
.
Lastly, re-install the html-webpack-plugin npm i html-webpack-plugin --save-dev
.
I would also suggest making sure all of the directory paths are correct and that you're inside the actual project folder. This is rare, but can happen from time to time.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With