[Bug]: Cannot resolve alias in manager.ts file

[sheppard30]

Describe the bug

I have storybook configured with NX application. In .storybook I have 3 files: main.ts with webpack configuration, preview.tsx with some story configurations and manager.ts for theme configuration. The problem is that in manager.ts I cannot use import with aliases

import { addons } from "@storybook/addons";
import { create } from "@storybook/theming";

import { colorTokens } from "@ds/theme"; // throws error

const theme = create({
    base: "light",
    colorPrimary: colorTokens.ColorPrimary,
    colorSecondary: colorTokens.ColorPrimary,
});

addons.setConfig({
    theme,
});

It throws an error

Module not found: Error: Can't resolve '@ds/theme' in '/Users/x/Sources/bm.front.millenet.retail/libs/design-system/.storybook'
resolve '@ds/theme' in '/Users/x/Sources/bm.front.millenet.retail/libs/design-system/.storybook'
  Parsed request is a module
  using description file: /Users/x/Sources/bm.front.millenet.retail/package.json (relative path: ./libs/design-system/.storybook)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /Users/x/Sources/bm.front.millenet.retail/libs/design-system/.storybook/node_modules doesn't exist or is not a directory
      /Users/x/Sources/bm.front.millenet.retail/libs/design-system/node_modules doesn't exist or is not a directory
      /Users/x/Sources/bm.front.millenet.retail/libs/node_modules doesn't exist or is not a directory
      looking for modules in /Users/x/Sources/bm.front.millenet.retail/node_modules
        single file module
          using description file: /Users/x/Sources/bm.front.millenet.retail/package.json (relative path: ./node_modules/@ds/theme)

In preview.tsx I do not have this problem, aliases work fine.

My main.ts:

/* eslint-disable @typescript-eslint/no-var-requires */
const path = require("path");

const { merge } = require("webpack-merge");

module.exports = {
    addons: [
        "@storybook/addon-essentials",
        "@storybook/addon-actions",
        "@storybook/addon-a11y",
        "@storybook/addon-docs",
        "@storybook/addon-jest",
        "@storybook/addon-storyshots",
        "@nrwl/react/plugins/storybook",
    ],
    core: { builder: "webpack5" },
    stories: ["../(components|theme)/**/*.stories.@(ts|tsx|md|mdx)"],
    typescript: {
        check: false,
    },
    webpackFinal: (config: unknown) => {
        return config
    },
};

To Reproduce

Use any alias in manager.ts file

System

No response

Additional context

No response

[mvarendorff]

Try to set up the required plugin for that: https://storybook.js.org/docs/react/builders/webpack#typescript-module-resolution

Be sure to check for any warnings from the plugin when launching your storybook as well (I missed a baseUrl in my tsconfig.json for example). After that, custom aliases worked fine.

You might also want to read through this (very likely) dupe: https://github.com/storybookjs/storybook/issues/14087

[shilman]

In 6.x and earlier, Storybook's "manager" UI was built using Webpack, so it might have been possible to configure that webpack process to respect aliases. In 7.0, we're using esbuild instead, and it is no longer configurable. The new setup is faster and simpler, but you'll need to prebundle your addon if you want to use advanced features. cc @ndelangen for clarification.

[ndelangen]

Storybook 7.0's manager builder simply does not support customization at all, for performance 's sake. As @shilman mentioned, You'll need to precompile/pretranspile code if using aliasses.

[timkindberg]

I appreciate that a decision was made for performance's sake, but tons of codebases have spent the last 6 years hopping on the alias train and utilizing aliases to make relative paths to common folders easier. I don't even know what you mean by "You'll have to precompile"... you must have some idea that only like mono-repos use aliases... we have a mono-lith that just sets our js folder as an alias so that everything inside it can reference the other things easily. There would be no way to "precompile" things.

I think this needs to be reconsidered and reopened and spiked out, in spite of performance.

[valentinpalkovic]

@timkindberg What if we set up a plugin like https://github.com/frankleng/esbuild-ts-paths and it resolves the tsconfig.json within your storybook config folder? Would this be sufficient? The tsconfig could extend whatever Typescript configuration file you have in place. Or would you rather prefer to define aliases directly instead? What does make more sense?

[timkindberg]

@valentinpalkovic Thanks for brainstorming some possible ideas! For us, we do define the alias in out tsconfig.json, so if you implemented in this way, it would work for us. I think having SOME way is great, even if it means folks were required to define within the tsconfig.

[valentinpalkovic]

Let's continue the discussion in https://github.com/storybookjs/storybook/issues/22078 since this issue is still open and refers to the same problem.

[timkindberg]

Sounds good, you should bring up your idea over there.