storybookjs/storybook

[Bug]: `moduleSuffixes` setting in tsconfig.json is not picked up

Open

#25532 opened on Jan 9, 2024

View on GitHub
 (2 comments) (0 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
feature requesthelp wantedtypescript

Description

Describe the bug

We have a component named Button.web.tsx. We imported this component in the Storybook using import { Button } from './Button'. We followed https://github.com/storybookjs/storybook/issues/3291#issuecomment-1196088801 to make Storybook aware of the custom tsconfig.json.

If "moduleSuffixes": [".web", ""] option in tsconfig.json had worked, the Typescript compiler would have looked for both Button.tsx and Button.web.tsx, and found the component. Instead it cannot resolve it.

This led us to believe that the moduleSuffixes option must have been dropped somewhere. Maybe it got overridden by Storybook's react-webpack5 config.

To Reproduce

I've created a sample project off of npx storybook@latest init to reproduce the issue I am running into. https://github.com/WillLiang918/storybook-test. The following are the modifications I've made:

// stories/Button.web.tsx (renamed from stories/Button.js)

---

// tsconfig.json 
// expect storybook to resolve Button.web.tsx
"moduleSuffixes": [".web", ""]

---

// main.js 
// added the following to read from tsconfig.json
async webpackFinal(config, { configType }) {
    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin({
          configFile: path.resolve(__dirname, '../tsconfig.json'),
      })
    ]
  return config
}

Running this sample project will result in a Module not found: Error: Can't resolve './Button' error.

System

  System:
    OS: Linux 5.15 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11850H @ 2.50GHz
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.19.0/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v16.19.0/bin/npm <----- active
  npmPackages:
    @storybook/addon-essentials: ^7.6.6 => 7.6.7
    @storybook/addon-interactions: ^7.6.6 => 7.6.7
    @storybook/addon-links: ^7.6.6 => 7.6.7
    @storybook/addon-onboarding: ^1.0.10 => 1.0.10
    @storybook/blocks: ^7.6.6 => 7.6.7
    @storybook/react: ^7.6.6 => 7.6.7
    @storybook/react-webpack5: ^7.6.6 => 7.6.7
    @storybook/test: ^7.6.6 => 7.6.7
    storybook: ^7.6.6 => 7.6.7

Additional context

No response

Contributor guide