在开发模式下，Webpack（v 3.0.0）validateSchema错误

Question

Yesterday I installed webpack-cli , it worked well with react and other packages, today I just want to set up my webpack config file again, but when I run webpack-dev-server through npm it just spits out this error:

K:\web\07_Webpack_Test\node_modules\webpack-cli\bin\convert-argv.js:7
const validateSchema = process.webpackModule.validateSchema;
                                             ^

TypeError: Cannot read property 'validateSchema' of undefined
    at Object.<anonymous> (K:\web\07_Webpack_Test\node_modules\webpack-cli\bin\convert-argv.js:7:46)
    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)
    at Module.require (internal/modules/cjs/loader.js:626:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (K:\web\07_Webpack_Test\node_modules\webpack-dev-server\bin\webpack-dev-server.js:234:15)
    at Module._compile (internal/modules/cjs/loader.js:678:30)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! 07_webpack_test@1.0.0 dev: `webpack-dev-server -d`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the 07_webpack_test@1.0.0 dev 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\Eric PC\AppData\Roaming\npm-cache\_logs\2018-06-02T07_12_22_842Z-debug.log

Here is my command to run it :

 "scripts": {
    "dev": "webpack-dev-server -d",
    "build": "npm run clear && webpack -p",
    "clear": "rimraf ./public/*"
  },

Here is my webpack.config.js:

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');


module.exports = {

  entry: {
    app: './src/js/app.jsx',
  },

  output: {
    path: path.resolve(__dirname , 'public'),
    filename: '[name].bundle.js'
  },

  module: {

    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.scss$/,
        use : ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader' , 'sass-loader'],
          publicPath: "/public"
        })
      }
    ]

  },


  resolve: {
    extensions: ['.js', '.jsx'] 
  },


  plugins: [

    new HtmlWebpackPlugin({
      title: 'React App',
      filename: 'index.html',
      template: './src/index.html'
    }),

    new ExtractTextPlugin({
      filename: 'app.css',
      disable: false,
      allChunks: true
    })

  ],


  devServer: {
    contentBase: '/public',
    compress: true,
    port: 3000,
    open: true,
    historyApiFallback: true,
    stats: 'errors-only'
  }

}

After struggling with that error I finally figured out that there was a version change with webpack-cli , yesterday I was installed webpack-cli 2.1.4 and today I installed version 3.0.0 . I figured it out by checking versions on npm website and i saw that it was just 5 hours passing after releasing the webpack-cli version 3 :

I should note that when I run npm run build it just builds the folder and everything works, but I am unable run in development mode and see the result in browser.

I know that if I downgrade my webpack cli to previous version it must works but the question is, what is this error and how can I solve it? (as Node packages are updated frequently it is necessary to be up-to-date, right?)

Answer 1

The new version of webpack-cli adds webpack to the global process object. This causes applications such as webpack-dev-derver to break since it assumes that process.webpackModule is available in the current process.

I have created a pull request to fix this issue too https://github.com/webpack/webpack-cli/pull/478

Answer 2

试试webpack-cli v3.0.1，我会工作的。

Answer 3

I was able to resolve this issue by switching to the new webpack-serve ( https://github.com/webpack-contrib/webpack-serve ).

From my experience, it was a very simple 1-1 drop-in replacement that only required me to alter the cli command used to load up webpack-dev-server to webpack-serve .

I've opened a modification request that this should be illuminated in the README for webpack-serve: https://github.com/webpack-contrib/webpack-serve/issues/158

Answer 4

After a while, today, I decided to test that again and I haven't seen a problem like that any more. I should note that today when I installed webpack-cli, npm installed webpack cli version "webpack-cli": "^3.0.3" and as it seems that problem is gone.

Thanks to the webpack group for solving this, and thank you all for answering:

@loveky and @jullian Tellez and @Even André Stensberg and @Jonny Asmar