The CLI moved into a separate package: webpack-cli

Question

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\Desktop\reactApp1> npm start
> reactapp1@1.0.0 start C:\Users\HP\Desktop\reactApp1.
> webpack-dev-server --hot

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 install webpack-cli -D 
-> When using yarn: yarn add webpack-cli -D 
module.js:540
    throw err; 

Error: Cannot find module .webpack-cli/bin/config-yargs. 
    at Function.Module._resolveFilenam (module.js:538:15) 
    at Function.Module. load (module.j5:668:25) 
    at Module.require (module.js,587.17) 
    at require (internal/module.js:11:18) 
    at Object•<anonymous> (C:\Users\HP\Desktop\reactApp1\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1) 

    at Module. compile (module.js:663:30) 
    at Object.Module. extensions. .js (module.js:656:10) 
    at Module.load (module.js:556:32) 
    at tryModuleLoad (module.js:699:12) 
    at Function.Module. load (modul.js:691:3) 
  npm ERR! code ELIFECYCLE 
  npm ERR! errno 1 
  npm ERR! reactapp@1.0.0 start: `webpack-dev-server --hot`
  npm ERR! Exit status 1
  npm ERR!
  npm ERR! Failed at the reactapp@1.0.0 start 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\HP\AppData\Roaming\npm-cache\_logs\2018-03-06T05_29_08_833Z-debug.log

package.json

     {
      "name": "reactapp1",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "start": "webpack-dev-server --hot"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "babel-core": "^6.26.0",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "webpack": "^4.0.1",
        "webpack-dev-server": "^3.1.0"
      },
      "devDependencies": {
        "babel-loader": "^7.1.3"
      }
    }

webpack.config.js

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

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));

App.jsx

import React from 'react';
class App extends React.Component {
    render() {
        return (
            <div>
                Hello World!!!
            </div>
        );
    }
}
export default App;

index.html

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = "index.js"></script>
</body>
</html>

just downgrade to webpack 3 using npm install --save-dev webpack@3.10.0 — digit, Mar 04 '18 at 05:46

score 18 · Answer 1 · answered Mar 11 '18 at 16:42

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

If I remember correctly, wouldn't doing `-g` will install the package globally and ignore any `--save` or `--save-dev` flags? That might be why your first command there didn't work — kingdaro, Mar 11 '18 at 19:59

score 15 · Answer 2 · answered Mar 04 '18 at 05:37

15

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.

answered Mar 04 '18 at 05:37

kingdaro

11,528
3
34
38

Are you running the command with the current directory set to your project folder? – kingdaro Mar 04 '18 at 06:15
Installed cli and webpack(npm install -g webpack)...still getting the same error,I am in my project folder... – Akhil Maripally Mar 09 '18 at 05:32
webpack and webpack-cli _both_ have to be installed locally, at their latest versions. – kingdaro Mar 11 '18 at 19:57
@prakashkumar have you gotten it to work yet? I have the same problem – now_world Mar 31 '18 at 21:57

score 6 · Answer 3 · answered Mar 04 '18 at 20:27

6

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.

answered Mar 04 '18 at 20:27

Ben Holmquist

61
2

So why did this work... if someone can tell me, would help :) my thoughts... I'd started with npm init to start a package in my local project. I'd installed webpack here AS WELL AS GLOBALLY per some video I was watching. When installing globally, this told the command line that this was the webpack I'd be referencing. However, when I installed webpack-cli, I never installed globally. So when searching for it, it was looking in global node-modules. Right? – Ben Holmquist Mar 04 '18 at 20:28

score 3 · Answer 4 · edited May 19 '18 at 00:06

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:

var config = {
    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

indeed the first installation is what for me let avoid conflict between global webpack version( installed previously) and the local of a new project. Though I see these as a limitation in "webpack" world and will make soon a solution with docker — Carmine Tambascia, Aug 30 '19 at 08:54

score 2 · Answer 5 · answered Apr 11 '18 at 08:23

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 :)

score 2 · Answer 6 · edited Nov 29 '18 at 06:57

2

I solved the problem with this.

npm i webpack-cli @webpack-cli/init

npx webpack-cli init

Hope to help 1

edited Nov 29 '18 at 06:57

Sociopath

13,068
19
47
75

answered Nov 29 '18 at 06:38

user9668868

36
1

score 1 · Answer 7 · edited Mar 27 '18 at 23:11

1

You need install webpack server, not webpack-cli. Have a look at the 2nd point in this blog post. Try npm i -g webpack@2.2.1.

edited Mar 27 '18 at 23:11

Nielsvh

1,151
1
18
31

answered Mar 27 '18 at 22:37

Abel Condori Malmaceda

19
2

score 0 · Answer 8 · answered Jun 09 '18 at 11:34

If you want to use webpack-dev-server, you need to install webpack and webpack-cli first. webpack is a module which store compiler and, webpack-cli is command-line-interface to run it. Otherwise, if you prefer webpack-command, a much more light-weight version of webpack-cli, you may need to install webpack and webpack-serve!

score -1 · Answer 9 · answered Mar 04 '18 at 05:39

-1

The error console is simply telling you how to resolve the issue. Seems like webpack module is dependent on webpack-cli module. To resolve the issue, just run the command npm install webpack-cli --save. it would just work fine.

answered Mar 04 '18 at 05:39

Anadi Sharma

295
1
8

Really!! Does it gives you the same error? Can you locate `webpack-cli` directory in `node_modules` folder? – Anadi Sharma Mar 04 '18 at 05:47

The CLI moved into a separate package: webpack-cli

9 Answers9

Linked