uni-app 飞书小程序无法引用第三方npm包

uni-app 飞书小程序无法引用第三方npm包

示例代码：

例如一下代码，在任意vue文件加入以下代码就会编译失败

import {JsonViewer} from "vue3-json-viewer"

操作步骤：

例如一下代码，在任意vue文件加入以下代码就会编译失败

import {JsonViewer} from "vue3-json-viewer"

预期结果：

正常编译，并且第三方npm包正常运行


## 实际结果：


16:01:56.548 2. 运行模式下不压缩代码且含有sourcemap，体积较大；若要正式发布，请点击发行菜单进行发布
16:40:06.744 开始差量编译...
16:40:08.443 "openBlock" is not exported by "node_modules/@dcloudio/uni-mp-vue/dist/vue.runtime.esm.js", imported by "../../../../../../Users/xxxx/Documents/HBuilderProjects/test_xiaochengxu/node_modules/vue3-json-viewer/dist/bundle.esm.js".
16:40:08.457 at node_modules/vue3-json-viewer/dist/bundle.esm.js:1:30
16:40:08.469   1: import { h, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createTe...
16:40:08.484                                    ^
16:40:08.485   2:
16:40:08.494   3: function _typeof(obj) {

bug描述：

在uniapp安装了第三方npm包，在h5页面可以正常显示，但是在飞书小程序直接编译失败，注释掉引用的命令就可以编译通过


更多关于uni-app 飞书小程序无法引用第三方npm包的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

这是什么包？检查一下有没有涉及到操作dom或者调用了window/document对象，如有上述情况，不能引入

更多关于uni-app 飞书小程序无法引用第三方npm包的实战教程也可以访问 https://www.itying.com/category-93-b0.html


如果该npm包使用了小程序不支持的语法，编译报错不是正常的吗？应该了解该npm包是否支持小程序环境

在 uni-app 开发飞书小程序时，可能会遇到无法直接引用第三方 npm 包的问题。这是因为飞书小程序的运行环境与常规的 Web 环境不同，导致一些 npm 包无法直接在小程序环境中运行。以下是一些可能的解决方案：

1. 使用支持小程序的 npm 包

有些 npm 包是专门为小程序环境设计的，或者提供了小程序版本的实现。你可以尝试寻找这些支持小程序的 npm 包，或者查看官方文档是否提供了小程序的支持。

2. 使用 @tarojs/plugin-inject 插件

如果你使用的是 Taro 框架，可以尝试使用 @tarojs/plugin-inject 插件来注入一些全局变量，以解决某些 npm 包在小程序环境中无法运行的问题。

3. 手动适配 npm 包

如果某个 npm 包无法直接在小程序环境中运行，你可以尝试手动适配该包。具体方法包括：

  • 修改包的源码，使其兼容小程序环境。
  • 使用 polyfill 来模拟缺失的浏览器 API。

4. 使用 uni_modules

uni-app 提供了 uni_modules 机制，允许你将第三方库打包为 uni_modules 模块，并在项目中引用。你可以尝试将 npm 包打包为 uni_modules 模块，然后在小程序中使用。

5. 使用 webpack 配置

如果你熟悉 webpack，可以通过自定义 webpack 配置来解决一些兼容性问题。例如，使用 alias 来替换某些模块，或者使用 DefinePlugin 来定义全局变量。

6. 使用 uni-app 插件市场

uni-app 插件市场提供了许多已经适配了小程序的插件和组件，你可以尝试在这些插件中找到替代方案。

7. 使用 uni-app 提供的 API

有时，uni-app 提供了与某些 npm 包功能相似的 API，你可以直接使用这些 API 来替代 npm 包的功能。

8. 使用 uni-app 的 条件编译

如果你需要在小程序中实现某些功能，可以使用 uni-app 的条件编译功能，针对不同平台编写不同的代码。

示例：手动适配 npm 包

假设你有一个 npm 包 example-package，它依赖于 window 对象，但在小程序环境中 window 对象不存在。你可以手动适配该包：

// 在项目的某个文件中，手动定义 window 对象
if (typeof window === 'undefined') {
  global.window = {};
}

// 然后引入你的 npm 包
import examplePackage from 'example-package';
回到顶部