storybookjs/storybook

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

Open

#15,962 opened on Sep 2, 2021

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

Description

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 ❤️

Contributor guide

Tech stack
typescriptreactstorybook
Domain
frontenddeveloper experience
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
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.
mostly clear
Prerequisites
TypeScriptStorybookWebpack configuration
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
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.