[Bug]: Failed to Resolve Import in Monorepo Setup with Storybook and Vite

[hkm-mo]

Describe the bug

I am encountering a persistent issue with Storybook in a monorepo setup using Vite as the builder. The issue manifests as a "Failed to resolve import" error when running Storybook. However, if I copy the Storybook project out of the monorepo and run it as an individual project, the issue disappears.

Monorepo Details:

Package Manager: npm workspaces

Monorepo Structure:

vue-lib/
├── packages/
│   ├── core/
│   ├── storybook/
│   ├── preview/
│   ├── docs/
├── package.json

Reproduction link

https://github.com/hkm-mo/vue-lib

Reproduction steps

1. Clone the monorepo structure.
2. Install dependencies using npm install.
3. Run Storybook using npm run dev:storybook.

System

│  Storybook Environment Info:
│

│  System:
│  OS: Windows 11 10.0.26200
│  CPU: (20) x64 12th Gen Intel(R) Core(TM) i9-12900H
│  Binaries:
│  Node: 22.22.2 - C:\tools\node-v22\node.EXE
│  npm: 10.9.7 - C:\tools\node-v22\npm.CMD <----- active
│  Browsers:
│  Chrome: 146.0.7680.165
│  Edge: Chromium (140.0.3485.54)
│  Firefox: 149.0 - C:\Program Files\Mozilla Firefox\firefox.exe
│  npmPackages:
│  @storybook/addon-a11y: ^10.3.3 => 10.3.3
│  @storybook/addon-docs: ^10.3.3 => 10.3.3
│  @storybook/addon-onboarding: ^10.3.3 => 10.3.3
│  @storybook/addon-vitest: ^10.3.3 => 10.3.3
│  @storybook/builder-vite: ^10.3.3 => 10.3.3
│  @storybook/vue3-vite: ^10.3.3 => 10.3.3
│  storybook: ^10.3.3 => 10.3.3

Additional context

No response

[dosubot]

Hi @hkm-mo! I'm Dosu and I’m helping the storybook team.

This is a common issue in Storybook 10.x monorepo setups. The MDX plugin uses import.meta.resolve to generate import paths, which results in file:// URLs that Vite cannot resolve when .storybook is in a subdirectory [1].

Workaround: Add a custom Vite plugin to your .storybook/main.ts that rewrites these URLs:

import type { StorybookConfig } from '@storybook/vue3-vite';
import { dirname } from "path";
import { fileURLToPath } from "url";

function getAbsolutePath(value: string) {
  return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
}

const config: StorybookConfig = {
  stories: [
    "../stories/*.mdx",
    "../stories/**/*.mdx",
  ],
  addons: [
    getAbsolutePath('@storybook/addon-a11y'),
    getAbsolutePath('@storybook/addon-docs'),
    getAbsolutePath('@storybook/addon-onboarding'),
  ],
  framework: getAbsolutePath('@storybook/vue3-vite'),
  core: {
    builder: '@storybook/builder-vite',
  },
  viteFinal: async (config) => {
    return {
      ...config,
      plugins: [
        ...(config.plugins || []),
        {
          name: "fix-mdx-react-shim",
          enforce: "pre",
          resolveId(source) {
            if (source.startsWith("file://") && source.includes("mdx-react-shim.js")) {
              return new URL(source).pathname;
            }
            return null;
          },
        },
      ],
    };
  },
};

export default config;

This workaround is widely used for monorepo setups with npm workspaces, Yarn workspaces, and pnpm .

To reply, just mention @dosu.

---

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

   

[hkm-mo]

Hi @dosu,

It's not working. And I got "Pre-transform error".

[dosubot]

Could you share the full error message you're seeing? Specifically:

1. The complete "Pre-transform error" message
2. Whether you updated your reproduction repo with the workaround (so I can take a look)

Also, please try clearing your caches before running Storybook again:

• Delete node_modules/.cache
• Delete any .storybook cache directories
• Run npm install fresh

If the error mentions mdx-react-shim.js or file:// URLs, the workaround may need a slight adjustment depending on your exact setup.

To reply, just mention @dosu.

---

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

   

[hkm-mo]

Hi @dosu,

The full error message is:

Pre-transform error: Failed to load url
│  /C:/Users/user/Projects/vueLib/node_modules/@storybook/addon-docs/dist/mdx-react-shim.js
│  (resolved id:
│  /C:/Users/user/Projects/vueLib/node_modules/@storybook/addon-docs/dist/mdx-react-shim.js)
│  in C:/Users/user/Projects/vueLib/packages/storybook/stories/Configure.mdx. Does
│  the file exist?

I am sure that the C:/Users/user/Projects/vueLib/node_modules/@storybook/addon-docs/dist/mdx-react-shim.js file is exists.

[hkm-mo]

Hi @dosu,

Finally, I found the solution for Windows. I will test it in Linux later.

I updated the .storybook/main.ts for workaround.

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

import { dirname } from "path"

import { fileURLToPath } from "url"

/**
* This function is used to resolve the absolute path of a package.
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
*/
function getAbsolutePath(value: string) {
  return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)))
}
const config: StorybookConfig = {
  "stories": [
    "../stories/*.mdx",
    "../stories/**/*.mdx",
    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"
  ],
  "addons": [
    getAbsolutePath('@storybook/addon-a11y'),
    getAbsolutePath('@storybook/addon-docs'),
    getAbsolutePath('@storybook/addon-onboarding'),
  ],
  "framework": getAbsolutePath('@storybook/vue3-vite'),
  core: {
    builder: '@storybook/builder-vite',
  },
  viteFinal: async (config) => {
    return {
      ...config,
      plugins: [
        ...(config.plugins || []),
        {
          name: "fix-mdx-react-shim",
          enforce: "pre",
          resolveId(source) {
            if (source.startsWith("file:///") && source.includes("mdx-react-shim.js")) {
              console.log(`Resolving ${source} to ${source.substring(8)}`);
              return source.substring(8);
            }
            return null;
          },
        },
      ],
    };
  },
};
export default config;

[dosubot]

Thanks for sharing your solution! The key difference for Windows is using source.substring(8) instead of new URL(source).pathname — on Windows, new URL("file:///C:/path").pathname returns /C:/path with a leading slash, which breaks path resolution.

Your approach of stripping the file:/// prefix directly avoids this issue. Glad you got it working, and please let us know how the Linux testing goes!

To reply, just mention @dosu.

---

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

   

[hkm-mo]

Hi @dosu,

To support both Windows and Linux, I updated .storybook/main.ts.

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

import { dirname } from "path"

import { fileURLToPath } from "url"

/**
* This function is used to resolve the absolute path of a package.
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
*/
function getAbsolutePath(value: string) {
  return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)))
}
const config: StorybookConfig = {
  "stories": [
    "../stories/*.mdx",
    "../stories/**/*.mdx",
    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"
  ],
  "addons": [
    getAbsolutePath('@storybook/addon-a11y'),
    getAbsolutePath('@storybook/addon-docs'),
    getAbsolutePath('@storybook/addon-onboarding'),
  ],
  "framework": getAbsolutePath('@storybook/vue3-vite'),
  core: {
    builder: '@storybook/builder-vite',
  },
  viteFinal: async (config) => {
    return {
      ...config,
      plugins: [
        ...(config.plugins || []),
        {
          name: "fix-mdx-react-shim",
          enforce: "pre",
          resolveId(source) {
            if (source.startsWith("file:///") && source.includes("mdx-react-shim.js")) {
              const systemPath = fileURLToPath(source);
              console.log(`Resolving ${source} to ${systemPath}`);
              return systemPath;
            }
            return null;
          },
        },
      ],
    };
  },
};
export default config;

Alternatively, you may update vite.config.ts, add extra fix-mdx-react-shim plug-in:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve, dirname } from 'path';
import { fileURLToPath } from 'node:url';

const root = typeof __dirname !== 'undefined' ? __dirname : dirname(fileURLToPath(import.meta.url));

// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
export default defineConfig({
  publicDir: './storybook-static',
  resolve: {
    dedupe: ['vue'],
    preserveSymlinks: true,
  },
  plugins: [
    vue(),
    {
      name: "fix-mdx-react-shim",
      enforce: "pre",
      resolveId(source) {
        if (source.startsWith("file:///") && source.includes("mdx-react-shim.js")) {
          const systemPath = fileURLToPath(source);
          console.log(`Resolving ${source} to ${systemPath}`);
          return systemPath;
        }
        return null;
      },
    },
  ],
  build: {
    rollupOptions: {
      // Externalize dependencies that shouldn't be bundled
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
});

[dosubot]

Great work! Using fileURLToPath(source) is the correct cross-platform approach — it handles both Windows (file:///C:/...) and Linux/macOS (file:///home/...) paths properly.

Thanks for sharing both options (.storybook/main.ts and vite.config.ts). This should help others hitting the same issue in monorepo setups.

To reply, just mention @dosu.

---

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