Addon-Docs: Resolve providerImportSource to a path instead of a file:// URL

[TheSeydiCharyyev]

Closes #34545

What I did

providerImportSource for the MDX compiler was set directly from import.meta.resolve('@storybook/addon-docs/mdx-react-shim'). In Node ESM, import.meta.resolve() returns a file:// URL, and the MDX compiler uses that value verbatim as the import specifier in its output:

import { useMDXComponents as _provideComponents } from "file:///.../addon-docs/dist/mdx-react-shim.js";

Vite's vite:import-analysis plugin cannot resolve file:// URL specifiers, so every .mdx file fails to compile.

providerImportSource was the only import.meta.resolve() call in these files not wrapped in fileURLToPath() — mdx and the MDX loader in preset.ts already convert to a path. This applies the same treatment in both the Vite plugin (mdx-plugin.ts) and the webpack preset (preset.ts).

Manual testing

Minimal repro — a @storybook/react-vite project with one .mdx file, on Vite 5:

Before — storybook dev fails immediately with a vite:import-analysis error:

After — the MDX docs page renders:

What I changed

• code/addons/docs/src/mdx-plugin.ts — import fileURLToPath, wrap providerImportSource
• code/addons/docs/src/preset.ts — wrap providerImportSource (fileURLToPath already imported)

Checklist

• Verified end-to-end against a Vite 5 reproduction (before/after above)
• addon-docs compiles (yarn nx compile addon-docs)
• No new lint warnings

No unit test added: providerImportSource is build-time preset wiring around import.meta.resolve(), which is environment-dependent and not meaningfully isolatable. The end-to-end repro is the verification.

Summary by CodeRabbit

• Bug Fixes
  • MDX documentation processing now uses filesystem-style paths for provider imports, improving reliability of doc compilation.
  • Reduces path-resolution related build errors and ensures more consistent documentation rendering across environments.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 6009a069-1559-4ef1-939c-a495e8ef8b63

📥 Commits

Reviewing files that changed from the base of the PR and between 60d6bf9 and 207cc7b.

📒 Files selected for processing (2)

• code/addons/docs/src/mdx-plugin.ts
• code/addons/docs/src/preset.ts

---

📝 Walkthrough

Walkthrough

The MDX addon configuration now converts resolved module specifiers to filesystem paths using Node's fileURLToPath(import.meta.resolve(...)) when setting mdxCompileOptions.providerImportSource in both the standalone MDX plugin and the Webpack preset.

Changes

MDX Provider Import Path Format

Layer / File(s)	Summary
Convert provider import source to filesystem path code/addons/docs/src/mdx-plugin.ts, code/addons/docs/src/preset.ts	Add fileURLToPath import from node:url and apply it to convert import.meta.resolve('@storybook/addon-docs/mdx-react-shim') to a filesystem path in both the standalone plugin and Webpack preset MDX configurations.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Sidnioulz]

I could not reproduce the original issue. Creating a new React project with Vite 5, and installing Storybook 10.4 on it, I did not encounter any errors.

Could you please provide a minimal reproduction repository so I can see how to reproduce the bug and correctly test your PR? Thanks 🙏

[storybook-app-bot]

Package Benchmarks

^{Commit: 207cc7b, ran on 21 May 2026 at 15:40:42 UTC}

The following packages have significant changes to their size or dependencies:

@storybook/builder-webpack5

	Before	After	Difference
Dependency count	184	184	0
Self size	79 KB	79 KB	0 B
Dependency size	33.24 MB	33.34 MB	🚨 +94 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/ember

	Before	After	Difference
Dependency count	188	188	0
Self size	15 KB	15 KB	🚨 +18 B 🚨
Dependency size	29.96 MB	30.06 MB	🚨 +94 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/nextjs

	Before	After	Difference
Dependency count	534	534	0
Self size	662 KB	662 KB	0 B
Dependency size	61.37 MB	61.46 MB	🚨 +94 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/react-webpack5

	Before	After	Difference
Dependency count	271	271	0
Self size	23 KB	23 KB	🚨 +12 B 🚨
Dependency size	45.91 MB	46.00 MB	🚨 +94 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/server-webpack5

	Before	After	Difference
Dependency count	196	196	0
Self size	16 KB	16 KB	0 B
Dependency size	34.51 MB	34.60 MB	🚨 +94 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/preset-react-webpack

	Before	After	Difference
Dependency count	164	164	0
Self size	18 KB	18 KB	0 B
Dependency size	32.25 MB	32.34 MB	🚨 +94 KB 🚨
Bundle Size Analyzer	Link	Link

[TheSeydiCharyyev]

Minimal reproduction: https://github.com/TheSeydiCharyyev/storybook-34545-repro

1. npm install
2. npm run storybook
3. Open the Intro docs page

The Intro page fails (Failed to fetch dynamically imported module: .../src/Intro.mdx) and the dev server logs:

​ Failed to resolve import "file:///.../@storybook/addon-docs/dist/mdx-react-shim.js" from "src/Intro.mdx". Plugin: vite:import-analysis ​

package-lock.json is committed, so npm install pins the exact versions this reproduces on — Storybook 10.4, Vite 5, Node 22 (Windows). The standalone src/Intro.mdx is the trigger — it makes the MDX compiler emit the providerImportSource import as a file:// URL. A project with only .stories files won't hit it.

[Sidnioulz]

Thanks for the repro environment @TheSeydiCharyyev ❤️

I could run a canary release of the PR against it and confirm it fixes the bug. Let's merge this!