uni-app vue3使用jsx报错
uni-app vue3使用jsx报错
示例代码：
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import vueJsx from '[@vitejs](/user/vitejs)/plugin-vue-jsx'
export default defineConfig({
plugins: [
uni(),
vueJsx({
// options are passed on to @vue/babel-plugin-jsx
})
],
});
操作步骤：
运行上面的示例项目就会报错
预期结果：
正常运行
实际结果：
报错
bug描述：
uniapp+vue3，页面想使用jsx语法，按照官方文档配置https://uniapp.dcloud.net.cn/tutorial/syntax-jsx.html，但是运行的时候直接报错，如下：
X [ERROR] “vite” resolved to an ESM file. ESM file cannot be loaded by require. See https://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only for more details. [plugin externalize-deps]
15:06:07.970 node_modules/esbuild/lib/main.js:1374:27:
15:06:07.970 1374 │ let result = await callback({
15:06:07.970 ╵ ^
15:06:07.970 at file:///D:/HBuilderX.4.45.2025010502/HBuilderX/plugins/uniapp-cli-vite/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:68630:35
15:06:07.970 at requestCallbacks.on-resolve (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:1374:28)
15:06:07.970 at handleRequest (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:732:17)
15:06:07.970 at handleIncomingPacket (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:757:7)
15:06:07.970 at Socket.readFromStdout (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:680:7)
15:06:07.970 at Socket.emit (node:events:517:28)
15:06:07.970 at addChunk (node:internal/streams/readable:368:12)
15:06:07.970 at readableAddChunk (node:internal/streams/readable:341:9)
15:06:07.970 at Readable.push (node:internal/streams/readable:278:10)
15:06:07.970 at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)
15:06:07.971 This error came from the “onResolve” callback registered here:
15:06:07.971 node_modules/esbuild/lib/main.js:1293:20:
15:06:07.971 1293 │ let promise = setup({
15:06:07.971 ╵ ^
15:06:07.971 at setup (file:///D:/HBuilderX.4.45.2025010502/HBuilderX/plugins/uniapp-cli-vite/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:68594:27)
15:06:07.971 at handlePlugins (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:1293:21)
15:06:07.971 at buildOrContextImpl (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:979:5)
15:06:07.971 at Object.buildOrContext (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:788:5)
15:06:07.971 at D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:2215:15
15:06:07.971 at new Promise (<anonymous>)
15:06:07.971 at Object.build (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:2214:25)
15:06:07.971 at build (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:2047:51)
15:06:07.971 at bundleConfigFile (file:///D:/HBuilderX.4.45.2025010502/HBuilderX/plugins/uniapp-cli-vite/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:68553:26)
15:06:07.971 The plugin “externalize-deps” was triggered by this import
15:06:07.971 …/…/…/…/WORK/phpstudy_pro/WWW/zswt/vite.config.js:1:304:
15:06:07.971 1 │ …y_pro/WWW/zswt/vite.config.js";import { defineConfig } from “vite”;
15:06:07.971 ╵ ~~~~
15:06:07.972 X [ERROR] “@vitejs/plugin-vue-jsx” resolved to an ESM file. ESM file cannot be loaded by require. See https://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only for more details. [plugin externalize-deps]
15:06:07.972 node_modules/esbuild/lib/main.js:1374:27:
15:06:07.972 1374 │ let result = await callback({
15:06:07.972 ╵ ^
15:06:07.972 at file:///D:/HBuilderX.4.45.2025010502/HBuilderX/plugins/uniapp-cli-vite/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:68630:35
15:06:07.972 at requestCallbacks.on-resolve (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:1374:28)
15:06:07.972 at handleRequest (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:732:17)
15:06:07.972 at handleIncomingPacket (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:757:7)
15:06:07.972 at Socket.readFromStdout (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:680:7)
15:06:07.972 at Socket.emit (node:events:517:28)
15:06:07.972 at addChunk (node:internal/streams/readable:368:12)
15:06:07.972 at readableAddChunk (node:internal/streams/readable:341:9)
15:06:07.972 at Readable.push (node:internal/streams/readable:278:10)
15:06:07.972 at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)
15:06:07.972 This error came from the “onResolve” callback registered here:
15:06:07.972 node_modules/esbuild/lib/main.js:1293:20:
15:06:07.972 1293 │ let promise = setup({
15:06:07.972 ╵ ^
15:06:07.972 at setup (file:///D:/HBuilderX.4.45.2025010502/HBuilderX/plugins/uniapp-cli-vite/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:68594:27)
15:06:07.972 at handlePlugins (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:1293:21)
15:06:07.972 at buildOrContextImpl (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:979:5)
15:06:07.972 at Object.buildOrContext (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:788:5)
15:06:07.972 at D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:2215:15
15:06:07.972 at new Promise (<anonymous>)
15:06:07.972 at Object.build (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:2214:25)
15:06:07.972 at build (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:2047:51)
15:06:07.972 at bundleConfigFile (file:///D:/HBuilderX.4.45.2025010502/HBuilderX/plugins/uniapp-cli-vite/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:68553:26)
15:06:07.972 The plugin “externalize-deps” was triggered by this import
15:06:07.972 …/…/…/…/WORK/phpstudy_pro/WWW/zswt/vite.config.js:3:19:
15:06:07.972 3 │ import vueJsx from ‘@vitejs/plugin-vue-jsx’
15:06:07.972 ╵ ~~~~
15:06:07.973 failed to load config from D:\WORK\phpstudy_pro\WWW\zswt\vite.config.js
15:06:07.973 error when starting dev server:
15:06:07.973 Error: Build failed with 2 errors:
15:06:07.973 node_modules/esbuild/lib/main.js:1374:27: ERROR: [plugin: externalize-deps] “@vitejs/plugin-vue-jsx” resolved to an ESM file. ESM file cannot be loaded by require. See https://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only for more details.
15:06:07.973 node_modules/esbuild/lib/main.js:1374:27: ERROR: [plugin: externalize-deps] “vite” resolved to an ESM file. ESM file cannot be loaded by require. See https://vitejs.dev/guide/troubleshooting.html#this-package-is-esm-only for more details.
15:06:07.973 at failureErrorWithLog (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:1651:15)
15:06:07.973 at D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:1059:25
15:06:07.973 at runOnEndCallbacks (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:1486:45)
15:06:07.973 at buildResponseToResult (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:1057:7)
15:06:07.973 at D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:1086:16
15:06:07.973 at responseCallbacks.<computed> (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:704:9)
15:06:07.973 at handleIncomingPacket (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:764:9)
15:06:07.973 at Socket.readFromStdout (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:680:7)
15:06:07.973 at Socket.emit (node:events:517:28)
15:06:07.973 at addChunk (node:internal/streams/readable:368:12)
15:06:07.987 已停止运行…
## bug信息
| 信息 | 描述 |
|----------------|----------------------------------------------|
| 产品分类 | uniapp/H5 |
| PC开发环境操作系统 | Windows |
| PC开发环境操作系统版本号 | Windows 10 家庭中文版, 版本号 22H2, 安装日期 2021/5/31, OS 内部版本 19045.6216, 序列号 YLX12VYK |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 4.76 |
| 浏览器平台 | Chrome |
| 浏览器版本 | 最新 |
| 项目创建方式 | HBuilderX |
更多关于uni-app vue3使用jsx报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html
我建项目的时候,也出现了这问题. DCloud_UNI_JBB 让我把插件版本降到3.1.0 npm install @vitejs/plugin-vue-jsx@3.1.0 --save-dev 如果是 vue 文件的组件,记得标签加上lang=“jsx”
<script lang="jsx"> export default { render(h) { return123
} } </script>下面是DCloud_UNI_JBB提供的 jsx 文件示例:
// HelloWorld.jsx
import { defineComponent, ref } from ‘vue’;
export default defineComponent({
name: ‘HelloWorld’,
setup() {
const count = ref(0);
const increment = () => {
count.value++;
};
return () => (
Hello JSX!
计数: {count.value}
<button onClick={increment}>点击+1</button>更多关于uni-app vue3使用jsx报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html
回复 DCloud_UNI_JBB: <template>
</template> <script setup> import { onMounted } from 'vue'; import { Graph } from '[@antv](/user/antv)/g6'; import { ExtensionCategory, register } from '[@antv](/user/antv)/g6'; import { VueNode } from 'g6-extension-vue'; register(ExtensionCategory.NODE, 'vue-node', VueNode); import { defineComponent, h } from 'vue';
[vue/compiler-sfc] This experimentalsyntax requires enabling one of the followingparser plugin(s):“jsx”,“flow”,“typescript”.(7:9)
这个错误是由于ESM模块兼容性问题导致的。问题出现在HBuilderX内置的uni-app cli环境中，该环境使用CommonJS模块系统，但vite和@vitejs/plugin-vue-jsx包是ESM格式的。
解决方案：
- 修改package.json，添加type字段：
{
"type": "module"
}
- 或者修改vite.config.js，使用动态导入：
import { defineConfig } from "vite";
import uni from "[@dcloudio](/user/dcloudio)/vite-plugin-uni";
export default defineConfig(async () => {
const vueJsx = await import('[@vitejs](/user/vitejs)/plugin-vue-jsx');
return {
plugins: [
uni(),
vueJsx.default()
],
};
});