Search code examples
javascriptwebpackhtml-webpack-plugin

Cannot find module 'html-webpack-plugin' (beginner)

I am working on a small project that I'm supposed to do in an Online course. I have downloaded the necessary modules. I'm supposed to then run (npm run start) in the command line, but I keep getting this error 'Cannot find module 'html-webpack-plugin''.. would be thankful for some help. I've read all other Threads here about this but notching seem to help.

I'm supposed to create a simple Html copy or something to be shown in a live server... I have tried to reinstall everything and to install -g, --save-dev or just --save. The necessary packages are in the node-modules folder

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/js/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/bundle.js'
    },
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: './dist/index.html',
            template: './src/index.html',
        })
    ]
};

package.json 

{
    "name": "forkify",
    "version": "1.0.0",
    "description": "forkify project",
    "main": "index.js",
    "scripts": {
        "dev": "webpack --mode development",
        "build": "webpack --mode production",
        "start": "webpack-dev-server --mode development --open"
    },
    "author": "Kushtrim",
    "license": "ISC",
    "devDependencies": {
        "html-webpack-plugin": "^3.2.0",
        "install": "^0.13.0",
        "webpack": "^4.39.3",
        "webpack-cli": "^3.3.8",
        "webpack-dev-server": "^3.8.0"
    },
    "dependencies": {}
}

$npm run start

> forkify@1.0.0 start C:\Users\mrB\Documents\Web-development\complete- 
javascript-course-master\9-forkify\starter
> webpack-dev-server --mode development --open

internal/modules/cjs/loader.js:638
throw err;
^

Error: Cannot find module 'html-webpack-plugin'
at Function.Module._resolveFilename 
(internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (C:\Users\mrB\Documents\Web-development\complete- 
javascript-course-master\9-forkify\webpack.config.js:2:27)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! forkify@1.0.0 start: `webpack-dev-server --mode development -- 
open`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the forkify@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely 
additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\mrB\AppData\Roaming\npm-cache\_logs\2019-09- 
13T10_42_46_932Z-debug.log

What is supposed to happen is that the webpack-dev-server should start. But everything that I do seems not to help.

Solution

  • It seems that you need to install all dependencies first.

    Try 

    npm install

    then 

    npm run start