PS E:\java-study-item\jeecgboot-vue2\ant-design-vue-jeecg> npm run build:test > [email protected] build:test E:\java-study-item\jeecgboot-vue2\ant-design-vue-jeecg > vue-cli-service build --mode test - Building for test... ERROR TypeError: Class extends value undefined is not a constructor or null TypeError: Class extends value undefined is not a constructor or null at Object.<anonymous> (E:\java-study-item\jeecgboot-vue2\ant-design-vue-jeecg\node_modules\mini-css-extract-plugin\dist\CssDependency.js:12:46) at Module._compile (internal/modules/cjs/loader.js:1201:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1221:10) at Module.load (internal/modules/cjs/loader.js:1050:32) at Function.Module._load (internal/modules/cjs/loader.js:938:14) at Module.require (internal/modules/cjs/loader.js:1090:19) at require (internal/modules/cjs/helpers.js:75:18) at Object.<anonymous> (E:\java-study-item\jeecgboot-vue2\ant-design-vue-jeecg\node_modules\mini-css-extract-plugin\dist\index.js:12:45) at Module._compile (internal/modules/cjs/loader.js:1201:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1221:10) at Module.load (internal/modules/cjs/loader.js:1050:32) at Function.Module._load (internal/modules/cjs/loader.js:938:14) at Module.require (internal/modules/cjs/loader.js:1090:19) at require (internal/modules/cjs/helpers.js:75:18) at Object.<anonymous> (E:\java-study-item\jeecgboot-vue2\ant-design-vue-jeecg\node_modules\mini-css-extract-plugin\dist\cjs.js:3:18) at Module._compile (internal/modules/cjs/loader.js:1201:30) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] build:test: `vue-cli-service build --mode test` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] build:test script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can b

<think>好的，我现在需要解决用户在使用npm run build:test时遇到的错误：“Class extends value undefined is not a constructor or null”，特别是在Vue项目中与mini-css-extract-plugin相关的问题。首先，我要回顾用户提供的引用内容，看看有没有直接的解决方法。 根据引用3，用户提到安装mini-css-extract-plugin的开发依赖可以解决这个问题。所以可能的问题是项目中没有正确安装这个插件，或者版本不兼容。用户可能是在构建过程中，某个地方引用了这个插件，但插件未正确安装或版本不对，导致类继承时找不到父类，从而出现undefined的错误。 接下来，我需要考虑可能的解决步骤。首先，检查是否安装了mini-css-extract-plugin。如果未安装，执行npm install --save-dev mini-css-extract-plugin。如果已经安装，可能需要更新版本，因为旧版本可能与当前的项目依赖（如webpack或vue-cli-service）不兼容。此外，检查webpack的配置是否正确引用了该插件，尤其是在生产或测试环境的配置中是否正确设置。 另外，可能需要检查node_modules是否完整，有时候依赖安装不完整或存在缓存问题，导致某些模块缺失。清理npm缓存并重新安装依赖可能有效，比如使用npm cache clean --force，然后删除node_modules和package-lock.json，再重新npm install。 另外，查看用户的Vue CLI版本是否过旧，升级到最新版本可能解决兼容性问题。运行npm update vue-cli-service和相关依赖，确保所有包都是最新的兼容版本。 还有可能是在webpack配置中错误地引用了插件，比如拼写错误或导入方式不正确，需要检查配置文件中的相关部分，确保正确导入和使用mini-css-extract-plugin。 总结起来，可能的解决步骤包括：安装或更新插件，清理缓存和重新安装依赖，检查配置文件的正确性，升级项目依赖版本。需要一步步排除可能的原因，从最简单的安装问题开始，逐步深入到配置和版本兼容性问题。</think>### 解决 `npm run build:test` 报错：`Class extends value undefined is not a constructor or null` 此错误通常与 `mini-css-extract-plugin` 插件版本或依赖关系冲突相关。以下是逐步解决方案： --- #### **1. 确认插件安装状态** 确保 `mini-css-extract-plugin` 已正确安装为开发依赖： ```bash npm install --save-dev mini-css-extract-plugin@latest ``` - 如果已安装，尝试升级到最新版本以修复兼容性问题[^3]。 --- #### **2. 清理并重新安装依赖** 依赖缓存或安装不完整可能导致该问题： ```bash # 清理缓存 npm cache clean --force # 删除现有依赖和锁定文件 rm -rf node_modules package-lock.json # 重新安装依赖 npm install ``` --- #### **3. 检查 Webpack 配置** 在 Vue CLI 项目中，检查 `vue.config.js` 或 Webpack 配置文件中是否正确引用了插件： ```javascript const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { configureWebpack: { plugins: [ new MiniCssExtractPlugin({ filename: '[name].css', }), ], }, }; ``` - 确保没有拼写错误或语法问题[^2]。 --- #### **4. 升级项目依赖** 过时的 `vue-cli-service` 或 Webpack 版本可能与插件不兼容： ```bash npm update vue-cli-service webpack mini-css-extract-plugin ``` - 指定版本安装（若最新版仍报错）： ```bash npm install [email protected] [email protected] --save-dev ``` --- #### **5. 检查 Node.js 环境** - 确保 Node.js 版本 ≥ 12（Vue CLI 4+ 要求），建议使用 LTS 版本（如 14.x 或 16.x）。 --- ### 相关问题 1. **如何排查 Webpack 插件兼容性问题？** - 通过 `npm ls <package>` 查看依赖树，确认是否存在版本冲突。 2. **Vue CLI 项目中常见的构建错误有哪些？** - 包括依赖缺失、配置错误、Node.js 版本过低等[^1]。 3. **如何回退特定 npm 包的版本？** - 使用 `npm install <package>@<version>` 指定历史版本。