Vue自学之路（10）——安装配置报错排查集锦

        本系列文章详细阐述基于Vue 3.X + Webpack 5.X，从徒手搭建项目开始到各个常用插件的配置和应用，目的是让学习者能快速掌握项目结构及vue的开发要领。

目录

1. 插件未定义 XXXPlugin is not defined

2. 无法解析依赖树 code ERSOLVE

3. 不是构造函数 XXXPlugin is not a constructor

4. TS2724 TS2305 reactive或 ref 模块不存在

5. TS1005：',' expected

---

1. 插件未定义 XXXPlugin is not defined

        错误信息举例如下：

PS D:\Project\Vue-UI> npm run build

> vue-ui@1.0.0 build
> webpack --mode=production --node-env=production --config ./build/webpack.prod.config.js

[webpack-cli] ReferenceError: MiniCssExtractPlugin is not defined
    at module.exports (D:\Project\Vue-UI\build\webpack.prod.config.js:17:38)
    at loadConfigByPath (D:\Project\Vue-UI\node_modules\webpack-cli\lib\webpack-cli.js:1747:27)
    at async Promise.all (index 0)
    at async WebpackCLI.loadConfig (D:\Project\Vue-UI\node_modules\webpack-cli\lib\webpack-cli.js:1765:29)
    at async WebpackCLI.createCompiler (D:\Project\Vue-UI\node_modules\webpack-cli\lib\webpack-cli.js:2187:18)
    at async WebpackCLI.runWebpack (D:\Project\Vue-UI\node_modules\webpack-cli\lib\webpack-cli.js:2323:16)
    at async Command.<anonymous> (D:\Project\Vue-UI\node_modules\webpack-cli\lib\webpack-cli.js:1060:13)
    at async Promise.all (index 1)
    at async Command.<anonymous> (D:\Project\Vue-UI\node_modules\webpack-cli\lib\webpack-cli.js:1674:7)

        上述错误报：MiniCssExtractPlugin 未定义，此类错误一定是 js 引用了该插件，但是，没有用 import 导入，故可以根据错误提示，找到 webpack.prod.config.js 文件，发现该文件中有如下代码：

prodWebpackConfig.plugins.push(new MiniCssExtractPlugin());

        但是，文件顶部缺少对该插件的导入语句，故在文件顶部加入如下代码：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

2. 无法解析依赖树 code ERSOLVE

        在安装插件时，报 unable to resolve dependency tree，具体如下：

PS D:\Project\Vue-UI> npm install extract-text-webpack-plugin --save-dev
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: my-webpack-project@1.0.0
npm ERR! Found: webpack@5.70.0
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"^5.70.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^3.1.0" from extract-text-webpack-plugin@3.0.2
npm ERR! node_modules/extract-text-webpack-plugin
npm ERR!   dev extract-text-webpack-plugin@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\ONE\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\ONE\AppData\Local\npm-cache\_logs\2022-03-25T12_13_16_052Z-debug-0.log

        上述错误提示中告知，webpack 老版本（3.1.0）对应 extract-text-webpack-plugin 的 3.0.2 版本。一般这种情况都是插件本身很久没有正式版推出了。可以在npm资源官网中找该插件的历史版本及其发行时间，

        根据错误提示，如果明确要安装 3.0.2 版本，则可以使用 --force 或 --legacy-peer-deps 参数，具体如下：

npm install extract-text-webpack-plugin@3.0.2 --force --save-dev

3. 不是构造函数 XXXPlugin is not a constructor

        在编译的过程中，报 TypeError: XXXPlugin is not a constructor，具体报错信息如下：

[webpack-cli] Failed to load 'D:\Project\Study\vue\empty-test\webpack.config.js' config
[webpack-cli] TypeError: CleanWebpackPlugin is not a constructor
    at Object.<anonymous> (D:\Project\Study\vue\empty-test\webpack.config.js:18:9)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at WebpackCLI.tryRequireThenImport (D:\Project\Study\vue\empty-test\node_modules\webpack-cli\lib\webpack-cli.js:244:16)
    at loadConfigByPath (D:\Project\Study\vue\empty-test\node_modules\webpack-cli\lib\webpack-cli.js:1712:30)
    at D:\Project\Study\vue\empty-test\node_modules\webpack-cli\lib\webpack-cli.js:1767:11

        上述报错中，说 CleanWebpackPlugin 不是一个构造函数，根据 vue 3 的语法，将下列引用代码

const CleanWebpackPlugin = require('clean-webpack-plugin')

        修改为如下：

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

4. TS2724 TS2305 reactive或 ref 模块不存在

TS2724: Module '"../../node_modules/vue/dist/vue"' has no exported member 'reactive'. Did you mean 'disactive'
TS2305: Module '"../../node_modules/vue/dist/vue"' has no exported member 'ref'

报错原因：Typescript的版本与 vue 不兼容。当下 Vue 是 3.2.31，Typescript是3.9.3

解决方法：卸掉原版本后，使用下列脚本将Typescript 版本升级到 4.6.3 即可

npm i typescript@4.6.3 -D

        注：有文档说升级到 4.3.5 可以该问题，但是，还会有 TS 1005 的问题存在。

5. TS1005：',' expected

ERROR in D:\Project\Fairyland\Fairyland-UI\node_modules\element-plus\es\components\rate\src\rate.vue.d.ts
1:14-27
[tsl] ERROR in D:\Project\Fairyland\Fairyland-UI\node_modules\element-plus\es\components\rate\src\rate.vue.d.ts(1,15)
      TS1005: ',' expected.
ts-loader-default_0c5a263502dc9404

ERROR in D:\Project\Fairyland\Fairyland-UI\node_modules\element-plus\lib\components\rate\src\rate.vue.d.ts
1:14-27
[tsl] ERROR in D:\Project\Fairyland\Fairyland-UI\node_modules\element-plus\lib\components\rate\src\rate.vue.d.ts(1,15)
      TS1005: ',' expected.
ts-loader-default_0c5a263502dc9404

webpack 5.70.0 compiled with 2 errors in 15297 ms

报错原因：Typescript的版本与 vue 不兼容。当下 Vue 是 3.2.31，Typescript是 4.3.5

解决方法：卸掉原版本后，使用下列脚本将Typescript 版本升级到 4.6.3 即可

npm i typescript@4.6.3 -D