How to add path aliases to multiple workspaces in webpack configuration?

[nareshbhatia]

I am using a single storybook inside a monorepo (Turborepo) to display components from multiple workspaces. Storybook is setup in the main app which is a nextjs app. Here's .storybook/main.ts (notice multiple path aliases under webpackFinal):

import type { StorybookConfig } from '@storybook/nextjs';

const config: StorybookConfig = {
  ...
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
  webpackFinal: (config) => {
    if (config.resolve) {
      config.resolve.alias = {
        ...config.resolve.alias,
        '@/*': [
          './src/*',
          '../../packages/ui-lib/src/*',
        ],
      };
    }

    return config;
  },
  ...
};

export default config;

However, this is not working – Storybook gives errors whenever it encounters imports from paths like this @/components. If I put the same aliases in the tsconfig.json for this workspace, Storybook starts working. See below:

{
  "compilerOptions": {
    "paths": {
      "@/*": [
        "./src/*",
        "../../packages/ui-lib/src/*"
      ]
    }
  }
}

I don't want to do use this approach just to make storybook work – general compilation of this workspace does not reference source from other workspaces. Shouldn't the webpack configuration in .storybook/main.ts just work? Please help.