tajo · BartvanEijkelenburg · May 26, 2026
diff --git a/.changeset/violet-trees-jam.md b/.changeset/violet-trees-jam.md
@@ -0,0 +1,5 @@
+---
+"@ladle/react": patch
+---
+
+Upgrade the embedded Vite dependency to Vite 8 and align the default React plugin and Node.js engine range with Vite's current requirements.
diff --git a/e2e/babel/package.json b/e2e/babel/package.json
@@ -16,7 +16,7 @@
     "@ladle/playwright-config": "workspace:*",
     "@ladle/react": "workspace:*",
     "@playwright/test": "^1.49.1",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^6.0.2",
     "cross-env": "^7.0.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

diff --git a/package.json b/package.json
@@ -55,7 +55,7 @@
     "typescript-eslint": "^8.18.1"
   },
   "engines": {
-    "node": ">=22.0.0"
+    "node": ">=22.12.0"
   },
   "pnpm": {
     "peerDependencyRules": {

diff --git a/packages/ladle/lib/app/src/story.tsx b/packages/ladle/lib/app/src/story.tsx
@@ -40,6 +40,14 @@ const StoryFrame = ({
   );
 };
 
+const StoryLoaded = ({ story }: { story: string }) => {
+  React.useEffect(() => {
+    document.documentElement.setAttribute("data-storyloaded", "");
+    return () => document.documentElement.removeAttribute("data-storyloaded");
+  }, [story]);
+  return null;
+};
+
 const Story = ({
   globalState,
   dispatch,
@@ -97,45 +105,48 @@ const Story = ({
   return (
     <ErrorBoundary>
       <React.Suspense fallback={<Ring />}>
-        <StoryFrame
-          active={iframeActive}
-          story={globalState.story}
-          width={width}
-          mode={globalState.mode}
-        >
-          <SynchronizeHead
-            active={
-              (iframeActive || width > 0) &&
-              globalState.mode !== ModeState.Preview
-            }
-            rtl={globalState.rtl}
+        <>
+          <StoryFrame
+            active={iframeActive}
+            story={globalState.story}
             width={width}
+            mode={globalState.mode}
           >
-            <MDXProvider
-              components={{
-                code: (props) => (
-                  <CodeHighlight
-                    {...(props as any)}
-                    theme={globalState.theme}
-                  />
-                ),
-              }}
+            <SynchronizeHead
+              active={
+                (iframeActive || width > 0) &&
+                globalState.mode !== ModeState.Preview
+              }
+              rtl={globalState.rtl}
+              width={width}
             >
-              <Provider
-                config={config}
-                globalState={globalState}
-                dispatch={dispatch}
-                storyMeta={storyDataMeta}
+              <MDXProvider
+                components={{
+                  code: (props) => (
+                    <CodeHighlight
+                      {...(props as any)}
+                      theme={globalState.theme}
+                    />
+                  ),
+                }}
               >
-                {storyData ? (
-                  React.createElement(storyData.component)
-                ) : (
-                  <StoryNotFound activeStory={globalState.story} />
-                )}
-              </Provider>
-            </MDXProvider>
-          </SynchronizeHead>
-        </StoryFrame>
+                <Provider
+                  config={config}
+                  globalState={globalState}
+                  dispatch={dispatch}
+                  storyMeta={storyDataMeta}
+                >
+                  {storyData ? (
+                    React.createElement(storyData.component)
+                  ) : (
+                    <StoryNotFound activeStory={globalState.story} />
+                  )}
+                </Provider>
+              </MDXProvider>
+            </SynchronizeHead>
+          </StoryFrame>
+          <StoryLoaded story={globalState.story} />
+        </>
       </React.Suspense>
     </ErrorBoundary>
   );

diff --git a/packages/ladle/lib/cli/vite-plugin/mdx-plugin.js b/packages/ladle/lib/cli/vite-plugin/mdx-plugin.js
@@ -43,6 +43,7 @@ const unknownBackticks = (code) => {
 function mdxPlugin(opts) {
   /** @type any */
   let reactPluginTransform;
+  let usesReactPluginBabel;
   let usesReactPluginSwc;
   const isDev = opts.mode === "development";
   const { process } = createFormatAwareProcessors({
@@ -65,10 +66,14 @@ function mdxPlugin(opts) {
     name: "ladle:stories-mdx",
     enforce: "pre",
     configResolved: ({ plugins }) => {
-      reactPluginTransform = plugins.find(
-        (p) =>
-          p.name === "vite:react-babel" && typeof p.transform === "function",
-      )?.transform;
+      const reactPluginBabel = plugins.find(
+        (p) => p.name === "vite:react-babel",
+      );
+      reactPluginTransform =
+        typeof reactPluginBabel?.transform === "function"
+          ? reactPluginBabel.transform
+          : undefined;
+      usesReactPluginBabel = Boolean(reactPluginBabel);
       usesReactPluginSwc = plugins.some((p) => p.name === "vite:react-swc");
     },
     async transform(value, path) {
@@ -104,17 +109,21 @@ function mdxPlugin(opts) {
         const filename = `${filepath}${
           querystring ? "&ext=.jsx" : "?ext=.jsx"
         }`;
-        if (!usesReactPluginSwc && !reactPluginTransform) {
+        if (!usesReactPluginSwc && !usesReactPluginBabel) {
           throw new Error(
             `You need to install and use @vitejs/plugin-react-swc or @vitejs/plugin-react so ${filename} can be compiled.`,
           );
         }
+        const transformed = await transformWithEsbuild(code, filename);
         if (reactPluginTransform) {
           return await reactPluginTransform(
-            (await transformWithEsbuild(code, filename)).code,
+            transformed.code,
             filepath.replace(".mdx", ".jsx"),
           );
         }
+        if (usesReactPluginBabel) {
+          return transformed.code;
+        }
         return { code, map: compiled.map };
       }
     },

diff --git a/packages/ladle/lib/cli/vite-plugin/vite-plugin.js b/packages/ladle/lib/cli/vite-plugin/vite-plugin.js
@@ -83,12 +83,8 @@ function ladlePlugin(config, configFolder, mode) {
           });
         }`
           : "";
-        // make sure the `loaded` attr is set even if the story is loaded through iframe
-        const setLoadedAttr = `typeof window !== 'undefined' &&
-          window.document &&
-          window.document.createElement && document.documentElement.setAttribute("data-storyloaded", "");`;
         return {
-          code: `${code}\n${setLoadedAttr}\n${invalidateHmr}\n${watcherImport}\nif (import.meta.hot) {
+          code: `${code}\n${invalidateHmr}\n${watcherImport}\nif (import.meta.hot) {
           import.meta.hot.accept(() => {
             storyUpdated();
           });

diff --git a/packages/ladle/package.json b/packages/ladle/package.json
@@ -46,8 +46,8 @@
     "@ladle/react-context": "^1.0.1",
     "@mdx-js/mdx": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
-    "@vitejs/plugin-react": "^4.3.4",
-    "@vitejs/plugin-react-swc": "^3.7.2",
+    "@vitejs/plugin-react": "^6.0.2",
+    "@vitejs/plugin-react-swc": "^4.3.1",
     "axe-core": "^4.10.2",
     "boxen": "^8.0.1",
     "chokidar": "^4.0.3",
@@ -72,7 +72,7 @@
     "remark-gfm": "^4.0.0",
     "source-map": "^0.7.4",
     "vfile": "^6.0.3",
-    "vite": "^6.0.5",
+    "vite": "^8.0.14",
     "vite-tsconfig-paths": "^5.1.4"
   },
   "peerDependencies": {
@@ -91,14 +91,14 @@
     "@types/express": "^5.0.0",
     "@types/koa": "^2.15.0",
     "@types/lodash.merge": "^4.6.9",
-    "@types/node": "^22.10.2",
+    "@types/node": "^22.19.19",
     "@types/ws": "^8.5.13",
     "cross-env": "^7.0.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "vitest": "^2.1.8"
   },
   "engines": {
-    "node": ">=20.0.0"
+    "node": "^20.19.0 || >=22.12.0"
   }
 }