Aliases (import) doesn't work with Storybook

Question

When I run storybook, my aliases are ignored. It work fine when I run my project.

I tried to define all my aliases in the main.js file, but i doesn't work better. Do you know why ?

I've already visit this page and i think i do the right config (?) https://storybook.js.org/docs/react/builders/webpack

Bellow my code.

Here my dependencies (package.json) :

"@storybook/addon-a11y": "^6.5.16",
"@storybook/addon-postcss": "^2.0.0",
"storybook-addon-sass-postcss": "^0.1.3",
"storybook-react-i18next": "^1.1.2",
"@storybook/addon-actions": "^6.5.16",
"@storybook/addon-essentials": "^6.5.16",
"@storybook/addon-interactions": "^6.5.16",
"@storybook/addon-links": "^6.5.16",
"@storybook/builder-vite": "^0.4.0",
"@storybook/react": "^6.5.16",
"@storybook/testing-library": "^0.0.13"

Here my storybook config file (main.js)

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
const path = require('path')

module.exports = {
  stories: [
    "../packages/frontend/src/**/*.stories.mdx",
    "../packages/frontend/src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "storybook-react-i18next",
    "@storybook/addon-a11y",
    "@storybook/addon-postcss",
    "storybook-addon-sass-postcss"
  ],
  framework: "@storybook/react",
  core: {
    builder: "@storybook/builder-vite"
  },
  features: {
    storyStoreV7: true
  },
  webpackFinal: async (config) => {
    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin({
        extensions: config.resolve.extensions,
      }),
    ],
    // FIXME - why alias not working ???
    config.resolve.alias = {
      ...config.resolve.alias,
      '@public': path.resolve(__dirname, '/public'),
      '@internals/components': path.resolve(__dirname, '/src/components'),
      '@internals/features': path.resolve(__dirname, '/src/features'),
      '@internals/hooks': path.resolve(__dirname, '/src/hooks'),
      '@internals/models': path.resolve(__dirname, '/src/models'),
      '@internals/utils': path.resolve(__dirname, '/src/utils'),
      '@internals/types': path.resolve(__dirname, '/src/types'),
      '@internals/styles': path.resolve(__dirname, '/src/styles'),
      '@internals/assets': path.resolve(__dirname, '/src/assets'),
      '@internals/store': path.resolve(__dirname, '/src/store'),
      '@internals/config': path.resolve(__dirname, '/src/config'),
      '@internals/services': path.resolve(__dirname, '/src/services'),
    }
    // resolve baseUrl path set in tsconfig
    config.resolve.modules = [
      ...(config.resolve.modules || []),
      path.resolve(__dirname, "../packages/frontend/src/"),
    ];
    config.module.rules.push({
      test: /\.scss$/,
      sideEffects: true, // scss is considered a side effect of sass
      use: [
        "style-loader",
        "css-loader",
        "sass-loader",
      ],
      include: path.resolve(__dirname, "../packages/frontend/src/"),
    })
    return config
  },
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'none',
    // reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
}

My Typescript config (tsconfig.json)

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "ES6",
    "jsx": "react-jsx",
    "allowJs": false,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "declaration": true,
    "types": [
      "vite/client",
      "vitest"
    ],
    "moduleResolution": "node",
    "paths": {
      "@internals/components/*": [
        "./src/components/*"
      ],
      "@internals/features/*": [
        "./src/features/*"
      ],
      "@internals/hooks/*": [
        "./src/hooks/*"
      ],
      "@internals/models/*": [
        "./src/models/*"
      ],
      "@internals/utils/*": [
        "./src/utils/*"
      ],
      "@internals/types/*": [
        "./src/types/*"
      ],
      "@internals/styles/*": [
        "./src/styles/*"
      ],
      "@internals/assets/*": [
        "./src/assets/*"
      ],
      "@internals/store/*": [
        "./src/store/*"
      ],
      "@internals/services/*": [
        "./src/services/*"
      ],
      "@internals/config/*": [
        "./src/config/*"
      ],
      "@public/*": [
        "./public/*"
      ],
    },
  },
  "files": [],
  "include": ["src/**/*.ts", "src/**/*.tsx", "vitest.config.ts"],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.spec.json"
    }
  ],
  "extends": "../../tsconfig.base.json"
}

Gisborne

Answer 1

I got aliases working in Storybook 7 with NextJS by adding this to main.ts, basically telling wepack to support aliases inside the /app folder for NextJS pages and /shared folders where my components live.

// .storybook/main.ts

  async webpackFinal(config, { configType }) {
    if (config?.resolve?.alias) {
      config.resolve.alias = {
        ...config.resolve.alias,
        "@/shared": path.resolve(__dirname, "../shared"),
        "@/app": path.resolve(__dirname, "../app"),
      }
    }
    return config
  },

Folder structure

|
|- .storybook
|
|- stories
|    |
|     - shared
|          |
|           - MyCustomComponent.stories.tsx
|
|- app
|
 - shared
    |
     - MyCustomComponent.tsx

Full main.ts

import type { StorybookConfig } from "@storybook/nextjs"
import path from "path"
const config: StorybookConfig = {
  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  staticDirs: ["../public"], // This loads images at localhost:6006/next.svg e.t.c.
  async webpackFinal(config, { configType }) {
    if (config?.resolve?.alias) {
      config.resolve.alias = {
        ...config.resolve.alias,
        "@/shared": path.resolve(__dirname, "../shared"),
        "@/app": path.resolve(__dirname, "../app"),
      }
    }
    return config
  },
}
export default config

Welcy

I have an identical config and still doesn't resolve – Yser