Open fa93hws opened 1 month ago
Disclaimer This information might be inaccurate, due to it being generated automatically
To ensure your project's tsconfig.json
is used when parsing TypeScript configuration files in Storybook, follow these steps:
Extend Storybook's Webpack Configuration:
Modify your .storybook/main.ts
to include the tsconfig-paths-webpack-plugin
for resolving module aliases defined in your tsconfig.json
.
import type { StorybookConfig } from '@storybook/react-webpack5';
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
const config: StorybookConfig = {
framework: '@storybook/react-webpack5',
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
webpackFinal: async (config) => {
config.resolve.plugins = [
...(config.resolve.plugins || []),
new TsconfigPathsPlugin({ configFile: './tsconfig.json' }),
];
return config;
},
};
export default config;
Update TypeScript Configuration in Storybook:
Ensure your .storybook/main.ts
includes the typescript
configuration to avoid skipping the compiler.
const config: StorybookConfig = {
framework: '@storybook/react-webpack5',
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
typescript: {
check: false,
skipCompiler: false,
},
};
export default config;
These changes will ensure that Storybook respects your project's tsconfig.json
settings.
/docs/configure/webpack.mdx /code/frameworks/angular/src/builders/build-storybook/schema.json /test-storybooks/portable-stories-kitchen-sink/react/tsconfig.json /code/lib/cli/templates/angular/application/template-csf/.storybook/tsconfig.json /code/lib/cli/templates/angular/library/template-csf/.storybook/tsconfig.json /docs/_snippets/storybook-storyloading-with-directory.md /docs/_snippets/main-config-stories.md /code/lib/cli/templates/angular/application/template-csf/.storybook /docs/_snippets/main-config-core-disable-project-json.md /docs/_snippets/storybook-preview-with-angular-polyfills.md /code/frameworks/angular/src/builders/start-storybook/index.spec.ts /docs/api/main-config/main-config.mdx /docs/_snippets/custom-build-script-production.md /code/renderers/react/tsconfig.json /docs/_snippets/storybook-main-extend-ts-config.md /docs/configure/integration/typescript.mdx /code/lib/cli/templates/angular/library/template-csf/.storybook /code/sandbox/bench-react-webpack-18-ts-test-build /docs/_snippets/main-config-typescript-react-docgen.md /code/sandbox/bench-react-webpack-18-ts /code/frameworks/html-webpack5 /test-storybooks/server-kitchen-sink/.storybook /code/lib/cli/src/generators/configure.test.ts /docs/_snippets/main-config-typescript-check.md /code/core/src/csf-tools/CsfFile.test.ts
Thanks AI but not helpful. The issue is on parsing the storybook configuration file instead of bundling in webpack.
Describe the bug
It seems that
tsconfig.json
in my project is not used when parsing configuration file (e.g..config/main.ts
), instead, storybook is using its own one and causing unexpected behavior.For example, in my project,
allowSyntheticDefaultImports
is set to false so thatimport * as cssnano from 'cssnano';
givescssnano
as a function. While in storybook,cssnano
becomes a object andcssnano.default
becomes the function that's expected.Reproduction link
https://github.com/fa93hws/storybook-allowSyntheticDefaultImports-reproduce
Reproduction steps
pnpm storybook
, and it failed.yarn ts-node .storybook/main.ts
, and it's fine.console.log
output from step 2 and 3.System
Additional context
No response