代码编织梦想

目录

一、项目场景:

二、报错原因

三、原因分析:

四、解决方案:


一、项目场景:

项目场景:当我npm run serve运行项目时正常显示,但npm run build构建项目后打开dist目录下的index.html运行时显示报错。


二、报错原因

报错原因:错误解释 "Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'wrapper')" 表明在 JavaScript 代码中尝试访问一个未定义对象的 wrapper属性。

<template>
    <div :ref="refName">
        <div class="box">小炑吖</div>
    </div>
</template>  
<script>
import { ref, onMounted, getCurrentInstance } from 'vue';
export default {
    name: 'FlyBox',
    setup() {
        const width = ref(0)
        const height = ref(0)
        const refName = 'wrapper'

        const init = () => {
            const instance = getCurrentInstance()
            // 此处dom未访问到一个未定义对象的 wrapper 属性。
            const dom = instance.ctx.$refs[refName]
            width.value = dom.clientWidth
            height.value = dom.clientHeight
        }

        onMounted(() => {
            init()
        })

        return {
            width, height, refName
        }
    }
}
</script>
<style lang="scss" scoped>
.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    .box {
        width: 100px;
        height: 100px;
        padding: 2px;
        box-sizing: border-box;
        background: aqua;
    }
}
</style>

三、原因分析:

错误信息 "Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'wrapper')" 表明在 JavaScript 代码中尝试访问一个未定义对象的 wrapper属性。在 Vue 3 中,如果你遇到这个错误,很可能是因为你在访问响应式引用之前,该引用还没有被正确初始化或者该引用根本就不存在。

这个问题可能有几个原因:

  1. 引用未定义refName变量可能包含了一个不存在的引用名,或者该引用尚未在Vue组件的模板中定义。

  2. 组件未挂载:如果你正在一个Vue组件的生命周期钩子中访问$refs,比如在created钩子中,此时DOM可能还没有挂载,因此$refs对象将是空的。通常,你应该在mounted钩子中访问$refs,因为此时DOM已经挂载完毕。

  3. 异步问题:如果你在某个异步操作(比如Promise或setTimeout)的回调中访问$refs,可能由于组件已经被销毁或状态已经改变,导致$refs不再有效。

为了解决这个问题,你可以尝试以下步骤:

  1. 检查对象初始化
    确保在尝试访问 container 属性之前,相关的对象已经被正确初始化。如果这是一个 DOM 元素,确保在 DOM 完全加载之后访问它。如果是在 Vue 或其他框架中,确保在组件的 mounted 钩子或相应的生命周期方法中进行访问。

  2. 检查依赖加载
    如果 container 是某个库或框架的一部分,确保这个库或框架已经被正确加载和初始化。检查是否有任何异步加载的脚本或模块,并确保它们在尝试访问 container 之前已经准备就绪。

  3. 检查模块导入
    如果您是从某个模块导入 container,确保导入语句是正确的,并且该模块确实导出了 container

  4. 查看文档或示例
    如果 datav.umd.js 是第三方库,查看该库的文档或示例代码,看是否有关于如何正确初始化或使用该库的指导。

  5. 调试
    使用 console.log 语句来打印出相关对象,在访问 container 之前检查它是否已定义。

例如:

if (instance.ctx.$refs && instance.ctx.$refs[refName]) {  
  // 安全地访问 instance.ctx.$refs[refName].wrapper
  const dom = instance.ctx.$refs[refName];  
} else {  
  // 处理$refs不存在的情况  
  console.error('无法找到指定的引用:', refName);  
}

四、解决方案:

解析:通过打印调试发现无法找到指定的引用。可能是vue3打包后的bug,在 Vue3 实例或组件的 setup 函数中,你可以通过 $refs 对象访问这些元素或组件的引用。但是,直接在 setup 函数中访问 $refs 是不被推荐的,因为 refs 并不是响应式的,并且在 setup 函数中它们可能还未被定义。

替换方案:

  1. 使用 ref 函数:你可以在模板中使用 ref 属性,然后在 setup 函数中使用 ref 函数来创建一个响应式的引用。一旦模板被挂载,这个引用就会指向对应的 DOM 元素或组件实例。然而,即使这样,你也应该避免在 setup 中直接操作这些引用,而是应该在响应式数据变化时通过计算属性或方法来间接更新它们。

<template>
    <div ref="wrapper">
        <div class="box">小炑吖</div>
    </div>
</template>  
<script>
import { ref, onMounted } from 'vue';

export default {
    name: 'FlyBox',
    setup() {
        const wrapper = ref(null)
        const width = ref(0)
        const height = ref(0)
        onMounted(() => {
            if (wrapper.value) {
                console.log(wrapper.value)
                const dom = wrapper.value // 访问 DOM 元素 
                width.value = dom.clientWidth
                height.value = dom.clientHeight 
            }
        });

        return {
            wrapper,width,height
        };
    },
};  
</script>

2.这样做可以解决报错信息中的 "Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'wrapper')" 错误。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_63152500/article/details/137638279

前端控制台报错#Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘0‘)-爱代码爱编程

目录 前言一、报错截图?二、解决步骤总结 前言 项目中遇到问题:前端控制台报错#Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘0‘) 提示:以下是本篇文章正文内容,下面案例可供参考 一、报错截图? 这里是我在项目中产生报错

cannot read properties of undefined (reading ‘tappromise‘)_飞鱼爱吃米的博客-爱代码爱编程

Cannot read properties of undefined (reading ‘tapPromise’) 在我们vue3项目打包的时候,经常会出现这样的报错情况 这是为什么呢? 其实在我们拉取项目后,首先要做的就是安装依赖。 我们一般采用npm install就能安装所有的依赖了,缺点就是依赖的版本是默认的。 出现上面问题的原因就是默认的co