"npm run start" is not building the project

[Rajdeepc]

My package json looks like:

"webpack": "^4.8.3", "webpack-cli": "^3.0.2", "webpack-dev-server": "^3.1.4"

I did yarn add -D webpack-cli to install the webpack CLI

Now its giving me an error like this.

✖ ｢wds｣: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

• configuration.module has an unknown property 'loaders'. These properties are valid: object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? } -> Options affecting the normal modules (NormalModuleFactory).
• configuration.resolve.extensions[0] should not be empty. -> A non-empty string

[karlchvojka]

Ive found a fix:

Hi all.

I had issues with the current repo logging errors when installing with an error of vulnerabilities in webpack-dev-server@3.1.4, and lodash@4.17.10.

NOTE: This is a fix for it, and there may be easier ways to do so. If there is, please let me know as I'm pretty new to all this. But I thought I would help people trying to do this course and getting hung up here. Steps to fix:

First errors having to do with vulnerabilities:

Run:

npm audit fix

and

npm audit fix --force

if required

You will be asked to install webpack cli

npm install webpack-cli

Next you will have some version conflicts with webpack and babel. Run:

npm uninstall --save-dev babel-loader babel-core babel-preset-env webpack​

Then:

npm install --save-dev babel-loader babel-core babel-preset-env webpack​

Next you will get this error when running npm start:

✖ ｢wds｣: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

• configuration.module has an unknown property 'loaders'. These properties are valid: object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? } -> Options affecting the normal modules (NormalModuleFactory).
• configuration.resolve.extensions[0] should not be empty.

To fix this open webpack.config.js in a code editor.

Replace this section:

module: {
    loaders: [
      {
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015', 'stage-1']
        }
      }
    ]
  },

With this:

module: {
    rules: [
      {
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-1']
        }
      }
    ]
  },

And this section:

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

For this:

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

[vinay72]

You should try npm start in your terminal.

[toddnagel]

ok, after an hour or so, I was able to fix this by starting over ( alot of fixes for this issues ), then do a fresh npm install, and change in package-json the "scripts" "start" does not need the 'node and dir to webpack-dev-server', instead make it this:

"start": "webpack-dev-server"

and that's all I did to get it to work, on windows machine..of course took over an hour to try all the fixes..