Conflict between webpack version and vue version

created at 03-21-2022 views: 17

background

When I was working on an example project of Vue recently, when I encountered a problem of packaging the project with webpack, there were some version compatibility conflicts, which led to the operation error. The results and solutions are as follows, which are recorded here:

error 1

TypeErroethis.getOptions is not a function

reason

The installed version of less-loader is too high, resulting in conflict problems

solution

lower version number

Uninstall the original version:

npm uninstall less-loader

Reinstall the lower version:

npm install less-loader@x.x.x

(x.x.x indicates that a specific version number needs to be installed)

error 2

Error: module property was removed from Dependency (use compilation.moduleGraph.updateModule(dependency, module) instead)

reason

Since the version above webpack4 has changed greatly, it is different from the previous one, so if it is a vue project created by vue3, the version of webpack4 is more compatible with each other. If the version of webpack5 is used, the above error will appear.

solution

lower version number

Uninstall the original version: Since we may not know whether the webpack we installed before is installed globally or locally, we can execute the following two commands

Execute in the root path of the created project

Global:

npm uninstall -g webpack

Local:

npm un webpack

Reinstall the lower version:

npm install --save-dev webpack@x.x.x

(x.x.x indicates that a specific version number needs to be installed)

Supplement: Since the version of webpack needs to be used together with webpack-cli, you should also install it and run it

npm install --save-dev webpack-cli

Check the installed version number

node_modules/.bin/webpack -v
created at:03-21-2022
edited at: 06-01-2022: