npx webpack insists on installing webpack-cli but its already installed

Question

I am attempting to run the command:

npx webpack

It tells me it needs webpack-cli and asks if it should install it, I say 'yes'. Then it gives me:

PS C:\_ljdev\webpack demo> npx webpack
npx: installed 321 in 11.89s
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no): yes
Installing 'webpack-cli' (running 'npm install -D webpack-cli')...
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.

+ [email protected]
updated 1 package and audited 1053 packages in 2.093s
found 0 vulnerabilities

{ Error: Cannot find module 'webpack-cli'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at runCommand.then (C:\Users\luke.jenner\AppData\Roaming\npm-cache\_npx\3272\node_modules\webpack\bin\webpack.js:143:5)
    at process._tickCallback (internal/process/next_tick.js:68:7) code: 'MODULE_NOT_FOUND' }

So I attempt to install it locally, manually via:

PS C:\_ljdev\webpack demo> npm install webpack-cli
npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.

+ [email protected]
updated 1 package and audited 1053 packages in 8.034s
found 0 vulnerabilities

And I check that it is installed using:

PS C:\_ljdev\webpack demo> npm list
[email protected] C:\_ljdev\webpack demo
`-- [email protected]
  +-- [email protected]
  | +-- [email protected]
(other dependencies omitted for brevity)

So it appears installed.

I try npx webpack again and get the exact same output and question to install webpack-cli again.

Can anyone tell me why it's not finding the webpack-cli local install? Does it have to be installed globally?

Or more curiously: why does it fail when it tries to install it itself?

Ecg

Is webpack installed globally? – Shepperd

Installing webpack globally really defeats the purpose of using npx, which is: "Executes <command> either from a local node_modules/.bin, or from a central cache, installing any packages needed in order for <command> to run." See this article to better understand what npx is for: medium.com/@maybekatz/… – Ecg

Does this answer your question? One CLI for webpack must be installed - Can't make webpack run – Orna

Answer 1

I have hit this error just recently. Deleting the node_modules folder and reinstalling the dependencies with npm i made the npx webpack ... command work again. Can't really say why...

Michaeline

Answer 2

I have encountered the same problem.

After half a day of testing, I finally found out that there are special characters in my project path. Remove them, re-run npx webpack and everything is OK.

There is a space in your project path, maybe you can remove it and re-try. click here to verify my result

Edit:

Sorry, I didn't express clearly. I meant that there were special characters in the project path which would be converted into some others during the npm installation.

If you change your working directory name, such as from webpack-demo to webpack/demo, remove and re-install webpack and webpack-cli. Then open the package.json of webpack package in node_modules directory, you will find the _where attribute which contains local absolute path but is different from your current real project path.

I guess(probably not right, maybe some other method) that npx command will use the _where attribute to locate the webpack package. So if the path is wrong, npm will have a tip that you should install webpack-cli first. But even you re-install the webpack-cli, the other scripts still can't find it.

Pipsissewa

I removed the space and it worked. But then i put the space back in and it still worked...so I don't know why its working now. But it seems that having the space in the path didn't stop it from working... – Ecg

@Ecg sorry, I have revised my answer. Hope that will be helpful. – Pipsissewa

@JTech, I found the reason. If you open the webpack.js file in the node_modules/.bin directory, you will find the code is attemping to resolve the webpack-cli package path and if the locally installed package is not resolved, the default global path will be used. That' s why npx webpack will work if u install webpack and webpack-cli globally. – Pipsissewa

Answer 3

Try running npx webpack-cli instead of npx webpack.

You need to install webpack-cli locally first using npm install --save-dev webpack-cli.

Orna

Answer 4

Try installing webpack-cli globally.

npm i -g webpack-cli

Go through this issue on github.

https://github.com/webpack/webpack-cli/issues/299

Groat

Installing webpack globally really defeats the purpose of using npx, which is: "Executes <command> either from a local node_modules/.bin, or from a central cache, installing any packages needed in order for <command> to run." See this article to better understand what npx is for: medium.com/@maybekatz/… – Ecg