VUE前端打包报错：TypeError: Class extends value undefined is not a constructor or null

最新推荐文章于 2024-11-27 09:27:02 发布
最新推荐文章于 2024-11-27 09:27:02 发布
阅读量1.6k 收藏 2
点赞数 4
分类专栏： 前端技术 文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40704513/article/details/140093863
版权

在执行npm run build的时候遇到了错误：TypeError: Class extends value undefined is not a constructor or null；而执行npm run serve是可以正常执行的，报错如下：

building for production... 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> (D:\JavaWorkSpace\jeecg\jeecg-boot\ant-design-vue-jeecg\node_modules\mini-css-extract-plugin\dist\CssDependency.js:12:46)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (D:\JavaWorkSpace\jeecg\jeecg-boot\ant-design-vue-jeecg\node_modules\mini-css-extract-plugin\dist\index.js:12:45)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at Object.<anonymous> (D:\JavaWorkSpace\jeecg\jeecg-boot\ant-design-vue-jeecg\node_modules\mini-css-extract-plugin\dist\cjs.js:3:18)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)

执行npm install --save-dev mini-css-extract-plugin //在项目开发依赖中安装解决

vue打包npmrun build报错ERROR TypeError: Class extends value undefined is not a constructor or null
lr_24353的博客
02-13 422
解决方案：node_modules文件夹删除，然后yarn install重新下载，在npm run build打包就会成功了；
报错TypeError: Class extends value undefined is not a constructor or null
qq_45530512的博客
04-06 8191
报错TypeError: Class extends value undefined is not a constructor or null
【Bug解决】VUE前端打包报错：TypeError: Class extends value undefined is not a constructor or null
Dan的博客
02-14 5940
问题 VUE前端打包报错：TypeError: Class extends value undefined is not a constructor or null 在执行npm run build的时候遇到了错误：TypeError: Class extends value undefined is not a constructor or null；而执行npm run serve是可以正常执行的，报错如下： uilding for production... ERROR TypeError: Cla
打包时,报错TypeError: Class extends value undefined is not a constructor or null
SunPeng的博客
10-24 1653
打包时,报错TypeError: Class extends value undefined is not a constructor or null
vue打包报错ERROR TypeError: Class extends value undefined is not a constructor or null
码小哥的专栏
10-30 1372
jeecg的vue项目可运行，不可打包问题，Building for production... ERROR TypeError: Class extends value undefined is
解决ESLint报错：“TypeError: this.cliEngine is not a constructor“
pleaseprintf的博客
07-29 2127
ESLint是前端开发中常用的代码规范检查工具。然而，有时我们可能会遇到"TypeError: this.cliEngine is not a constructor"这样的报错，影响代码规范检查的进行。本文将为你详细介绍该报错的原因，并提供解决方法，确保ESLint的正常工作。通过本文，你了解了解决"TypeError: this.cliEngine is not a constructor"报错的多种方法。遵循这些方法，你可以确保ESLint正常工作，并帮助团队维持良好的代码规范。
2020-11-28 npm打包失败
wingsky666的博客
11-28 1842
问题： npm run build 然后就出问题了 ERROR TypeError: Class extends value undefined is not a constructor or null 参考 https://blog.csdn.net/u013938484/article/details/106259913 npm install webpack -g npm install webpack --save-dev 启动成功！ OK！ ...
JEECG前端编译错误对应方法：vue-cli-service not found
知行合一 止于至善
06-04 1万+
下载jeecg的2.2.0的vue版本，在vue目录下进行npm install之后，使用npm run build构建js文件时提示vue-cli-service not found, 这篇文章介绍一下常见的对应方式。
Uncaught TypeError: Cannot read property ‘Component‘ of undefined
weixin_43478936的博客
08-17 1442
Cannot read property ‘Component’ of undefined 1.问题描述 2.解决方案 问题描述 上一篇文章中在本地搭建了第一个React项目后,跟着react中文文档学习,封装时钟的外观代码如下 class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { ret
TypeError: this.getLocation is not a function
03-12
嗯，我现在遇到了一个JavaScript的错误：TypeError: this.getLocation is not a function。这让我有点困惑，不知道该怎么解决。让我仔细想想可能的原因和解决办法。 首先，这个错误提示说this.getLocation不是一个...
npm打包报错TypeError: Class extends value undefined is not a constructor or null
南北极之间
02-17 4998
npm打包报错TypeError: Class extends value undefined is not a constructor or null 解决办法： 升级webpack版本
TypeError: Class extends value undefined is not a constructor or null 错误
Joker
04-10 3002
$ vue-cli-service build ⠋ Building for production... 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> (/root/deploy/ui/nod.
jeecg项目报TypeError: Class extends value undefined is not a constructor or null；
张先森的博客
10-17 2653
jeecg项目报TypeError: Class extends value undefined is not a constructor or null；
13、TypeError: Class extends value undefined is not a constructor or null
一利糖果的博客
04-04 1404
解：卸载Node.js，重新安装它。
react报错：TypeError: Class extends value undefined is not a constructor or null
热门推荐
约妲己吃火锅的博客
12-02 2万+
大意为：这个类继承的值无法解构或者解构的值为空 react 对象方法里面没有component。 这里要严格区分大小写，改为Component就解决了！ 哈哈哈哈，就这样了！！祝你好运！ ...
TypeError Class extends value undefined is not a constructor or null
欢迎来到我的博客
11-27 522
TypeError: Class extends value undefined is not a constructor or null at Object. (/Users/mi/IdeaProjects/manage/ui/src/test-vue/nod e_modules/mini-css-extract-plugin/dist/CssDependency.js:12:46)
npm run build ERROR TypeError: Class extends value undefined is not a constructor or nullTypeError
weixin_51437161的博客
07-26 409
npm install webpack --save-dev //在项目开发依赖中安装。npm install --save-dev mini-css-extract-plugin //在项目开发依赖中安装。npm install webpack -g // 全局安装。
Error in render: "TypeError: Cannot read properties of undefined (reading 'props')"
最新发布
03-12
<think>好的，我现在需要解决用户遇到的“TypeError: Cannot read properties of undefined (reading 'props')”错误。首先，我得理解这个错误的原因。通常，这种错误发生在JavaScript或相关框架中，比如React或Vue，当试图访问一个未定义对象的属性时。这里的“props”属性被访问，但对象本身是undefined，所以问题可能出在某个变量或对象未被正确初始化。 接下来，我需要考虑可能的情况。首先，用户可能在使用React组件时，没有正确传递props。比如，父组件没有传递某个prop，而子组件直接尝试访问this.props.someProp，但someProp未定义。这时候访问this.props.someProp的属性就会出错。例如，如果someProp是一个对象，而用户试图访问this.props.someProp.name，但someProp本身是undefined，就会抛出这个错误。 另一个可能性是组件的生命周期问题。比如在组件挂载之前访问props，但此时props还未准备好。或者在使用Hooks时，比如useEffect或useState，可能没有正确处理props的初始状态，导致某些情况下props未被正确赋值。 还有可能是异步数据获取的问题。比如组件渲染依赖于从API获取的数据，但数据还未返回时，props中的某个属性仍然是undefined，这时候直接访问就会出错。 接下来，我需要提供解决步骤。首先，检查代码中报错的位置，找到访问props的地方。然后确认该prop是否被正确传递。如果是React组件，检查父组件是否传递了该prop，是否有拼写错误，或者是否使用了PropTypes来验证props的类型和必需性。 如果是异步数据的问题，可以在访问props属性之前添加条件判断，确保对象存在。例如，使用可选链操作符（?.）或者逻辑与（&&）来避免访问未定义的属性。 另外，检查组件的生命周期或Hooks的使用是否正确。确保在数据可用后再进行相关操作，比如在useEffect中处理副作用，并正确设置依赖项。 最后，建议用户使用开发者工具调试，比如在控制台输出props，查看其结构和内容，确认是否存在未定义的情况。或者使用断点调试，逐步执行代码，找到出错的具体位置。 总结起来，这个错误通常是由于访问未定义的对象的属性引起的，解决的关键在于确保对象存在后再访问其属性，并检查数据流和组件的props传递是否正确。</think>### 错误原因分析 **`TypeError: Cannot read properties of undefined (reading 'props')`** 是前端框架（如 React、Vue 等）中常见的错误，核心原因是：**试图访问一个未定义（`undefined`）对象的 `props` 属性**。常见场景包括： 1. **组件未正确初始化** - 在组件挂载（`mount`）前访问 `props`（如 `constructor` 中直接使用未初始化的 `props`）。 - 示例代码问题： ```javascript class MyComponent extends React.Component { constructor(props) { super(); // 错误：未调用 super(props)，导致 this.props 未定义 console.log(this.props.value); // 报错 } } ``` 2. **异步数据未处理加载状态** - 数据未返回时 `props` 为空，直接访问嵌套属性（如 `props.data.id`）。 3. **条件渲染未校验对象存在性** - 未检查 `props` 是否传递成功，直接访问深层属性。 --- ### 逐步解决方案 #### 1. 检查组件初始化逻辑（React 示例） **错误代码**： ```javascript class MyComponent extends React.Component { constructor(props) { super(); // 未传递 props 给 super() console.log(this.props.value); // this.props 为 undefined } } ``` **修复方案**： 确保在构造函数中调用 `super(props)`，使 `this.props` 正确初始化： ```javascript class MyComponent extends React.Component { constructor(props) { super(props); // 正确传递 props console.log(this.props.value); // 正常访问 } } ``` --- #### 2. 处理异步数据未加载状态 **错误代码**： ```javascript function UserProfile({ userData }) { return <div>{userData.details.name}</div>; // 若 userData 未加载，报错 } ``` **修复方案**： 使用条件渲染或默认值： ```javascript // 方法1：条件渲染 function UserProfile({ userData }) { if (!userData) return <div>Loading...</div>; return <div>{userData.details.name}</div>; } // 方法2：可选链操作符（Optional Chaining） function UserProfile({ userData }) { return <div>{userData?.details?.name ?? "Unknown"}</div>; } ``` --- #### 3. 验证父组件是否正确传递 Props **子组件代码**： ```javascript function Child({ config }) { return <div>{config.title}</div>; // 若父组件未传递 config，报错 } ``` **父组件修复**： 确保传递必需的 `props`，或子组件设置默认值： ```javascript // 父组件传递 props function Parent() { return <Child config={{ title: "Hello" }} />; } // 子组件设置默认值 Child.defaultProps = { config: { title: "Default Title" } }; ``` --- #### 4. 使用 TypeScript 或 PropTypes 校验 通过类型检查提前发现问题： ```javascript // PropTypes 校验（React） import PropTypes from 'prop-types'; function MyComponent({ data }) { return <div>{data.id}</div>; } MyComponent.propTypes = { data: PropTypes.shape({ id: PropTypes.number.isRequired }).isRequired }; ``` --- ### 调试技巧 1. **打印日志**：在组件内输出 `console.log(props)`，确认数据结构。 2. **断点调试**：使用浏览器开发者工具定位报错位置。 3. **React 开发者工具**：检查组件树中 `props` 的实际传递情况。 --- ### 总结 此错误本质是 **访问未定义对象的属性**，解决关键在于： 1. 确保组件初始化正确 2. 校验异步数据状态 3. 使用类型检查工具预防问题 4. 通过可选链（`?.`）或条件渲染避免空值访问
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值