Summary of vue's webpack -v error solution

Xiaobai learned about Vue, then learned about webpack, and then installed various

cnpm is a domestic source and is much faster than international sources. If you don’t know about cnpm, you can check it yourself.

cnpm install -g webpack

After a while, the installation is successful, and I want to check the version of webpack

It prompts me to install webpack-cli, so install it

cnpm install -g webpack-cli

It will be installed after a while. If you look at webpack -v again, the following error will be reported.

$ webpack -v
C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\lib\groups\resolveConfig.js:105
        for await (const resolvedOption of finalizedConfigs) {
            ^^^^^
SyntaxError: Unexpected reserved word
    at NativeCompileCache._moduleCompile (C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\_v8-compile-cache@2.2.0@v8-compile-cache\v8-compile-cache.js:240:18)
    at Module._compile (C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\_v8-compile-cache@2.2.0@v8-compile-cache\v8-compile-cache.js:184:36)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\_v8-compile-cache@2.2.0@v8-compile-cache\v8-compile-cache.js:159:20)
    at Object.<anonymous> (C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\lib\webpack-cli.js:14:32)
    at Module._compile (C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\_v8-compile-cache@2.2.0@v8-compile-cache\v8-compile-cache.js:192:30)

Use npm list --depth=0 -g to see which packages are installed.
I also printed out various versions, but reported two errors, which made me, as a programmer with many years of experience, very unhappy.

$ npm list --depth=0 -g
C:\Users\Administrator\AppData\Roaming\npm
+--cnpm@6.1.1
+-- vue-cli@2.9.6
+-- webpack@4.19.0
-- webpack-cli@4.2.0

npm ERR! error in C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\_@webpack-cli_info@1.1.0@@webpack-cli: ENOENT: no such file or directory, open 'C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\_@webpack-cli_info@1.1.0@@webpack-cli\package.json'
npm ERR! error in C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\_@webpack-cli_serve@1.1.0@@webpack-cli: ENOENT: no such file or directory, open 'C:\Users\Administrator\AppData\Roaming\npm\node_modules\webpack-cli\node_modules\_@webpack-cli_serve@1.1.0@@webpack-cli\package.json'

So I took a closer look and found that the package.json file was missing, so I created a new one, and then it reported an error that it could not be read. Of course, empty content could not be read. I found the file in another directory where the path without the file was prompted, so I copied it to this level and tried to check the versions of each package. There was no error, but webpack -v still did not work and reported the above error. I think it might be a problem with the webpack and webpack-cli versions not matching.

Check the version command:

cnpm view webpack versions

There are too many printed versions to list here. I checked and found that the version on my computer is 4.19.0 and the latest one is 5.4.0.

cnpm view webpack-cli versions

The latest version of webpack-cli is 4.2.0.

It's probably due to version asymmetry.

Then I will uninstall webpack-cli and install it again.

cnpm uninstall weabpack-cli

It only prints "up to date in 0.029s", which seems not very useful. I use npm list --depth=0 -g to find that webpack-cli@4.2.0 is still there.

Then I looked up how to install the specified version of webpack-cli

Find an older version of the one you just watched.

cnpm install -g webpack-cli@3.3.10

After a successful installation

Check npm list --depth=0 -g, the printing is normal and no error is reported.

$ npm list --depth=0 -g
C:\Users\Administrator\AppData\Roaming\npm
+--cnpm@6.1.1
+-- vue-cli@2.9.6
+-- webpack@4.19.0
-- webpack-cli@3.3.10

Then use webpack -v again, no error is reported, and it can be displayed normally

$ webpack -v
4.19.0

So far, the pit climbing is successful~

A long time ago, I read an article about the many pitfalls of different versions of node.js. The same is true for the versions of tools managed by npm. I haven't even learned it yet, and my learning is about to be wasted. The road of a programmer is so difficult! ! !

This is the end of this article about the summary of the solution to the webpack -v error of vue. For more relevant content about the webpack -v error of vue, please search the previous articles of 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!