uni-app 引入第三方组件后报错 "openBlock" is not exported by "node_modules/@dcloudio/uni-mp-vue"
uni-app 引入第三方组件后报错 “openBlock” is not exported by “node_modules/@dcloudio/uni-mp-vue”
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | 22621.2715 | CLI |
示例代码：
"dependencies": {
"vue-vital-sign-camera": "https://sdk.panoptic.ai/npm/vue-vital-sign-camera-1.0.8.tgz"
}import { VitalSignCamera } from "vue-vital-sign-camera";
components: {
VitalSignCamera,
}操作步骤：
- 安装依赖
"vue-vital-sign-camera": "https://sdk.panoptic.ai/npm/vue-vital-sign-camera-1.0.8.tgz" - Vue中引入并注册组件
vue-vital-sign-cameraimport { VitalSignCamera } from "vue-vital-sign-camera"; components: { VitalSignCamera, }
预期结果：
正常引入并使用组件
实际结果：
引入后报错：
"openBlock" is not exported by "node_modules/[@dcloudio](/user/dcloudio)/uni-mp-vue/dist/vue.runtime.esm.js", imported by "node_modules/vue-vital-sign-camera/dist/vital-sign-camera.js".
at ../node_modules/vue-vital-sign-camera/dist/vital-sign-camera.js:4:50
2: var At = (t, e, i) => e in t ? Ot(t, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[e] = i;
3: var M = (t, e, i) => (At(t, typeof e != "symbol" ? e + "" : e, i), i);
4: import { defineComponent as Ft, useCssVars as jt, openBlock as Ut, createElementBlock as Ht } from "vue";
^
5: import zt from "[@mediapipe](/user/mediapipe)/face_mesh";
6: function Nt(t, e) {bug描述：
在Vue组件中引入vue-vital-sign-camera第三方库
import { VitalSignCamera } from "vue-vital-sign-camera";
components: {
VitalSignCamera,
}引入后报错：
"openBlock" is not exported by "node_modules/[@dcloudio](/user/dcloudio)/uni-mp-vue/dist/vue.runtime.esm.js", imported by "node_modules/vue-vital-sign-camera/dist/vital-sign-camera.js".
at ../node_modules/vue-vital-sign-camera/dist/vital-sign-camera.js:4:50
2: var At = (t, e, i) => e in t ? Ot(t, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[e] = i;
3: var M = (t, e, i) => (At(t, typeof e != "symbol" ? e + "" : e, i), i);
4: import { defineComponent as Ft, useCssVars as jt, openBlock as Ut, createElementBlock as Ht } from "vue";
^
5: import zt from "[@mediapipe](/user/mediapipe)/face_mesh";
6: function Nt(t, e) {
2 回复
在 uni-app 项目中引入第三方组件后，如果遇到报错 "openBlock" is not exported by "node_modules/@dcloudio/uni-mp-vue"，这通常是由于 Vue 3 的某些特性在 uni-app 的编译环境中不被支持或不兼容所导致的。
解决方法
-
检查 Vue 版本兼容性：
- 确保你使用的第三方组件与
uni-app的 Vue 版本兼容。uni-app默认使用的是 Vue 2，但如果你使用的是 Vue 3 的组件，可能会导致不兼容问题。 - 如果你使用的是 Vue 3 的组件，尝试找到 Vue 2 版本的组件，或者使用兼容 Vue 2 的替代方案。
- 确保你使用的第三方组件与
-
检查 uni-app 版本：
- 确保你使用的是最新版本的
uni-app，因为新版本可能已经修复了类似的问题。 - 你可以通过以下命令更新
uni-app：npm update @dcloudio/uni-app
- 确保你使用的是最新版本的
-
修改第三方组件的引入方式：
- 如果第三方组件使用了 Vue 3 的特性，你可以尝试手动修改组件的源码，或者找到兼容 Vue 2 的版本。
- 你也可以尝试使用
uni-app提供的插件或工具来适配 Vue 3 的组件。
-
使用
vite-plugin-uni：- 如果你使用的是
vite作为构建工具，可以尝试使用vite-plugin-uni插件来解决兼容性问题。 - 安装
vite-plugin-uni：npm install vite-plugin-uni --save-dev - 在
vite.config.js中配置插件：import { defineConfig } from 'vite'; import uni from 'vite-plugin-uni'; export default defineConfig({ plugins: [uni()], });
- 如果你使用的是
-
手动导出
openBlock：- 如果问题依然存在，你可以尝试手动导出
openBlock。在你的项目中创建一个新的文件openBlock.js：export const openBlock = () => {}; - 然后在你的代码中引入这个文件：
import { openBlock } from './openBlock.js';
- 如果问题依然存在，你可以尝试手动导出
