Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#667 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
42/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
bun, nuxtjs, typescript
Lĩnh vực
build-system, tooling

Hướng nghiên cứu

Bắt đầu bằng cách chạy bun run prepack trong nuxt4-module-jsx-repro được liên kết với nuxt-module-builder 1.0.0 hoặc mới hơn, sau đó so sánh với 0.8.4. Kiểm tra đường dẫn vue-sfc-transformer được báo cáo trong dist/mkdist.mjs và quy trình build của mkdist/unbuild. Được xem là hoàn tất khi JSX/TSX SFC build thành công trong quá trình prepack, bao gồm cả các thuộc tính class của JSX.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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

Ngôn ngữ chính
TypeScript
Star
277
Fork
36
Merge trung bình
2 giờ 46 phút
Pull request đã merge (30 ngày)
2

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của nuxt/module-builder

Tất cả issue của nuxt/module-builder

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.