注册 登录
uv_UI
uv_UI
  • 发布：2025-09-16 15:13
  • 更新：2025-11-04 14:42
  • 阅读：334

【报Bug】uniapp+vue3使用jsx报错

分类：uni-app

产品分类： uniapp/H5

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： 版本 Windows 10 家庭中文版 版本号 22H2 安装日期 ‎2021/‎5/‎31 OS 内部版本 19045.6216 序列号 YLX12VYK

HBuilderX类型： 正式

HBuilderX版本号： 4.76

浏览器平台： Chrome

浏览器版本： 最新

项目创建方式： HBuilderX

示例代码：

import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import vueJsx from '@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.971 at Socket.readFromStdout (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:680:7)
15:06:07.971 at Socket.emit (node:events:517:28)
15:06:07.971 at addChunk (node:internal/streams/readable:368:12)
15:06:07.971 at readableAddChunk (node:internal/streams/readable:341:9)
15:06:07.971 at Readable.push (node:internal/streams/readable:278:10)
15:06:07.971 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.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:1:304:
15:06:07.972 1 │ ...y_pro/WWW/zswt/vite.config.js";import { defineConfig } from "vite";
15:06:07.972 ╵ ~~
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.973 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.973 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.973 at handleRequest (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:732:17)
15:06:07.973 at handleIncomingPacket (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:757:7)
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.973 at readableAddChunk (node:internal/streams/readable:341:9)
15:06:07.973 at Readable.push (node:internal/streams/readable:278:10)
15:06:07.973 at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)
15:06:07.973 This error came from the "onResolve" callback registered here:
15:06:07.973 node_modules/esbuild/lib/main.js:1293:20:
15:06:07.973 1293 │ let promise = setup({
15:06:07.974 ╵ ^
15:06:07.974 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.974 at handlePlugins (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:1293:21)
15:06:07.974 at buildOrContextImpl (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:979:5)
15:06:07.974 at Object.buildOrContext (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:788:5)
15:06:07.974 at D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:2215:15
15:06:07.974 at new Promise (<anonymous>)
15:06:07.974 at Object.build (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:2214:25)
15:06:07.974 at build (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:2047:51)
15:06:07.974 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.974 The plugin "externalize-deps" was triggered by this import
15:06:07.974 ../../../../WORK/phpstudy_pro/WWW/zswt/vite.config.js:3:19:
15:06:07.974 3 │ import vueJsx from '@vitejs/plugin-vue-jsx'
15:06:07.975 ╵ ~~~~~~~~
15:06:07.975 failed to load config from D:\WORK\phpstudy_pro\WWW\zswt\vite.config.js
15:06:07.975 error when starting dev server:
15:06:07.975 Error: Build failed with 2 errors:
15:06:07.975 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.975 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.975 at failureErrorWithLog (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:1651:15)
15:06:07.975 at D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:1059:25
15:06:07.975 at runOnEndCallbacks (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:1486:45)
15:06:07.975 at buildResponseToResult (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:1057:7)
15:06:07.975 at D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:1086:16
15:06:07.975 at responseCallbacks.<computed> (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:704:9)
15:06:07.975 at handleIncomingPacket (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:764:9)
15:06:07.976 at Socket.readFromStdout (D:\HBuilderX.4.45.2025010502\HBuilderX\plugins\uniapp-cli-vite\node_modules\esbuild\lib\main.js:680:7)
15:06:07.976 at Socket.emit (node:events:517:28)
15:06:07.976 at addChunk (node:internal/streams/readable:368:12)
15:06:07.987 已停止运行...

  • zswt.rar
    • 2025-09-16 15:13 负责人:无 分享

    没有找到相关结果

      已邀请:

      最佳回复

      f***@qq.com

      f***@qq.com - andy

      我建项目的时候,也出现了这问题.
      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) {
      return <p>123</p>
      }
      }
      </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 () => (  
  <div>  
    <h1>Hello JSX!</h1>  
    <p>计数: {count.value}</p>  
    <button onClick={increment}>点击+1</button>  
  </div>  
);

      }
      });

      2025-11-04 13:44 分享
      DCloud_UNI_JBB

      DCloud_UNI_JBB

      你把 vite.config.js 这个文件删除试试，默认内置了 jsx 的插件

      2025-09-16 15:21 分享

      • uv_UI (作者)

        不得行呢，是直接在vue中使用吗？我试了模板报错了

        2025-09-16 15:43

      • DCloud_UNI_JBB

        回复 uv_UI: 你咋写的

        2025-09-16 15:49

      • uv_UI (作者)

        回复 DCloud_UNI_JBB: <template>

        <div id="container"></div>

        </template>

        <script setup>

        import { onMounted } from 'vue';

        import { Graph } from '@antv/g6';

        import { ExtensionCategory, register } from '@antv/g6';

        import { VueNode } from 'g6-extension-vue';

        register(ExtensionCategory.NODE, 'vue-node', VueNode);

        import { defineComponent, h } from 'vue'; 


        const MyVueNode = defineComponent({  
        
  setup(props, { attrs, slots, expose }) {  
        
    return () => {  
        
      return h('div', 'vue node');  
        
    };  
        
  },  
        
});  
        
onMounted(() => {  
        
    const graph = new Graph({  
        
      node: {  
        
        type: 'vue-node',  
        
        style: {  
        
          component: () => <MyVueNode />,  
        
        },  
        
      },  
        
    });  
        

        
    graph.render();  
        
});

        </script>

        2025-09-16 15:52

      • uv_UI (作者)

        [vue/compiler-sfc] This experimentalsyntax requires enabling one of the followingparser plugin(s):"jsx","flow","typescript".(7:9)


        报错这个，意思是没有jsx相关插件

        2025-09-16 15:55

      • DCloud_UNI_JBB

        回复 uv_UI: 你是什么版本的vue

        2025-09-16 15:57

      • uv_UI (作者)

        回复 DCloud_UNI_JBB: vue3

        2025-09-16 15:59

      • DCloud_UNI_JBB

        回复 uv_UI: 发个demo，我试试

        2025-09-16 16:01

      评论 取消
      t***@163.com

      t***@163.com

      解决了吗？

      2025-09-22 10:29 分享
      YAFENG

      YAFENG

      解决了么？

      2025-10-27 09:19 分享
      评论 取消
      为什么被折叠? 0 个回复被折叠

      要回复问题请先登录或注册

      退出全屏模式 全屏模式 回复
      友情链接
      优势智云 黑马程序员 程序员客栈 个推 锐亚教育 即速应用 DCloud新闻 InfoQ 蓝莺IM HeapDump性能社区 diygw可视化 艾普阳科技 申请友链

      DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位

      京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001

      | | 违法违规信息举报