CODEWITHSUNDEEP
typescriptstorybook
geoffrey
geoffrey

Reputation: 2434

Use storybook alongside rollup and a tsconfig using nodenext

My project requires nodenext module resolution to be built. I am using rollup for bundling and tsc for type checking. This means every relative path I import from has to mention a file extension, and because I am using typescript, there is a mismatch between the actual source file extension (.ts) and the one I must use in my imports (.js)

I can't get that to work with storybook react-webpack5. I get errors such as the following when I import components in my stories:

ModuleNotFoundError: Module not found: Error: Can't resolve '../colors.js' in 'E:\path\to\src\components'

The question is how could I configure either TS, rollup or storybook to work together nicely?

Upvotes: 0

Views: 358

Answers (1)

geoffrey
geoffrey

Reputation: 2434

Typescript 5.0 has this new config option: allowImportingTsExtensions. It enables using .ts extensions in import paths.

With this in place, storybook has no problem resolving the modules.

allowImportingTsExtensions requires that tsc does not emit files other than declarations, but since I let rollup do the building it is not an issue.

Upvotes: 0

Related Questions