Absolute Imports in Storybook Vite

[jaroslav-kavalec]

I was able to setup Vite TS React project, and I was able to enable absolute imports by adding baseUrl/rootDir in tsconfig.json, and using vite-tsconfig-paths vite plugin, in React app.

Sadly this was not possible to do for Vite Storybook Builder.

There is no description how to setup working absolute imports with Storybook/Vite, I tried to pass/merge Vite/Ts configuration to Storybook in storybook/main.js from what information I was able to gather, but nothing worked.

I have project setup here, with React app working, with Storybook in failing state due to import. https://github.com/jaroslav-kavalec/vite-ts-react-sb

Any Idea how to resolve this issue?

[IanVS]

It looks like you need to add the tsconfigpaths plugin to storybook as well. We don't automatically use your vite.config.js, because there is custom config that the builder needs to do, and we can't assume every config is the same between the app and stories.

You should be able to do something like:

const {mergeConfig} = require('vite');
const 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"
  },
  "features": {
    "storyStoreV7": true
  },
  "viteFinal": async (config) => {
    return mergeConfig(config, {
      plugins: [tsconfigPaths()],
    });
  }
}

[jaroslav-kavalec]

Thank you, I was doing similar thing and tried this again, and it helped me to find the issue - it needs to use tscongifPaths.default():

const {mergeConfig} = require('vite');
const 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"
  },
  "features": {
    "storyStoreV7": true
  },
  "viteFinal": async (config) => {
    return mergeConfig(config, {
      plugins: [tsconfigPaths.default()],
    });
  }
}

[vittxr]

I solved this using @storybook/react-vite and @storybook/builder-vite

import type { StorybookConfig } from '@storybook/react-vite';

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@chromatic-com/storybook"
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {}
  },
  core: {
    builder: {
      name: '@storybook/builder-vite',
      options: {
        viteConfigPath: './vite.config.ts',
      },
    },
  },
  docs: {},
};

export default config;

in my vite.config.ts I define the absolute path:

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
});

It was necessary define it in tsconfig.json too

{
  "compilerOptions": {
    // Default
    "target": "es5",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    // Added
    "jsx": "react",
    "module": "ESNext",
    "declaration": true,
    "declarationDir": "types",
    "sourceMap": true,
    "outDir": "dist",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "emitDeclarationOnly": true,
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  },
}

@IanVS solution did'nt work for me, because I was unable to import vite-tsconfig-paths in my enviroment.