storybookjs/storybook

[Bug]: Bad error message when trying to use JSX in .js file

Open

#21,662 opened on 2023年3月17日

GitHub で見る
 (5 comments) (18 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
bugbuilder-vitehelp wanted

説明

Describe the bug

[storybook:inject-export-order-plugin] Parse error @:22:29
file: ........./src/stories/ApiDocumentation.stories.js
ERR! Error: Parse error @:22:29
ERR!     at parse ........./node_modules/es-module-lexer/dist/lexer.cjs:1:402)
ERR!     at Object.transform (........./node_modules/@storybook/builder-vite/dist/index.js:1:3217)
ERR!     at file:///.........//node_modules/rollup/dist/es/shared/node-entry.js:24343:40

The above error will happen if your .stories.js file contains any JSX. Renaming the file to .jsx fixes the issue. I spent hours trying to figure out the problem. Some better error messaging would be nice here.

To Reproduce

Happens in sandbox project with React and Vite.

System

No response

Additional context

No response

コントリビューターガイド

技術スタック
javascripttypescriptreactvite
領域
frontenddeveloper experience
Issue 種別
bug
難度新しい貢献者にとっての実装難度です。1 は非常に小さな変更、5 は専門的な作業です。
2
推定時間経験ある貢献者が調査、実装、テスト、pull request 準備にかけるおおよその時間範囲です。
1-3 hours
活動状況Issue が今どれだけ取り組みやすいかを示します。新しい、活発、古い、ブロック中、またはメンテナー入力待ちなどです。
fresh
明確さ期待される変更、受け入れ条件、次の手順がどれだけ明確かを示します。
clear
前提条件
StorybookViteJavaScript/JSX
初心者向け度初回貢献者にどれだけ取り組みやすいかを 1-100 で推定したスコアです。
75
調査方針
The fix involves improving the error message when JSX is detected in a .js file. The error originates from the inject export order plugin in the storybook/builder vite package. The solution could add a validation step to check for JSX before the es module lexer parse, and provide a more descriptive error suggesting renaming to .jsx. Look at the source file at @storybook/builder vite or the inject export order plugin. Consider using Babel or a simple regex to detect JSX.