[Bug]: Overriding tsconfig aliases does not work

[yoksel]

Describe the bug

I'm trying to mock modules using overriding tsconfig aliases in .storybook/main.ts and it does not work for me

tsconfig:

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": "src/",
    "paths": {
      "@/util/*": ["util/*"],
      "@/testModule": ["util/testModule/index.ts"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Aliases replacements in .storybook/main.ts

webpackFinal: async (config) => {
  if (config.resolve) {
    config.resolve.alias = {
      ...config.resolve.alias,
      // Example from documentation:
      // '@/lib/db': path.resolve(__dirname, './lib/db.mock.ts'),
      // --------------------------------------------------------
      // WORKS — we can see replacement in TestComponent story
      nanoid: path.resolve(__dirname, './mocks/nanoid.ts'),
      // WORKS — we can see replacement in TestComponent story
      '../../util/testModule': path.resolve(__dirname, './mocks/testModule.ts'),
      // DOES NOT WORK
      // — we can NOT see replacement in TestComponent story
      // — if we provide broken path instead of real mock file, Storybook build won't fail because all these aliases replacements actually ignored
      '@/util': path.resolve(__dirname, './mocks/testModule.ts'),
      '@/util/testModule': path.resolve(__dirname, './mocks/testModule.ts'),
      '@/util/testModule$': path.resolve(__dirname, './mocks/testModule.ts'),
      '@/testModule': path.resolve(__dirname, './mocks/testModule.ts'),
      '@/testModule$': path.resolve(__dirname, './mocks/testModule.ts'),
    };
  }

  // console.log(config.resolve?.alias);

  return config;
},

Reproduction link

https://github.com/yoksel/storybook-aliases-bug/

Reproduction steps

1. Install dependencies: npm i
2. Run Storybook: npm run storybook
3. Open Storybook and check component TestComponent: http://localhost:6007/?path=/story/components-testcomponent--default
4. See Real content was not replaced by MOCKED content despite of rewriting aliases in .storybook/main.ts.

We also can provide broken paths instead of real mocks like:

'@/testModule': path.resolve(__dirname, './mocks/BROKEN_PATH.ts'),

And if aliases work, Storybook build should fail, but it does not, so replacing aliases for Storybook does not work.

System

Storybook Environment Info:

  System:
    OS: macOS 15.0
    CPU: (12) arm64 Apple M2 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.18.0 - ~/.nvm/versions/node/v18.18.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.0/bin/npm <----- active
    pnpm: 8.10.0 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.205
    Edge: 131.0.2903.112
    Safari: 18.0
  npmPackages:
    @storybook/addon-essentials: ^8.4.7 => 8.4.7 
    @storybook/addon-interactions: ^8.4.7 => 8.4.7 
    @storybook/addon-onboarding: ^8.4.7 => 8.4.7 
    @storybook/blocks: ^8.4.7 => 8.4.7 
    @storybook/nextjs: ^8.4.7 => 8.4.7 
    @storybook/react: ^8.4.7 => 8.4.7 
    @storybook/test: ^8.4.7 => 8.4.7 
    eslint-plugin-storybook: ^0.11.2 => 0.11.2 
    storybook: ^8.4.7 => 8.4.7

Additional context

No response

[valentinpalkovic]

Hi @yoksel,

Thank you for creating this issue.

Can you try out our experimental vite-based Next.js framework?:
https://storybook.js.org/docs/get-started/frameworks/nextjs#with-vite

Does it fixes your issue?

[yoksel]

Hi @yoksel,

Thank you for creating this issue.

Can you try out our experimental vite-based Next.js framework?: https://storybook.js.org/docs/get-started/frameworks/nextjs#with-vite

Does it fixes your issue?

Thank you for the suggestion 🙌 I tried and it seems like after that some options stopped to work though they worked before.

Initial state (first and second lines contain mocks):

With @storybook/experimental-nextjs-vite:

It seems like alias replacement stopped to works completely