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

[ChronicStone]

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: bun@1.2.19
• 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