[Bug]: tsconfig.json in my project is not used when parsing storybook configuration file (v7)

fa93hws commented 1 month ago

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 that import * as cssnano from 'cssnano'; gives cssnano as a function. While in storybook, cssnano becomes a object and cssnano.default becomes the function that's expected.

Reproduction link

https://github.com/fa93hws/storybook-allowSyntheticDefaultImports-reproduce

Reproduction steps

Maybe take a look at the README (optional)
Run pnpm storybook, and it failed.
Run yarn ts-node .storybook/main.ts, and it's fine.
Maybe take a look at the console.log output from step 2 and 3.

System

Storybook Environment Info:

  System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.2 - /opt/homebrew/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn <----- active
    npm: 10.5.0 - /opt/homebrew/bin/npm
    pnpm: 8.15.5 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 127.0.6533.73
    Safari: 17.5
  npmPackages:
    @storybook/addon-essentials: ^7.6.20 => 7.6.20 
    @storybook/addon-interactions: ^7.6.20 => 7.6.20 
    @storybook/addon-links: ^7.6.20 => 7.6.20 
    @storybook/addon-onboarding: ^1.0.11 => 1.0.11 
    @storybook/blocks: ^7.6.20 => 7.6.20 
    @storybook/react: ^7.6.20 => 7.6.20 
    @storybook/react-webpack5: ^7.6.20 => 7.6.20 
    @storybook/test: ^7.6.20 => 7.6.20 
    storybook: ^7.6.20 => 7.6.20

Additional context

No response

greptile-apps[bot] commented 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.

References

/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

#### About Greptile

This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/storybookjs/storybook/next) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)

fa93hws commented 1 month ago

Thanks AI but not helpful. The issue is on parsing the storybook configuration file instead of bundling in webpack.

storybookjs / storybook