webpack error : CLI moved into a separate package: webpack-cli

Question

I'm following a tutorial here to install react and I'm new to ReactJS.

I completed installations as shown in the video and run this command in the root project folder:

npm start it

I encountered with following error here:

The CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI
-> When using npm: npm i -D webpack-cli
-> When using yarn: yarn add -D webpack-cli
module.js:471
    throw err;
    ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (module.js:469:15)

I tried the solutions posted in this link but it's still the same.

Here's webpack.config.js:

var path = require('path');
module.exports = {
    entry: './script.jsx',
    output: {
        path: path.resolve(__dirname,''),
        filename: 'transpiled.js'
    },
    module: {
        rules: [
            test: /\.jsx?$/,
            loaders: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['es2015', 'react']
            }
        ]
    }
}

And package.json:

{
  "name": "react_project",
  "version": "1.0.0",
  "description": "first project on react",
  "main": "index.js",
  "scripts": {
    "it": "webpack-dev-server --hot"
  },
  "author": "azima",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.17.1",
    "webpack-dev-server": "^3.1.7"
  },
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2"
  }
}

Is it the issue with Webpack version?

Possible duplicate of [The CLI moved into a separate package: webpack-cli](https://stackoverflow.com/questions/49092291/the-cli-moved-into-a-separate-package-webpack-cli) — Sagar, Sep 03 '18 at 06:38

score 3 · Accepted Answer · answered Sep 03 '18 at 06:33

3

Try npm install webpack-cli --save

answered Sep 03 '18 at 06:33

Wesgur

3,140
3
18
28

1

try `{ test: /\.jsx$/ ... }` in your webpack config – Wesgur Sep 03 '18 at 06:39
This worked even though I was using `yarn`. Weird. – Robbie Cook May 31 '21 at 23:52
This does work even with yarn. However, you will have to manage two package managers. I'd suggest you stick to one. You'll notice both `package.lock` file and `yarn.lock` file are generated if you used both. – Wesgur May 31 '21 at 23:56

webpack error : CLI moved into a separate package: webpack-cli

1 Answers1