Error in created hook: “TypeError: Cannot read properties of undefined (reading ‘xxx‘)“

原创 于 2025-06-13 09:51:43 发布 · 358 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #java #javascript

报错信息: Error in created hook: "TypeError: Cannot read properties of undefined (reading 'resetData')"

错误原因分析：
在 created 生命周期钩子中调用resetData()，但此时resetData()还没有被定义（为 undefined）
因为：
created 钩子执行时，DOM 还未渲染完成
resetData() 是一个对组件的引用，只能在 mounted 或之后的生命周期中访问
所以当程序在 created 中调用 .resetData() 就会报错

正确做法：将调用移至 mounted 生命周期中即可:

mounted() {
  this.$refs.xxxVue.resetData();
},
created() {
  // 不要在这里调用 resetData()
}

我是在系统跨组件调用时，在子组件内报错，这种情况一般是在父组件请求接口去取值再传给子组件时，接口未返回值，而子组件已经渲染造成的。

vue引入echarts报错Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ‘init‘
qq_33298964的博客
01-12 1156
在一个已有VUE项目中引入echarts报错，可能引起错误的原因是echarts引入方式错误。
解决Error in created hook: “TypeError: Cannot read properties of undefined (reading ‘gutter‘)“的问题！
刘小杨的博客
09-07 1万+
当我写到在使用uni-app的时候，出现了一个问题，当你使用 :offsetde 使用 uni-row= row 和 uni-col = col-md-offset 是否一样呢？ 使用语法： 这个上面的错误就是，没有前缀，没有uni-row，就是这样的，所以，加上你的前缀就行了。 ...
Error in created hook: “TypeError: Cannot read properties of undefined (reading ‘style‘)“
本郡主是喵
06-29 7695
钩子函数中的操作不依赖于组件的 DOM 元素。如果需要等待组件的 DOM 元素完全加载或渲染，请考虑使用。钩子函数中访问的数据属性或计算属性是否被正确定义和初始化。确保被引用的属性存在，并且已经被正确赋值。如果你能提供更多的代码或具体的错误上下文，我将能够给出更准确的建议来帮助你解决这个问题。钩子函数中发生，它表示在该钩子函数中尝试读取一个未定义的对象的。这个错误通常在 Vue 组件的。钩子函数来执行相关操作。
02、Error in created hook: “TypeError: Cannot read properties of undefined (reading ‘map‘)“
weixin_43889087的博客
03-28 545
使用 echarts 4.7版本 + v-charts ，bmap做底图，地图看似正常显示，控制台报错。此处的，this._watchers 打印出来是 undefined。解决方法： main.js中 添加属性 并赋值。根据报错信息找到源码，报错位置。
Error in created hook: “TypeError: Cannot read properties of undefined (reading ‘appendChild‘)“
chen_XiaoFang的博客
05-27 9068
调用this.$QRCode时报：Error in created hook: "TypeError: Cannot read properties of undefined (reading 'appendChild')" 问题代码： creatQrCode() { var that = this var qrcode = new that.$QRCode(that.$refs.qrCodeUrl, { text: '5201314', // 需要
Error in created hook: “TypeError: Cannot read property ‘xxxxxx‘ of undefined“
weixin_44012027的博客
07-07 3万+
写Vue 的时候常遇到的错误之一 Error in created hook: "TypeError: Cannot read property 'xxxxxx' of undefined" 其大意是： 创建钩子出错：无法读取未定义的 xxx 属性。 此错误一般多出现在 created() 中， Vue 中数据渲染和DOM 元素渲染是异步的，此时可能会出现加载先后的问题。在DOM 元素渲染未完成的情况下，去操作DOM元素就会出现问题。this.$nextTick 可解决此问题。 具体 this.$nex
vue报错Error in created hook: “TypeError: Cannot set properties of undefined (setting params)“
SSHLY3的博客
12-27 693
如果 someObject 是从父组件通过 props 传递过来的，确保父组件正确传递了该对象，并且它不是 undefined 或 null。确保 this 的上下文是正确的。如果你在 created 钩子中使用了箭头函数或其他方式改变了 this 的指向，可能会导致问题。如果你在 created 钩子中进行了异步操作（如 API 请求），请确保在设置 params 时对象已经被正确初始化。为了更好地理解问题所在，可以在 created 钩子中添加一些调试日志，检查 someObject 的值。
Echars 报错: Error in created hook: “Cannot read properties of undefined (reading ‘getAttribute‘)“
weixin_57529171的博客
05-20 8771
Echars 报错：Error in created hook: "TypeError: Cannot read properties of undefined (reading 'getAttribute')"
[Vue warn]: Error in created hook: “TypeError: Cannot read properties of undefined (reading ‘$on‘)“
Youweretrouble的博客
02-23 4967
解决了eventbus的报错问题。
成功解决：Error in created hook: “ReferenceError: params is not defined“
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
11-03 6216
Error in created hook: "ReferenceError: params is not defined"
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in created hook: “TypeError: Object(...) is not a func
qq_30351747的博客
05-04 2万+
从后端拿取数据渲染到表格数据。结果明明写的没错，但是却报错 定位到代码中。 引入后端接口 引入的这个js，要用大括号包起来，不然就被当作方法调用，所以就会报错的呀 原文链接：vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in created hook: "TypeError: Object(…) is not a func 报错 .........
TypeError:Cannot read properties of undefined (reading‘...‘)
热门推荐
qq_57057576的博客
08-13 10万+
若a为undefined，则会报错，若，a为空，则，a.name为undefined。原因可能是，挂载时，有dom节点，但是数据还未返回。例： a.name a的name属性。不能够读取undefined的属性。
前端Vue报错：“TypeError: Cannot read properties of undefined (reading ‘map‘)“
神马都会亿点点的毛毛张
10-23 848
毛毛张分享的一个前端报错内容，这个问题是关于Echarts的。
解决 Error in created hook: "ReferenceError: param is not defined"
sinat_41838539的博客
03-09 3万+
F12 打开控制台，发现此条错误信息： Error in created hook: "ReferenceError: param is not defined" hook 名词有钩子的意思，译为：有错误发生在调用create函数的时候（vue中create生命周期钩子函数）。 参数param没有被定义，然后点击相应的 js代码中，排查错误即可。 ReferenceError 在作用域中...
React踩坑日记React启动后报错TypeError Cannot read properties of undefined (reading ‘forEach‘)
embelfe_segge的博客
03-03 1265
前言今天创建新项目运行后又出现这个问题了，之前也出现过，觉得是很正常的情况，不过我今天发现还有许多朋友不知道这个问题的解决方法，特地来记录一下。 话不多说 上图: 这个情况呢是由于你的浏览器安装了React-DevTools扩展程序的原因，安装这个东西是为了方便我们查看React元素和编译之后的一些代码，很多朋友是直接删除了，但是这不就等于是壮士断腕了嘛。解决方法如下: 1.进入项目中按照路径找到相应的文件 /node_modules/@pmmmwh/react-refresh-webpack-plugi
报错-TypeError: Cannot read properties of undefined (reading ‘url‘)
weixin_42479421的博客
10-31 4370
报错-TypeError: Cannot read properties of undefined (reading 'url')
TypeError: Cannot read properties of undefined (reading ‘state‘)
cjhxydream的博客
08-10 3万+
Cannot read properties of undefined
出现 TypeError: Cannot read properties of undefined (reading ‘then‘) 解决方法
码农研究僧的博客
03-05 4677
出现 TypeError: Cannot read properties of undefined (reading 'then') 解决方法
✖ Webpack Compiled with some errors in 7.86s <i> [webpack-dev-server] Project is running at: <i> [webpack-dev-server] On Your Network (IPv4): http://192.168.2.144:8080/ <i> [webpack-dev-server] Content not from webpack is served from 'E:\hy\mall\mini-program\dist\h5' directory <i> [webpack-dev-server] 404s will fallback to '/index.html' <i> [webpack-dev-middleware] wait until bundle finished: /mobile/ (node:36520) [DEP_WEBPACK_TEMPLATE_PATH_PLUGIN_REPLACE_PATH_VARIABLES_HASH] DeprecationWarning: [hash] is now [fullhash] (also consider using [chunkhash] or [contenthash], see documentation for details) (Use `node --trace-deprecation ...` to show where the warning was created) ✖ Errors: Error: plugin x failed to invoke plugin on 'Some("E:\\hy\\mall\\mini-program\\src\\app.config.ts")' → Watching... [2025/7/2 10:18:42] ℹ Listening at http://192.168.2.144:8080/mobile/ asset js/app.9bafabbd02fcdf695601.js 977 KiB [emitted] [immutable] (name: app) asset js/taro.9bafabbd02fcdf695601.js 179 KiB [emitted] [immutable] (name: taro) (id hint: taro) asset js/runtime.9bafabbd02fcdf695601.js 45.3 KiB [emitted] [immutable] (name: runtime) asset index.html 8.28 KiB [emitted] Entrypoint app 1.17 MiB = js/runtime.9bafabbd02fcdf695601.js 45.3 KiB js/taro.9bafabbd02fcdf695601.js 179 KiB js/app.9bafabbd02fcdf695601.js 977 KiB runtime modules 29.9 KiB 14 modules modules by path ./node_modules/core-js-pure/ 132 KiB 127 modules modules by path ./node_modules/@pmmmwh/react-refresh-webpack-plugin/ 43.9 KiB 22 modules modules by path ./node_modules/@tarojs/webpack5-runner/node_modules/webpack-dev-server/client/ 61.6 KiB 12 modules modules by path ./node_modules/html-entities/dist/ 67.8 KiB modules by path ./node_modules/html-entities/dist/esm/*.js 33.5 KiB 4 modules modules by path ./node_modules/html-entities/dist/commonjs/*.js 34.2 KiB 4 modules modules by path ./node_modules/webpack/hot/*.js 5.81 KiB ./node_modules/webpack/hot/only-dev-server.js 2.58 KiB [built] [code generated] ./node_modules/webpack/hot/log.js 1.73 KiB [built] [code generated] + 2 modules modules by path ./node_modules/react-refresh/ 21.8 KiB ./node_modules/react-refresh/runtime.js 222 bytes [built] [code generated] ./node_modules/react-refresh/cjs/react-refresh-runtime.development.js 21.6 KiB [built] [code generated] + 7 modules ERROR in ./src/app.config.ts plugin x failed to invoke plugin on 'Some("E:\\hy\\mall\\mini-program\\src\\app.config.ts")' ERROR in ./src/app.config.ts Cannot read properties of undefined (reading 'length') TypeError: Cannot read properties of undefined (reading 'length') at WasmHash._updateWithBuffer (E:\hy\mall\mini-program\node_modules\webpack\lib\util\hash\wasm-hash.js:108:23) at WasmHash.update (E:\hy\mall\mini-program\node_modules\webpack\lib\util\hash\wasm-hash.js:51:8) at BatchedHash.update (E:\hy\mall\mini-program\node_modules\webpack\lib\util\hash\BatchedHash.js:53:14) at NormalModule.updateHash (E:\hy\mall\mini-program\node_modules\webpack\lib\NormalModule.js:1655:8) at Compilation._createModuleHash (E:\hy\mall\mini-program\node_modules\webpack\lib\Compilation.js:4302:11) at Compilation.createModuleHashes (E:\hy\mall\mini-program\node_modules\webpack\lib\Compilation.js:4247:25) at E:\hy\mall\mini-program\node_modules\webpack\lib\Compilation.js:3313:11 at Hook.eval [as callAsync] (eval at create (E:\hy\mall\mini-program\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:10:1) at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (E:\hy\mall\mini-program\node_modules\webpack\node_modules\tapable\lib\Hook.js:20:14) at E:\hy\mall\mini-program\node_modules\webpack\lib\Compilation.js:3253:36 at eval (eval at create (E:\hy\mall\mini-program\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:18:1) at E:\hy\mall\mini-program\node_modules\@tarojs\webpack5-runner\node_modules\html-webpack-plugin\lib\cached-child-compiler.js:237:53 at processTicksAndRejections (node:internal/process/task_queues:95:5) webpack 5.99.9 compiled with 2 errors in 7871 ms
最新发布
07-03
<think>我们正在处理一个Webpack编译错误，具体错误信息是： 1. "failed toinvoke plugin"（调用插件失败） 2. "Cannot readproperties ofundefined (reading 'length')"（无法读取未定义的属性'length'）根据引用[4]和[5]，这类错误通常与版本不兼容或配置错误有关。特别是引用[4]提到“Cannot readproperties ofundefined (reading ‘tap‘)”错误是由于版本不兼容或配置错误引起的。而引用[5]则提到通过降级loader版本解决了类似问题。因此，我们的解决思路应该集中在： 1.检查插件和loader的版本兼容性，尤其是与Webpack5.99.9的兼容性。2.检查配置文件中是否存在错误的配置项。 步骤：###1.确认Webpack版本首先，确认你使用的Webpack版本确实是5.99.9。运行以下命令：```bashnpmlist webpack#或者yarnlist webpack``` ###2.检查插件和loader的版本兼容性根据错误信息“failed toinvoke plugin”，可能是某个插件在调用时出错。而“Cannotread propertiesof undefined(reading'length')”则表明在某个地方尝试读取`undefined`的`length`属性。这通常发生在插件或loader内部。查阅你项目中使用的插件和loader的文档，确认它们是否支持Webpack5。Webpack5与Webpack4在插件和loader的API上有一些不兼容的变化。###3.更新或降级插件/loader如果发现某个插件或loader不支持Webpack5，尝试以下方法： -更新该插件/loader到支持Webpack5的版本。-如果更新后问题仍然存在，或者没有支持Webpack5的版本，考虑降级Webpack到4.x版本（但注意，你的项目使用的是5.99.9，降级可能不是首选）。 -如果更新插件/loader不可行，可以尝试降级该插件/loader到已知稳定的版本（如引用[5]中通过降级style-loader解决了问题）。###4.检查配置检查webpack.config.js（或其它配置文件）中是否正确配置了插件和loader。特别注意：-插件是否被正确实例化（例如：`newPluginName()`）。- loader的配置顺序（从右到左，从下到上执行）是否正确。-是否有配置项被错误地设置为`undefined`。 ###5.调试如果以上步骤无法解决问题，可以尝试以下调试方法：-逐个注释插件和loader，确定是哪个插件或loader导致的问题。-查看该插件/loader的GitHub issues，看是否有类似问题及解决方案。 ###6.查看完整错误堆栈错误信息可能只给出了部分信息，查看完整的错误堆栈可以帮助定位问题。运行Webpack时使用`--verbose`参数获取详细日志：```bashwebpack --verbose```###示例解决方案（参考引用[5]） 引用[5]中提到，通过将loader从v17降级到v15解决了问题。因此，如果你发现某个loader可能是问题所在，可以尝试降级。例如，如果问题出在`css-loader`上，你可以降级它： ```bashnpm installcss-loader@15--save-dev#或yarnadd css-loader@15 --dev``` ###总结由于错误信息指向插件调用失败和读取未定义属性的长度，最可能的原因是某个插件或loader与Webpack5不兼容。按照上述步骤，首先定位问题插件/loader，然后更新或降级它。 §§相关问题§§1.如何检查Webpack插件和loader的版本兼容性？ 2. Webpack5有哪些常见的破坏性变更？ 3.如何调试Webpack配置错误？</think>### Webpack编译错误解决方案 针对您遇到的Webpack 5.99.9编译错误： 1. `failed to invoke plugin`（调用插件失败） 2. `Cannot read properties of undefined (reading 'length')` 以下是系统性的解决步骤： --- ### 一、核心原因分析 根据错误信息和引用[4][5]，这类问题通常由以下原因引起： 1. **版本不兼容**（最常见）：插件/loader与Webpack 5不兼容（特别是使用Webpack 4的插件） 2. **配置错误**：插件配置项缺失或格式错误 3. **依赖冲突**：npm/yarn依赖树中存在版本冲突 4. **生命周期钩子问题**：插件在`tap`钩子中访问未定义变量（引用[4]） --- ### 二、解决步骤 #### 第一步：锁定问题插件 1. 在终端运行带堆栈跟踪的命令： ```bash webpack --stats verbose ``` 2. 在错误堆栈中查找第一个出现`at Object.<anonymous>`的位置，确定具体插件名称 #### 第二步：版本兼容性处理（关键步骤） 1. **检查插件兼容性**： ```bash npm view [插件名] versions # 查看插件所有版本 ``` 2. **升级/降级策略**： - 若是**Webpack 5插件** → 升级到最新稳定版 - 若是**Webpack 4插件** → 降级到兼容版本（如引用[5]中通过降级解决） ```bash # 示例：降级css-loader npm install [email protected] --save-dev ``` #### 第三步：配置检查 1. 在`webpack.config.js`中检查问题插件的配置： ```javascript // 错误示例（缺少必要配置项） plugins: [ new SomePlugin() // 缺少配置对象 ] // 正确示例 plugins: [ new SomePlugin({ key: 'value' // 确保必要参数存在 }) ] ``` #### 第四步：清除缓存和重装 ```bash # 1. 清除构建缓存 rm -rf node_modules/.cache # 2. 清除lock文件并重装 rm package-lock.json npm cache clean --force npm install ``` #### 第五步：依赖树检查 ```bash npm ls [插件名] # 检查嵌套依赖版本 ``` 若发现多个版本冲突，使用`npm dedupe`或手动指定版本 --- ### 三、特定情况处理 若错误涉及`tap`钩子（引用[4]）： 1. 检查插件是否使用旧版`tapable` API 2. 在插件初始化时添加空对象保护： ```javascript new SomePlugin({ hooks: {} // 防止undefined访问 }) ``` --- ### 四、验证方案 1. 创建最小化测试配置： ```javascript // test.config.js module.exports = { entry: './dummy.js', plugins: [new ProblemPlugin()] // 单独测试问题插件 } ``` 2. 逐步添加其他配置，定位冲突点 > **经验提示**：Webpack 5对插件API要求更严格，需确保所有插件都使用`compiler.hooks.xxx.tap()`的标准写法（引用[4]） ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值