Setting up tsconfig.json file for storybook

[WillLiang918]

Summary

Hello!

I am running into an issue with storybook not correctly using the tsconfig.json file. Specially my project needs to use the compilerOptions.moduleSuffixes option.

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. Any help would be greatly appreciated! Thank you!

Additional information

No response

Create a reproduction

No response

[zzxx53]

To add more context to @WillLiang918 's description:
We have a component named Button.web.tsx. We imported this component using import { Button } from './Button';

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.

[zzxx53]

Linked issue: #25532

[valentinpalkovic]

Closing in favour of the issue #25513