Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

JSX/TSX Support Broken in Nuxt 4 Module Development #32878

未关闭
  • 哪里不对？
#667 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
4/5
预计耗时
3-5 天
新手友好度
42/100
Issue 类型
缺陷
描述清晰度
基本清楚
活跃度
停滞
技术栈
bun, nuxtjs, typescript
领域
build-system, tooling

调研方向

首先在链接的 nuxt4-module-jsx-repro 中使用 nuxt-module-builder 1.0.0 或更高版本运行 bun run prepack，然后与 0.8.4 进行比较。检查 dist/mkdist.mjs 中报告的 vue-sfc-transformer 路径以及 mkdist/unbuild 构建流程。当 JSX/TSX SFC 在 prepack 期间成功构建（包括 JSX class 属性）时，即表示完成。

由索引模型根据 Issue 内容生成。

描述

Environment
  • Operating System: Darwin
  • Node Version: v24.4.1
  • Nuxt Version: 4.0.3
  • CLI Version: 3.19.1
  • Nitro Version: 2.12.4
  • Package Manager: [email protected]
  • Builder: -
  • User Config: -
  • Runtime Modules: -
  • Build Modules: -
Reproduction

https://github.com/ChronicStone/nuxt4-module-jsx-repro
https://stackblitz.com/github/ChronicStone/nuxt4-module-jsx-repro

Reproducible with nuxt-module-builder v >= 1.0.0, reverting to 0.8.4 fixes the issue

Describe the bug

When developing Nuxt 4 modules, any Vue Single File Component (SFC) that contains JSX/TSX syntax in a <script setup lang="tsx"> block fails to build during the module's prepack process. The vue-sfc-transformer used by nuxt-module-build cannot properly parse JSX syntax, causing esbuild to treat JSX as regular JavaScript and throw syntax errors.

Error Pattern:

[vue-sfc-transformer] Failed to load the script block in /path/to/Component.vue
Transform failed with 1 error:
<stdin>:3:19: ERROR: Expected ";" but found "Render"

Minimal Reproduction:

This very basic component with a dead simple render function triggers the issue described above :

<script setup lang="tsx">
const TestRender = () => {
  return <div>Test Render</div>
}
</script>

<template>
  <div>
    <TestRender />
  </div>
</template>

This component builds successfully in a regular Nuxt 4 application but fails during module build with bun run prepack.

Additional Context

  • Scope: This affects ALL Nuxt 4 modules when using JSX/TSX in Vue SFCs
  • Build Tool: The issue occurs during the prepack process of nuxt-module-build

Error Details

Full Error Stack
[4:58:17 PM]  ERROR  [vue-sfc-transformer] Failed to load the script block in /Users/cyprienthao/Documents/DEV/ORGANIZATIONS/AGORASTORE/nuxt4-module-jsx/src/runtime/components/TestComp.vue
    at node_modules/vue-sfc-transformer/dist/mkdist.mjs:62:17
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
    at async node_modules/vue-sfc-transformer/dist/mkdist.mjs:56:24
    at async Promise.all (index 0)
    at async node_modules/vue-sfc-transformer/dist/mkdist.mjs:53:21
    at async loadFile (node_modules/mkdist/dist/shared/mkdist.CcWb7-AJ.mjs:319:23)
    at async mkdist (node_modules/mkdist/dist/shared/mkdist.CcWb7-AJ.mjs:678:21)
    at async mkdistBuild (node_modules/unbuild/dist/shared/unbuild.COJB8j-I.mjs:1051:22)
    at async *build (node*modules/unbuild/dist/shared/unbuild.COJB8j-I.mjs:1320:7)
    at async build (node_modules/unbuild/dist/shared/unbuild.COJB8j-I.mjs:1140:5)
  [cause]: Transform failed with 1 error:
<stdin>:3:19: ERROR: Expected ";" but found "Render"
      at failureErrorWithLog (node_modules/esbuild/lib/main.js:1467:15)
      at node_modules/esbuild/lib/main.js:736:50
      at responseCallbacks.<computed> (node_modules/esbuild/lib/main.js:603:9)
      at handleIncomingPacket (node_modules/esbuild/lib/main.js:658:12)
      at Socket.readFromStdout (node_modules/esbuild/lib/main.js:581:7)
      at Socket.emit (node:events:507:28)
      at addChunk (node:internal/streams/readable:559:12)
      at readableAddChunkPushByteMode (node:internal/streams/readable:510:3)
      at Readable.push (node:internal/streams/readable:390:5)
      at Pipe.onStreamRead (node:internal/stream_base_commons:189:23)
Variations of the Error

When using class attributes in JSX, the error message changes to:

ERROR: Expected ">" but found "class"

But the underlying issue remains the same

主要语言
TypeScript
星标
277
派生
36
平均合并
2 小时 46 分钟
30 天内合并 PR
2

环境准备

  • 没有 Dockerfile 或 Docker Compose 文件
  • 没有 Pull Request 模板
  • 阅读贡献指南

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

nuxt/module-builder 的其他 Issue

查看 nuxt/module-builder 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。