<think>好的，我现在需要解决用户提到的
Vue项目中运行dev时出现的
TypeError: Class extends value undefined is not a
constructor or null问题。用户提到错误发生在webpack的MainTemplate
.js，使用
vue-cli-service serve时出现。首先，我需要理解这个错误的常见原因和可能的解决方案。
根据用户提供的引用信息，特别是引用[2]、[3]、[4]，这个错误通常与webpack或其插件版本不兼容有关，尤其是mini-css-extract-plugin插件的问题。可能的解决方法包括安装或更新该插件，或者升级webpack的版本。此外，引用[3]提到需要升级webpack-cli，并处理可能的依赖关系。
首先，我应该检查项目中webpack、webpack-cli以及mini-css-extract-plugin的版本。用户可能在项目中使用的是旧版本的webpack，而某些插件需要更新的版本来兼容。例如，如果webpack-cli版本过旧，可能导致类继承错误，因为它无法正确解析某些插件的类定义。此外，mini-css-extract-plugin如果没有正确安装或版本不兼容，也可能导致这个问题。
接下来，用户尝试了安装mini-css-extract-plugin和升级webpack，但问题依旧存在。这可能是因为全局安装和项目本地安装的版本冲突，或者需要同时升级相关依赖。例如，webpack-cli可能需要特定版本的webpack，如果webpack升级到5
.x但webpack-cli仍为3
.x，可能存在兼容性问题。另外，
npm的缓存问题也可能导致安装的依赖没有正确更新，可能需要清除缓存后重新安装。
另一个可能性是其他依赖包间接引用了旧版本的webpack或插件，导致版本冲突。这时候需要检查整个项目的依赖树，使用
npm ls webpack或
npm ls mini-css-extract-plugin来查看依赖关系，并确保所有相关包都升级到兼容的版本。
此外，用户提到问题发生在运行
vue-cli-service serve时，这可能意味着问题与
Vue CLI本身的配置有关。可能需要检查
Vue CLI的版本，并考虑升级
Vue CLI到最新版本，因为新版本可能包含对webpack 5的支持或修复了相关bug。如果用户使用的是较旧的
Vue CLI版本，升级可能会解决依赖冲突。
总结可能的解决步骤：
1
. 确保mini-css-extract-plugin已正确安装为开发依赖。
2
. 升级webpack和webpack-cli到兼容的版本，注意全局和本地的安装。
3
. 清除
npm缓存并重新安装依赖。
4
. 检查并升级
Vue CLI版本。
5
. 检查其他依赖是否有版本冲突，并更新或调整版本。
需要注意的是，用户可能已经尝试过部分方法但未成功，因此需要更深入的排查，比如检查具体的错误堆栈，确认问题发生的具体位置，或者是否存在其他插件的干扰。此外，可能还需要查看webpack的配置，确保没有手动配置导致的问题，或者
Vue CLI自动生成的配置是否与其他插件冲突。</think>### 解决
Vue项目运行`dev`时出现的`
TypeError: Class extends value undefined is not a
constructor or null`问题
此错误通常与**webpack依赖版本不兼容**或**插件缺失**相关，以下是分步解决方案：
---
#### **1
. 安装或更新`mini-css-extract-plugin`**
错误可能由该插件未正确安装或版本过低导致：
```bash
npm install --save-dev mini-css-extract-plugin@latest
```
若已安装但问题未解决，尝试删除`
node_modules`和`package-lock
.json`后重新安装依赖：
```bash
rm -rf
node_modules package-lock
.json
npm install
```
---
#### **2
. 升级`webpack`和`webpack-cli`**
版本冲突是常见原因，需确保全局与本地版本兼容：
- **本地项目升级**：
```bash
npm install webpack@latest webpack-cli@latest --save-dev
```
- **全局升级**（避免全局与本地版本冲突）：
```bash
npm install webpack@latest webpack-cli@latest -g
```
**注意**：若使用`
vue-cli`，需检查其支持的webpack版本范围。
Vue CLI 4
.x默认支持webpack 4，升级到webpack 5可能需要手动配置[^2][^3]。
---
#### **3
. 检查
Vue CLI版本**
旧版
Vue CLI可能与新webpack版本冲突：
```bash
# 升级
Vue CLI全局版本
npm install -g @
vue/cli@latest
# 在项目中同步更新依赖
vue upgrade
```
---
#### **4
. 清除缓存并重装依赖**
npm缓存可能导致依赖未正确更新：
```bash
npm cache clean --f
orce
rm -rf
node_modules
npm install
```
---
#### **5
. 验证依赖树**
运行以下命令检查是否有版本冲突：
```bash
npm ls webpack
npm ls mini-css-extract-plugin
```
若存在多个版本，需手动调整`package
.json`中依赖版本，或使用`
npm dedupe`优化依赖结构。
---
#### **6
. 其他可能原因**
- **Babel插件问题**：确保`@babel/c
ore`和`babel-loader`为最新版本。
- **第三方插件兼容性**：某些插件（如`sass-loader`）可能与webpack 5不兼容，需查阅其文档调整版本。
---
### 相关问题
1
. **如何排查webpack版本冲突导致的构建错误？**
答：使用`
npm ls <package>`检查依赖树，或通过`webpack --version`验证全局与本地版本是否一致。
2
. **升级
Vue CLI后出现兼容性问题怎么办？**
答：参考
Vue CLI官方迁移指南，或回退到稳定版本（如`@
vue/cli@4
.5
.x`）。
3
. **`mini-css-extract-plugin`的作用是什么？**
答：用于将CSS提取为独立文件，替代`style-loader`，常用于生产环境优化[^2]。
---
通过上述步骤，大多数版本依赖问题可解决。若问题依旧，建议提供完整的错误日志以进一步分析。
当执行`npm run build`时遇到TypeError:Class extends value undefined is not a constructor or null错误，可以通过升级Webpack版本或者安装mini-css-extract-plugin来解决。首先尝试全局安装webpack-cli和在项目中安装webpack，如果问题依旧，考虑卸载后再重新安装。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
