The Cli Moved Into A Separate Package: Webpack-cli

I'm new to React.js and I'm trying to learn from the tutorials on tutorialspoint but I faced error. Here is the error on console when I execute npm start command: C:\Users\HP\Deskt

Solution 1:

I went through the same example and faced the same issue. So following the above answers I first ran this command -

npm install -g webpack-cli --save-dev

Nothing happened and was still facing the same issue.

Then I ran this command -

npm install webpack-cli --save-dev

The issue was solved but I was getting another error.

Turns out in the new Webpack version they have changed the module attributes also. So you need to make change in the webpack.config.js file also.

module: {
        rules: [
          {
             test: /\.jsx?$/,
             exclude: /node_modules/,
             loader: 'babel-loader',
             query: {
                presets: ['es2015', 'react']
             }
          }
        ]
   }

So basically loaders is replaced by rules inside the module object.

I made this change and it worked for me.

Hope it helps other people who are following this tutorial.

To resolve the Invalid configuration object issue, I referred to this answer. https://stackoverflow.com/a/42482079/5892553

Solution 2:

In webpack 3, webpack itself and the CLI for it used to be in the same package, but in version 4, they've separated the two to manage each of them better.

To solve your issue, install the webpack-cli package as the error suggests by running npm install webpack-cli --save-dev on the command line, same as you would any other package.

Solution 3:

Was having the same problem, and no luck with the above solutions - I tried installing webpack-cli globally as well as locally and this worked.

npm install -g webpack-cli --save-dev

This fixed it for me. At least enough to perform webpack --mode development.

Solution 4:

Step1: First run

npm i webpack webpack-dev-server webpack-cli --save-dev

Step2: Loaders are replaced with rules so change code in your webpack.config.j. Let's change your webpack.config.js file:

varconfig= {
    entry:'./main.js',
    output: {
        path:'./',
        filename:'index.js',
    },
    devServer: {
        inline:true,
        port:8090
    },
    module: {
        rules: [
            {
                test:/\.jsx?$/,
                exclude:/node_modules/,
                loader:'babel',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
}
module.exports=config;

Step3: Now go to your package.json file and make some changes in your scripts option:

"scripts":{"start":"webpack-dev-server --mode development --open --hot","build":"webpack --mode production"},

Step4: Now run

npm start

in console

Solution 5:

Solved for Webpack 4 - I hope it works for webpack 2 onwards

Install webpack-cli globally too by using this command

npm i -g webpack-cli

So in total you need to run two following commands one for local and other for install CLI globally respectively.

npm i -D webpack-cli
npm i -g webpack-cli

it works for me I hope it will work for you too :)