Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#667 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
42/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
bun, nuxtjs, typescript
Área
build-system, tooling

Línea de trabajo

Comienza ejecutando bun run prepack en el nuxt4-module-jsx-repro enlazado con nuxt-module-builder 1.0.0 o posterior, y después compáralo con 0.8.4. Inspecciona la ruta de vue-sfc-transformer indicada en dist/mkdist.mjs y el flujo de compilación de mkdist/unbuild. Se considera terminado cuando el SFC JSX/TSX se compila correctamente durante prepack, incluidos los atributos de clase JSX.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
TypeScript
Estrellas
277
Forks
36
Merge medio
4 d 19 h
PR fusionados (30 d)
3

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de nuxt/module-builder

Todos los issues de nuxt/module-builder

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.