storybookjs/storybook

[DX] Favor `.tsx` extension in Vite/React/TS framework

Open

#21,306 opened on Feb 28, 2023

View on GitHub
 (0 comments) (1 reaction) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
clihelp wantedmaintenance

Description

Describe the bug

This is not a code bug but an misalignment in developer expectations.

The Vite/React/TS framework uses .ts extensions for Stories and configuration. However, .tsx is required when adding React components (decorators and templates).

On the story page, the Vite provided error is misleading (screenshot attached): Failed to find dynamically imported module: **/MyComponent.stories.ts

image

This is a little confusing because a file by that name exists (on the user filesystem). The file just failed to build the included JSX.

The correct error can be seen in both console and and docs page: [plugin:vite:esbuld] Transform failed… image

Documentation does not assist here because it is based on the Webpack experience, which is much more permissive. Docs suggest that .tsx or .ts are suitable.

To Reproduce

  • npx storybook@next repro
    • resolved as: storybook@7.0.0-beta.55
  • framework: TS/React/Vite
  • node: 16.13.2
  • Add any decorator or render field to a story

If the file extensions aren't changed to .tsx, they produce these errors:

image image image

System

No response

Additional context

I spoke with the Storybook team in internal Chromatic chat. The favored solution there is to use use .tsx files in this sandbox, even though the extension is extraneous for the CSF3 examples.

Contributor guide

Tech stack
typescriptreactvite
Domain
frontenddeveloper experience
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Storybook basicsReactTypeScriptVite
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
80
Research direction
The issue requests favoring .tsx extension in the Vite/React/TS framework for Storybook stories. To implement, locate the sandbox template files in the storybook repository (likely under examples or templates), rename story files from .ts to .tsx, and update any imports or configurations accordingly. Also verify that the documentation no longer suggests .ts is acceptable for stories with JSX. No linked PR or assignee exists, so this issue is available.