uni-app vue3的renderjs中使用import引入报错

uni-app vue3的renderjs中使用import引入报错

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

示例代码：

这个插件中有类似的代码 https://ext.dcloud.net.cn/plugin?id=1987


### 操作步骤：

```javascript
<script module="leaflet" lang="renderjs">
import '/libs/leaflet/leaflet.css';
import '@/libs/leaflet/Leaflet.markercluster/MarkerCluster.css';
import '@/libs/leaflet/Leaflet.markercluster/MarkerCluster.Default.css';
import L from '@/libs/leaflet/leaflet'
import '@/libs/leaflet/leaflet.ChineseTmsProviders.js'
import '@/libs/leaflet/leaflet.mapCorrection.js'
import '@/libs/leaflet/terraformer'
import Terraformer from '@/libs/leaflet/terraformer-wkt-parser'
import '@/libs/leaflet/Leaflet.markercluster/leaflet.markercluster.js';


### 预期结果：

正常编译，测试vue2是没有问题的

实际结果：

编译报错You can mark the path “@/libs/leaflet/terraformer-wkt-parser” as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.


### bug描述：

vue3的renderjs中使用import 引入 报错   You can mark the path "@/libs/leaflet/Leaflet.markercluster/MarkerCluster.css" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

更多关于uni-app vue3的renderjs中使用import引入报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

感谢反馈，你提到 renderjs 种引入相关逻辑在 vue2 中没有问题，在 vue3 种报错，有和作者进行反馈沟通吗？我尝试使用简单的 demo 尝试复现，也希望提供完整工程，提供更多信息有助于复现和定位你的问题

更多关于uni-app vue3的renderjs中使用import引入报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我单独创建了个空项目确实可以引入，稍后我在测测是什么原因。

回复 2***@qq.com: 我和同事沟通了下，的确在 vue3 + renderjs 中没有完全对齐 vue2 的功能，主要涉及 @ 符号需要调整为相对路径，css 内 url 需要适配调整

回复 DCloud_UNI_OttoJi: 好的感谢回复

回复 DCloud_UNI_OttoJi: 你好，这种问题应该怎么解决

我也遇到这个 问题 请问作者有解决吗

我改成vue2了

在 uni-app 中使用 renderjs 时，renderjs 是一个运行在原生环境的 JavaScript 模块，它不支持直接使用 import 语法来引入其他模块。这是因为 renderjs 运行的环境不同于普通的 JavaScript 运行环境，它无法直接访问 npm 包或使用 ES Module 语法。

如果你需要在 renderjs 中使用外部库或模块，有以下几种解决方案：

1. 使用全局变量

你可以将需要使用的库或模块通过全局变量的方式引入到 renderjs 中。例如：

// 在 main.js 或其他入口文件中
import someLibrary from 'some-library';
window.someLibrary = someLibrary;

然后在 renderjs 中通过 window.someLibrary 来访问这个库。

2. 使用 require 语法

renderjs 支持 CommonJS 的 require 语法。你可以将需要使用的库打包成 CommonJS 模块，然后通过 require 引入。

// 在 renderjs 中
const someLibrary = require('some-library');

3. 直接在 renderjs 中编写代码

如果需要的功能比较简单，可以直接在 renderjs 中编写代码，而不依赖外部库。

4. 使用 uni-app 提供的 API

uni-app 提供了一些原生 API，可以直接在 renderjs 中使用。如果可能的话，尽量使用这些 API 来实现功能。

示例代码

假设你需要在 renderjs 中使用 lodash，你可以按照以下步骤操作：

  1. 在 main.js 中引入 lodash 并挂载到 window 上：
import _ from 'lodash';
window._ = _;
  1. 在 renderjs 中使用 lodash：
export default {
    mounted() {
        const result = _.chunk(['a', 'b', 'c', 'd'], 2);
        console.log(result); // => [['a', 'b'], ['c', 'd']]
    }
}
回到顶部