How to make alias working in javascript + swc vite app?

[brupelo]

Hi, I've bootstrapped a JavaScript + SWC vite app that uses storybook builder-vite and when I run npm run dev alias will work perfectly but when I try storybook (no modifications) I'll get some crashes.

Here's my vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  // root: 'src',
  // build: {
  //   outDir: "../dist"
  // },
  server: {
    open: '/index.html',
    port: 5555
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

And here's .storybook/main.cjs:

const path = require("path");

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
  }
}

Are these crashes considered a bug? If this behaviour is intended, what'd be the proper way to configure .storybook/main.cjs to use vite's config? Is this documented somewhere?

Thanks in advance.

References:

• alias not working #85
• [Bug] Unable to find local modules using resolve alias #316

[IanVS]

@brupelo are you using storybook 6.5 or 7.0? I think you might have more luck with 7.0, which automatically uses your vite config. Otherwise, you need to do some work in viteFinal to remove the react addon that storybook adds, and replace it with the react-swc addon, as well as add your alias.