Webpack-dev-server Error: Cannot find module , can't understand why?

Question

I have a new project and setup webpack to use as a module bundler but when I start the webpack-dev-server using npm start script , I got an error

Error can't find module : 
  at Function.Module._resolveFilename (internal/modules/cjs/loader.js:571:15)
    at Function.Module._load (internal/modules/cjs/loader.js:497:25)
    at Module.require (internal/modules/cjs/loader.js:626:17)
    at require (internal/modules/cjs/helpers.js:20:18)

although I wrote everything correct and I don't get the point of why this happened ? can any one tell me why this happen ?

this is my package.json file

{
  "name": "simple-webpack-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config ./webapck.common.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.1",
    "style-loader": "^0.21.0",
    "webpack": "^4.15.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  }
}

and this is my webpack.common.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin') ;
module.exports = {
    entry:{
        index:'./src/index.js',
        app:'./src/app.js'
    },
    output: {
        path: path.join(__dirname,'dist'),
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                test :/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    },
    plugins: [
      new HtmlWebpackPlugin(
          {
              chunks:['app'],
              template:'./index.html'
          }
      )
    ],
    devServer: {
        port:4000
    }
}

Possible duplicate of [How do I resolve "Cannot find module" error using Node.js?](https://stackoverflow.com/questions/9023672/how-do-i-resolve-cannot-find-module-error-using-node-js) — sametcodes, Jul 10 '18 at 10:14

score 3 · Answer 1 · answered Jul 10 '18 at 10:15

I tried your project setup in my IDE and I think I found the solution of your problem , I think you wrote the wrong config name in package.json file

your file in the disk called webpack.common.js

the file name in package.json webapck.common.js

so to solve the problem

change the file name in package.json to webpack.common.js instead of webapck.common.js this will solve the problem I think , change the package.json start script to

"start": "webpack-dev-server --config ./webpack.common.js"

thank you , that's solve the problem , I really stuck with it — M.Ziad, Jul 10 '18 at 10:16

Webpack-dev-server Error: Cannot find module , can't understand why?

1 Answers1