alias not working

main.js

const path = require("path")
const reactRefresh = require("@vitejs/plugin-react-refresh")

module.exports = {
    stories: [
        // "../src/**/*.stories.@(js|jsx|ts|tsx)"
        "../src/components/**/*.stories.@(ts|tsx)",
    ],
    // addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
    core: {
        builder: "storybook-builder-vite",
    },
    resolve: {
        alias: [
            {
                find: "@",
                replacement: path.resolve(__dirname, "./src"),
            },
            {
                find: "@assets",
                replacement: path.resolve(__dirname, "./src/assets"),
            },
            {
                find: "@components",
                replacement: path.resolve(__dirname, "../src/components"),
            },
        ],
    },
    async viteFinal(config, { configType }) {
        // customize the Vite config here
        config.resolve.alias.foo = "bar"

        reactRefresh()

        return config
    },
}

If use yarn run not storybook, config like https://github.com/vitejs/vite/issues/279 work run. But i believe vite.config.ts != main.js. This plugin can’t handle some features like vite.config.ts

Requirement:

[1] show case how to use reactRefresh plugin like we did in vite.config.ts. Cuz reactRefresh is a must for react to work in ite. In vite. Also mention, there is another plugin @vite/vue should be imported if develop vue.

[2] support vite-tsconfig-paths in storybook. So, we can have alias support (there may be quite way to solve, this is the major feature needs to be, for storybook to work with alias)

vite.config.ts

import { defineConfig } from "vite"
// import tsconfigPaths from "vite-tsconfig-paths"
import reactRefresh from "@vitejs/plugin-react-refresh"
// import envCompatible from "vite-plugin-env-compatible"
import path from "path"

export default defineConfig({
    plugins: [reactRefresh()],
    build: {
        outDir: "build",
    },
    // alias: {
    //     "@": path.resolve(__dirname, "./src"),
    // },
    // resolve: {
    alias: [
        {
            find: "@",
            replacement: path.resolve(__dirname, "./src"),
        },
        {
            find: "@assets",
            replacement: path.resolve(__dirname, "./src/assets"),
        },
        {
            find: "@components",
            replacement: path.resolve(__dirname, "./src/components"),
        },
    ],
    // },
    // plugins: [tsconfigPaths(), envCompatible(/* options */), reactRefresh()],
})

tsconfig.json

{
    "compilerOptions": {
        "allowJs": true,
        "allowSyntheticDefaultImports": true,
        "baseUrl": "src",
        "paths": {
          "@components/*": ["./components/*"],
          "@assets/*": ["./assets/*"],
        },
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "isolatedModules": true,
        "jsx": "react-jsx",
        "lib": ["dom", "dom.iterable", "esnext"],
        "module": "esnext",
        "moduleResolution": "node",
        "noEmit": true,
        "noFallthroughCasesInSwitch": true,
        "resolveJsonModule": true,
        "skipLibCheck": true,
        "strict": true,
        "target": "es5",
        "types": ["node", "vite/client"]
    },
    "include": ["./src"]
}

[ThinCats]

In the function viteFinal(config, { configType }), the parameter config is the config object for vite, which is used by storybook-builder-vite. You can return a new config object.

// main.js

module.exports = {
  async viteFinal(config, { configType }) {
    return {
      ...config,
      resolve: {
        alias: [
          {
            find: "@",
            replacement: path.resolve(__dirname, "./src"),
          },
          {
            find: "@assets",
            replacement: path.resolve(__dirname, "./src/assets"),
          },
          {
            find: "@components",
            replacement: path.resolve(__dirname, "./src/components"),
          },
        ],
      },
    };
  },
};

If you want to reuse the project’s vite.config.js, you can use the API mergeConfig and loadConfigFromFile exposed by vite.

const { loadConfigFromFile, mergeConfig } = require("vite");

module.exports = {
	...
  async viteFinal(config, { configType }) {
    const { config: userConfig } = await loadConfigFromFile(
      path.resolve(__dirname, "../vite.config.ts")
    );

    return mergeConfig(config, {
      ...userConfig,
      // manually specify plugins to avoid conflict
      plugins: [],
    });
  },
};

[eirslett]

☝️ this is the right answer