HBuilderX更新到最新后 uni-app vue3.5.14 @vue/runtime-core也是3.5.14 动态计算高是报运行时和shared错误

HBuilderX更新到最新后 uni-app vue3.5.14 @vue/runtime-core也是3.5.14 动态计算高是报运行时和shared错误

开发环境 版本号 项目创建方式
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 windows11
第三方开发者工具版本号 最新稳定
基础库版本号 最新稳定
CLI版本号 最新 CLI

示例代码:

<template>  
<view class="view-style"  
style="{width: `${props.viewWidth}rpx`,
        height: `${props.viewHeight}rpx`,
        backgroundColor: props.viewBgColor}">
    <uni-icons class="icon-style"  
fontFamily="props.iconFamily"
color="props.iconColor"
size={`${props.iconSize}rpx`}>
        {{ props.iconCode }}
    </uni-icons>
    <!--suppress TypeScriptValidateTypes -->
    <input class="input-style"  
placeholder="props.iPlaceholder"
type="props.iType"
password="props.isPwd"
confirm-type="props.iConfirmType"
style="{'background-color': props.iNBgColor, width: GetInputWidth}">
</input>  
</view>
</template>  

<script setup lang="ts">  
import {ColorVariables} from "@/common/colors/Colors.ts";  
import {computed} from "[@vue](/user/vue)/runtime-core";  

interface Props {  
    viewWidth?: number;  
    viewHeight?: number;  
    viewBgColor?: string;  
    iconCode?: string;  
    iconColor?: string;  
    iconSize?: number;  
    iconFamily?: string;  
    iPlaceholder?: string;  
    iFontFamily?: string;  
    iType?: string;  
    isPwd?: boolean;  
    iConfirmType?: string;  
    iNBgColor?: string;  
}  

let props = withDefaults(defineProps<Props>(), {  
    viewWidth: 500,  
    viewHeight: 60,  
    viewBgColor: ColorVariables.bgC3,  
    iconCode: "",  
    iconColor: ColorVariables.tC1,  
    iconSize: 30,  
    iconFamily: "iconFont",  
    iPlaceholder: "",  
    iFontFamily: "customFont",  
    iType: "text",  
    isPwd: false,  
    iConfirmType: "text",  
    iNBgColor: ColorVariables.bgC5,  
});  

let GetInputWidth = computed<string>(() =>  
{  
    return props.viewWidth - (10 + props.iconSize + 8) - 20 + 'rpx';  
});  
</script>  

<style scoped lang="less">
@import "@/Style.less";  

.view-style  
{  
    display: flex;  
    border: 2rpx solid @bL1;  
    border-radius: 10rpx;  
    align-items: center;  
}  

/* #ifndef MP-WEIXIN */  
.icon-style  
{  
    margin-left: 10rpx;  
}  
/* #endif */  
/* 微信小程序专用样式 */  
/* #ifdef MP-WEIXIN */  
.icon-style  
{  
    margin-left: 10rpx;  
    margin-bottom: 5rpx;  
}  
/* #endif */  

.input-style  
{  
    margin-left: 8rpx;  
    margin-top: 5rpx;  
}  
</style>

### 操作步骤:

vue使用3.5.14,[@vue](/user/vue)/runtime-core也是3.5.14,微信小程序,动态计算input的宽度时报该错误。在“:style="{'background-color': props.iNBgColor, width: GetInputWidth}” 这行代码中使用GetInputWidth动态计算宽度时,编译报错

预期结果:

正常计算出高度


### 实际结果:

编译时报该错误

bug描述:

node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js (8:293): “getEscapedCssVarName” is not exported by “node_modules/@vue/shared/dist/shared.esm-bundler.js”, imported by “node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js”. file: E:/HBuilderXWorkspace/xinyi-app/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:8:293


更多关于HBuilderX更新到最新后 uni-app vue3.5.14 @vue/runtime-core也是3.5.14 动态计算高是报运行时和shared错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html

14 回复

vue的版本使用 3.4.21呢?和uniapp内部的vue版本保持一致,看下还有没有问题

更多关于HBuilderX更新到最新后 uni-app vue3.5.14 @vue/runtime-core也是3.5.14 动态计算高是报运行时和shared错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html


有问题

回复 z***@foxmail.com: 发个可复现demo

回复 DCloud_UNI_JBB: 我重新建一个项目 按照你说调成3.4.21 小程序是可以了 但是运行到安卓模拟器又不可以了,进去直接白屏也不报错。我模拟器用的mumu4.1.25

我把项目压缩上传到附件上面了

demo

发不到你发的附件

回复 DCloud_UNI_JBB: 不知道是不是我的写法错误,我把那个计算款度的函数去掉 computed 貌似也可以,我就这样修改了

回复 DCloud_UNI_JBB: 不知道为啥 我附件上传不上去

回复 z***@foxmail.com: 附件可以通过im发给我

回复 DCloud_UNI_JBB:怎么发?你给我一个你的地址 我没有找到地址

回复 z***@foxmail.com: https://im.dcloud.net.cn/index.html#/ 这里

搜索我的名字

这是一个典型的Vue版本依赖冲突问题。根据错误信息分析,问题出在@vue/runtime-core和@vue/shared版本不匹配上。

错误原因:

  1. 您项目中使用的@vue/runtime-core是3.5.14版本
  2. @vue/shared可能不是对应的3.5.14版本
  3. runtime-core尝试从shared导入getEscapedCssVarName方法但失败

解决方案:

  1. 删除node_modules和package-lock.json/yarn.lock
  2. 确保package.json中所有Vue相关依赖版本一致:
    "vue": "3.5.14",
    "[@vue](/user/vue)/compiler-sfc": "3.5.14",
    "[@vue](/user/vue)/runtime-core": "3.5.14",
    "[@vue](/user/vue)/shared": "3.5.14"
    
  3. 重新安装依赖:npm install

代码修正建议:

  1. 修改计算属性返回类型:
const GetInputWidth = computed(() => `${props.viewWidth - (10 + props.iconSize + 8) - 20}rpx`)
  1. 修改样式绑定语法:
:style="{backgroundColor: props.iNBgColor, width: GetInputWidth}"
回到顶部