tsconfig absolute paths not working in storybook

[alirezaaminii]

tsconfig.json:

{
  "include": ["src", "vite.config.ts"],
  "compilerOptions": {
    ...
    "baseUrl": "./src",
    "paths": {
      "~/*": ["./*"]
    }
  },
}

vite.config.ts: plugins: [react(), tsconfigPaths()],

code: import {icon} from '~/components/icons/icon';

Error: TypeError: Failed to fetch dynamically imported module: http://localhost:6006/src/components/button/index.stories.tsx

[aleclarson]

Have you reported this to Storybook?

[alirezaaminii]

@aleclarson

Have you reported this to Storybook?

No, but I will. Thanks for noticing.

Update: I opened an issue for storybook here

[dqbd]

For anyone who stumbles here, this .storybook/main.js fixed the issue for me:

const { mergeConfig } = require("vite")
const { default: tsconfigPaths } = require("vite-tsconfig-paths")

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: "@storybook/react",
  core: {
    builder: "@storybook/builder-vite",
  },
  async viteFinal(config) {
    return mergeConfig(config, {
      plugins: [tsconfigPaths()],
    })
  },
}