[Bug]: react-vite, Failed to fetch dynamically imported module

[David0036]

Summary

Does any ideal for planning for fixing this issue? . Refer from Issue

I have same problem here:

.storybook/main.ts

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

const config: StorybookConfig = {
  framework: "@storybook/react-vite",
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: ["@storybook/addon-docs", "@storybook/addon-a11y", "@storybook/addon-themes"],
  typescript: {
    reactDocgen: "react-docgen-typescript",
    reactDocgenTypescriptOptions: {
      EXPERIMENTAL_useProjectService: true,

      propFilter: (prop) =>
        !prop.parent ||
        /node_modules\/(react-aria-components|@react-types)/.test(prop.parent.fileName) ||
        !/node_modules/.test(prop.parent.fileName),

      shouldExtractLiteralValuesFromEnum: true,
      shouldRemoveUndefinedFromOptional: true,
    },
  },
  core: {
    disableTelemetry: true,
  },
};

export default config;

vite.config.ts

import { tanstackRouter } from "@tanstack/router-plugin/vite";
import react from "@vitejs/plugin-react";
import { playwright } from "@vitest/browser-playwright";
import { resolve } from "path";
import { defineConfig } from "vitest/config";

// https://vite.dev/config/
export default defineConfig(({ mode }) => ({
  plugins: [
    tanstackRouter({
      target: "react",
      routesDirectory: "src/app/routes/",
      generatedRouteTree: "src/app/router/route-tree.gen.ts",
      autoCodeSplitting: true,
      quoteStyle: "double",
      semicolons: true,
    }),
    react({
      babel: {
        plugins: ["babel-plugin-react-compiler"],
      },
    }),
  ],
  resolve: {
    alias: {
      "@": resolve(__dirname, "src"),
    },
  },
  css: {
    modules: {
      generateScopedName: mode === "production" ? "_[hash:base64:12]" : undefined,
    },
  },
  test: {
    setupFiles: ["./src/setup-tests.ts"],
    browser: {
      provider: playwright(),
      enabled: true,
      instances: [{ browser: "chromium" }],
    },
    coverage: {
      provider: "v8",
      reporter: ["html", "lcov"],
      reportsDirectory: "./coverage",
      include: ["src/**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
    },
  },
}));

  System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 Intel(R) Core(TM) Ultra 7 255H
  Binaries:
    Node: 22.19.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.9.3 - C:\Program Files\nodejs\npm.CMD
    pnpm: 10.15.1 - C:\ProgramData\chocolatey\bin\pnpm.EXE <----- active
  Browsers:
    Edge: Chromium (140.0.3485.54)
  npmPackages:
    @storybook/addon-a11y: 10.0.0 => 10.0.0 
    @storybook/addon-docs: 10.0.0 => 10.0.0 
    @storybook/addon-themes: 10.0.0 => 10.0.0 
    @storybook/react-vite: 10.0.0 => 10.0.0
    eslint-plugin-storybook: 10.0.0 => 10.0.0
    storybook: 10.0.0 => 10.0.0

Additional information

No response

Create a reproduction

No response

[dosubot[bot]]

This error in Storybook 10.x with react-vite is often caused by a combination of static asset path issues, alias resolution, and Vite cache problems—especially when .storybook is inside src and static assets are served from public. Here are the most effective steps you can try:

• Make sure your staticDirs is set in .storybook/main.ts and uses forward slashes, e.g. staticDirs: ["../public"], not backslashes, to avoid Windows path truncation issues (source).
• If you use path aliases (like @), Storybook does not automatically pick up your root vite.config.ts or tsconfig.json aliases. You need to explicitly set them in a viteFinal function in .storybook/main.ts (source).
• If your config folder is inside src, set staticDirs and aliases relative to that folder. For example, if .storybook is at src/.storybook, use staticDirs: ["../../public"] and alias @ to path.resolve(__dirname, "../../src").
• If you see errors related to the Storybook cache, try disabling Vite's filesystem cache by adding core: { builder: { options: { fsCache: false } } } to your config and deleting node_modules/.cache (source).
• Avoid including the React plugin twice (in both vite.config.ts and Storybook's config), as this can cause conflicts (source).
• If you use MDX, ensure @storybook/addon-docs is in your addons array for proper ESM module resolution (source).
• For persistent dynamic import errors, you can add a custom Vite plugin in viteFinal to resolve problematic file URLs (example).

If none of these steps resolve the issue, please provide a minimal reproduction or more detailed error logs so we can help further.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}