storybookjs/storybook

storybook cannot import `.js` paths in `.tsx?` files.

Open

#15,962 opened on 2021年9月2日

GitHub で見る
 (11 comments) (6 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
bugbuilder-webpack5has workaroundhelp wantedtriage:reviewed

説明

Describe the bug I'm creating a UI Library that is distributed as a ES Module.

in typescript, to create an ES Module compliant package you must import/export all paths as .js as outlined here: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c

storybook does not currently infer these paths and will fail to find the .ts files during development.

in order to provide a great developer experience, storybook should support this functionality.

To Reproduce

https://github.com/lifeiscontent/storybook-repro

System

Environment Info:

  System:
    OS: Linux 5.11 Zorin OS 16
    CPU: (4) x64 Intel(R) Core(TM) i3-10110U CPU @ 2.10GHz
  Binaries:
    Node: 14.17.4 - ~/.asdf/installs/nodejs/14.17.4/bin/node
    Yarn: 3.0.1 - ~/.asdf/installs/nodejs/14.17.4/.npm/bin/yarn
    npm: 6.14.14 - ~/.asdf/installs/nodejs/14.17.4/bin/npm
  Browsers:
    Chrome: 93.0.4577.63
    Firefox: 91.0.2
  npmPackages:
    @storybook/addon-actions: ^6.4.0-alpha.33 => 6.4.0-alpha.33 
    @storybook/addon-docs: ^6.4.0-alpha.33 => 6.4.0-alpha.33 
    @storybook/addon-essentials: ^6.4.0-alpha.33 => 6.4.0-alpha.33 
    @storybook/addon-links: ^6.4.0-alpha.33 => 6.4.0-alpha.33 
    @storybook/react: ^6.4.0-alpha.33 => 6.4.0-alpha.33

Additional context

thanks for your help ❤️

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

技術スタック
typescriptreactstorybook
領域
frontenddeveloper experience
Issue 種別
bug
難度新しい貢献者にとっての実装難度です。1 は非常に小さな変更、5 は専門的な作業です。
3
推定時間経験ある貢献者が調査、実装、テスト、pull request 準備にかけるおおよその時間範囲です。
half day
活動状況Issue が今どれだけ取り組みやすいかを示します。新しい、活発、古い、ブロック中、またはメンテナー入力待ちなどです。
stale
明確さ期待される変更、受け入れ条件、次の手順がどれだけ明確かを示します。
mostly clear
前提条件
TypeScriptStorybookWebpack configuration
初心者向け度初回貢献者にどれだけ取り組みやすいかを 1-100 で推定したスコアです。
60
調査方針
Investigate the reproduction repository linked in the issue (github.com/lifeiscontent/storybook repro) to understand the exact import resolution failure. Focus on Storybook's Webpack configuration, specifically how it handles `.js` extensions in TypeScript files. Check the Storybook source code for module resolution plugins or presets that may need updating to support ESM style `.js` imports. Review comments in the issue for any maintainer suggestions or workarounds.