Webpack-dev-server: After running `npm start` I get "Error: Cannot find module 'webpack/schemas/WebpackOptions.json'"

[thomasfaller]

Setup

• Operating System: Mac OS 10.13.4
• Node Version: v10.1.0
• NPM Version: v6
• webpack Version: v1.31.1
• webpack-dev-server Version: 3.1.4

Code

After running npm start I get the following:

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

Error: Cannot find module 'webpack/schemas/WebpackOptions.json'
    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)
    at Object.<anonymous> (/Users/thomasfaller/Documents/Thomas/Web Projects/Treehouse/Webpack/webpack-workshop/node_modules/webpack-cli/bin/config-yargs.js:1:85)
    at Module._compile (internal/modules/cjs/loader.js:678:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:689:10)
    at Module.load (internal/modules/cjs/loader.js:589:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:528:12)
    at Function.Module._load (internal/modules/cjs/loader.js:520:3)

  // webpack.config.js

var HtmlWebpackPlugin = require("html-webpack-plugin");

var webpackConfig = {
    entry: "./src/index.js",
    output: {
        path: "build",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                loader: "babel-loader",
                test: /\.js$/
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "src/index.ejs"
        })
    ]
};

module.exports = webpackConfig;

  // package.json

{
  "name": "webpack-treehouse-example",
  "version": "0.0.1",
  "scripts": {
    "build": "webpack --optimize-minimize",
    "start": "webpack-dev-server"
  },
  "devDependencies": {
    "babel-loader": "^6.2.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-stage-2": "^6.11.0",
    "css-loader": "^0.23.1",
    "html-webpack-plugin": "^2.22.0",
    "node-sass": "^3.8.0",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.1",
    "webpack-cli": "^2.1.3",
    "webpack-dev-server": "^3.1.4"
  },
  "dependencies": {
    "deep-extend": "^0.5.1",
    "jquery": "^3.1.0"
  }
}

Any thoughts?

[bwalding]

You possibly switched to the webpack-cli loader?

Try moving webpack itself to your local env:

```
npm uninstall -g webpack
npm add webpack --save-dev

yarn add webpack --save-dev

[sifex]

That as well as moving from webpack-dev-server from 2 > 3. Switched back to 2 and that seemed to work.

[alexander-akait]

webpack-dev-server@3 is not compatobility with webpack@1, when you run npm/yarn install you should see this messages

[Asrin-Akbari]

finally how you solve this problem? i have this probleam

[davebream]

I need solution too

[lusteng]

I need too

[lusteng]

I've solved it, Try chang the webpack-dev-server plugin version

[ivandurst]

In my case this stackoverflow answer helped me:
https://stackoverflow.com/questions/50374305/cannot-find-module-webpack-schemas-webpackoptions-json-when-trying-to-instal
just run npm install [email protected] then npm install. As others have said, it's a versioning issue.

[ajorquera]

doing npm install webpack-cli worked for me

[akshaymodi9]

I am trying to run webpack server in development mode.I am getting the errors as below

Error: Cannot find module 'webpack-cli/bin/config-yargs'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:655:15)
at Function.Module._load (internal/modules/cjs/loader.js:580:25)
at Module.require (internal/modules/cjs/loader.js:711:19)
at require (internal/modules/cjs/helpers.js:14:16)
at Object. (/Users//Desktop/workspace/frontend/src/node_modules/webpack-dev-
server/bin/webpack-dev-server.js:84:1)
at Module._compile (internal/modules/cjs/loader.js:805:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:816:10)
at Module.load (internal/modules/cjs/loader.js:672:32)
at tryModuleLoad (internal/modules/cjs/loader.js:612:12)
at Function.Module._load (internal/modules/cjs/loader.js:604:3)

The package version that I am using are as follows:
"webpack": "^4.12.0",
webpack-dev-server": "^3.1.4",
"webpack-cli": "^3.3.1",

I also tried to navigate to the path "/node_modules/webpack-cli/bin/config-yargs" ,
seems there is no folder named as config-yargs.
Can anyone help on this?

[neerajjain92]

Did we find any solution for this?

[duleorlovic]

webpack-cli and webpack-dev-server should be same major version. So open you package.json and make sure they point to same major version 3

{
  "devDependencies": {
    "webpack": "^5.4.0",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.11.0"
  }
}