Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Error: Cannot find module 'html-webpack-plugin' - Webpack (React)

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"]
}
like image 487
user8449046 Avatar asked Jul 26 '18 02:07

user8449046


People also ask

What is HTML webpack plugin?

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.

What is copy webpack plugin?

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.


2 Answers

Use this command:

npm i --save-dev html-webpack-plugin
like image 154
Orsos Patrick Avatar answered Oct 05 '22 15:10

Orsos Patrick


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.

like image 42
Stephen Romero Avatar answered Oct 05 '22 13:10

Stephen Romero