[Bug]: `moduleSuffixes` setting in tsconfig.json is not picked up
#25532 opened on Jan 9, 2024
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