storybookjs/storybook

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

Open

#25,532 建立於 2024年1月9日

在 GitHub 查看
 (2 留言) (0 反應) (0 負責人)TypeScript (89,909 star) (10,058 fork)batch import
feature requesthelp wantedtypescript

描述

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

貢獻者指南