dinou 5.0.2 → 5.0.3

package/CHANGELOG.md

@@ -5,6 +5,15 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/).
 
+## [5.0.3] - 2026-07-09
+
+### Added
+- **Native React 19 Server Actions & `callServer` Support**: Enabled full integration for submitting forms directly from Server Components using the native `<form action={ServerAction}>` pattern.
+  - **Client-side Integration**: Implemented the global `callServer` option hook within `createFromFetch` in both the ESM client (`client.jsx`) and Webpack client (`client-webpack.jsx`). React now intercepts form submits and marshals arguments through Dinou's `createServerFunctionProxy` seamlessly.
+  - **Server-side Module Loader Integration**: Updated `babel-esm-loader.js` to automatically scan `"use server"` files and register exported functions using React's `registerServerReference` runtime call.
+- **Route-Level Soft Navigation Error Recovery**: Integrated client-side React `ErrorBoundary` support wrapping the router context. If rendering crashes during a soft navigation or initial mount (on either Server or Client components), the router captures the failure and dynamically fetches `/____rsc_payload_error____` to render the custom slot-based error page fallback, avoiding white screens and React root unmounts.
+
+
 ## [5.0.2] - 2026-07-08
 
 ### 🛡️ Security & Route Control

package/dinou/core/babel-esm-loader.js

@@ -6,6 +6,8 @@ const createScopedName = require("./createScopedName");
 const { extensionsWithDot } = require("./asset-extensions.js");
 const { getAbsPathWithExt } = require("./get-abs-path-with-ext.js");
 
+const { normalizePathCase } = require("./path-utils.js");
+
 const Module = require("module");
 const originalResolveFilename = Module._resolveFilename;
 const isWebpack = process.env.DINOU_BUILD_TOOL === "webpack";
@@ -90,7 +92,10 @@ exports.load = async function load(url, context, defaultLoad) {
     } catch (e) {
       throw e;
     }
-    const rel = path.relative(process.cwd(), filename);
+    const rel = path.relative(
+      normalizePathCase(process.cwd()),
+      normalizePathCase(filename)
+    );
     const source = fs.readFileSync(filename, "utf-8");
     const urlToReturn = pathToFileURL(filename).href;
 
@@ -144,6 +149,48 @@ exports.load = async function load(url, context, defaultLoad) {
       };
     }
 
+    const { useServerRegex } = require("../constants.js");
+    const hasUseServer = useServerRegex.test(source);
+
+    if (isReactServer && hasUseServer) {
+      const parseExports = require("./parse-exports.js");
+      const exports = parseExports(source);
+
+      const { code } = await transformAsync(source, {
+        filename,
+        presets: [
+          ["@babel/preset-react", { runtime: "automatic" }],
+          "@babel/preset-typescript",
+        ],
+        sourceMaps: "inline",
+        ast: false,
+      });
+
+      let newSrc = code + "\n\n";
+
+      if (!isWebpack) {
+        const packageJsonPath = require.resolve("@roggc/react-server-dom-esm/package.json");
+        const serverNodePath = path.join(path.dirname(packageJsonPath), "server.node.js");
+        const serverNodeUrl = pathToFileURL(serverNodePath).href;
+        newSrc += `import pkgServer from ${JSON.stringify(serverNodeUrl)};\n`;
+        newSrc += 'const {registerServerReference} = pkgServer;\n';
+      }
+
+      const relativeFileUrl = "file:///" + rel.replace(/\\/g, "/");
+      for (const name of exports) {
+        if (name !== 'default') {
+          newSrc += `registerServerReference(${name}, ${JSON.stringify(relativeFileUrl)}, ${JSON.stringify(name)});\n`;
+        }
+      }
+
+      return {
+        format: "module",
+        source: newSrc,
+        shortCircuit: true,
+        url: urlToReturn,
+      };
+    }
+
     if (ext === ".js") {
       return {
         format: "module",

package/dinou/core/client-error-webpack.jsx

@@ -5,11 +5,13 @@ import {
   useTransition,
   useLayoutEffect,
   useMemo,
+  Component,
 } from "react";
 import { createFromFetch } from "react-server-dom-webpack/client";
 import { hydrateRoot } from "react-dom/client";
 import { RouterContext } from "./navigation.js";
 import { resolveUrl, isExternalUrl } from "./navigation-utils.js";
+import { createServerFunctionProxy } from "./server-function-proxy-webpack.js";
 
 // ====================================================================
 // 1. GLOBAL STATE (Outside the component)
@@ -38,30 +40,182 @@ const isHashChangeOnly = (finalPath) => {
   );
 };
 
-const getRSCPayload = (rscKey) => {
+let isInitialErrorLoad = true;
+
+const getRSCPayload = (rscKey, isPrefetch = false) => {
   const url = rscKey.split("::")[0];
-  // Important: url must already be normalized here
+  // 1. Check Idempotence (Avoids the infinite loop of React)
   if (cache.has(url)) return cache.get(url);
 
-  const content = createFromFetch(
-    fetch("/____rsc_payload_error____" + url, {
+  let promise;
+  if (isInitialErrorLoad && url === getCurrentRoute()) {
+    isInitialErrorLoad = false;
+    const payloadUrl = "/____rsc_payload_error____" + url;
+    promise = createFromFetch(
+      fetch(payloadUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          error: {
+            message: window.__DINOU_ERROR_MESSAGE__ || "Unknown Error",
+            stack: window.__DINOU_ERROR_STACK__,
+            name: window.__DINOU_ERROR_NAME__,
+          },
+        }),
+      }).then((res) => {
+        if (res.headers.has("x-rsc-redirect")) {
+          const redirectUrl = res.headers.get("x-rsc-redirect");
+          cache.delete(url);
+          if (!isPrefetch) {
+            if (window.__DINOU_ROUTER_NAVIGATE__) {
+              window.__DINOU_ROUTER_NAVIGATE__(redirectUrl, { replace: true });
+            } else {
+              window.location.href = redirectUrl;
+            }
+          }
+          return new Promise(() => {});
+        }
+        return res;
+      }),
+      {
+        callServer: async (id, args) => {
+          const proxy = createServerFunctionProxy(id);
+          return proxy(...args);
+        }
+      }
+    );
+  } else {
+    // Normal client.jsx load logic!
+    let payloadUrl = "/____rsc_payload____" + url;
+    const buildId = window.__DINOU_BUILD_ID__;
+    if (buildId) {
+      payloadUrl += (payloadUrl.includes("?") ? "&" : "?") + "buildId=" + buildId;
+      window.__DINOU_BUILD_ID__ = undefined;
+    }
+
+    promise = createFromFetch(
+      fetch(payloadUrl).then((res) => {
+        if (res.headers.has("x-rsc-redirect")) {
+          const redirectUrl = res.headers.get("x-rsc-redirect");
+          cache.delete(url);
+          if (!isPrefetch) {
+            if (window.__DINOU_ROUTER_NAVIGATE__) {
+              window.__DINOU_ROUTER_NAVIGATE__(redirectUrl, { replace: true });
+            } else {
+              window.location.href = redirectUrl;
+            }
+          }
+          return new Promise(() => {});
+        }
+        return res;
+      }),
+      {
+        callServer: async (id, args) => {
+          const proxy = createServerFunctionProxy(id);
+          return proxy(...args);
+        }
+      }
+    );
+  }
+
+  cache.set(url, promise);
+  return promise;
+};
+
+const getErrorRSCPayload = (route, error) => {
+  const url = route.split("::")[0];
+  const cacheKey = `error::${url}::${error.message || String(error)}`;
+  if (cache.has(cacheKey)) {
+    return cache.get(cacheKey);
+  }
+
+  const payloadUrl = "/____rsc_payload_error____" + url;
+  const promise = createFromFetch(
+    fetch(payloadUrl, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
         error: {
-          message: window.__DINOU_ERROR_MESSAGE__ || "Unknown Error",
-          stack: window.__DINOU_ERROR_STACK__,
-          name: window.__DINOU_ERROR_NAME__,
+          message: error.message || "Unknown Error",
+          name: error.name,
+          stack: error.stack,
         },
       }),
+    }).then((res) => {
+      if (res.headers.has("x-rsc-redirect")) {
+        const redirectUrl = res.headers.get("x-rsc-redirect");
+        cache.delete(cacheKey);
+        if (window.__DINOU_ROUTER_NAVIGATE__) {
+          window.__DINOU_ROUTER_NAVIGATE__(redirectUrl, { replace: true });
+        } else {
+          window.location.href = redirectUrl;
+        }
+        return new Promise(() => {});
+      }
+      return res;
     }),
+    {
+      callServer: async (id, args) => {
+        const proxy = createServerFunctionProxy(id);
+        return proxy(...args);
+      }
+    }
   );
-  cache.set(url, content);
-  return content;
+  cache.set(cacheKey, promise);
+  return promise;
 };
 
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error("[Dinou] ErrorBoundary caught error:", error, errorInfo);
+    if (this.props.onError) {
+      this.props.onError(error);
+    }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback(this.state.error);
+      }
+      const isDev = process.env.NODE_ENV !== "production";
+      return (
+        <div style={{ padding: "20px", fontFamily: "sans-serif" }}>
+          <h2>Application Error</h2>
+          <p>An unexpected error occurred on the client.</p>
+          <pre style={{ backgroundColor: "#f5f5f5", padding: "15px", borderRadius: "5px", overflowX: "auto" }}>
+            {isDev ? (
+              <>
+                <div style={{ fontWeight: "bold", marginBottom: "10px" }}>
+                  {this.state.error?.name || "Error"}: {this.state.error?.message || String(this.state.error)}
+                </div>
+                <div>{this.state.error?.stack}</div>
+              </>
+            ) : (
+              this.state.error?.message || String(this.state.error)
+            )}
+          </pre>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+
 // ====================================================================
 // 3. ROUTER COMPONENT
 // ====================================================================
@@ -71,18 +225,7 @@ function Router() {
   const [isPopState, setIsPopState] = useState(false);
   const [isPending, startTransition] = useTransition();
   const [version, setVersion] = useState(0);
-
-  // 🔌 EFFECT 1: Expose Global Prefetch
-  useEffect(() => {
-    window.__DINOU_PREFETCH__ = (url) => {
-      // 🛡️ PREFETCH PROTECTION: If it's a local hash, do nothing
-      if (isHashChangeOnly(url)) return;
-      getRSCPayload(url);
-    };
-
-    // Hydration
-    document.body.setAttribute("data-hydrated", "true");
-  }, []); // Only on mount
+  const [navError, setNavError] = useState(null);
 
   // 🧭 NAVIGATE FUNCTION (Core Logic)
   const navigate = (href, options = {}) => {
@@ -126,9 +269,30 @@ function Router() {
     startTransition(() => {
       setIsPopState(false);
       setRoute(finalPath);
+      setNavError(null);
     });
   };
 
+  // 🔌 EFFECT 1: Expose Global Prefetch & Navigation
+  useEffect(() => {
+    window.__DINOU_PREFETCH__ = (url) => {
+      // 🛡️ PREFETCH PROTECTION: If it's a local hash, do nothing
+      if (isHashChangeOnly(url)) return;
+      getRSCPayload(url, true);
+    };
+
+    window.__DINOU_ROUTER_NAVIGATE__ = navigate;
+
+    // Hydration
+    document.body.setAttribute("data-hydrated", "true");
+
+    return () => {
+      if (window.__DINOU_ROUTER_NAVIGATE__ === navigate) {
+        window.__DINOU_ROUTER_NAVIGATE__ = undefined;
+      }
+    };
+  }, [navigate]);
+
   const back = () => window.history.back();
   const forward = () => window.history.forward();
   const refresh = () => {
@@ -142,6 +306,7 @@ function Router() {
     startTransition(() => {
       // 3. Increment version to force re-execution of useMemo
       setVersion((v) => v + 1);
+      setNavError(null);
     });
   };
 
@@ -188,6 +353,7 @@ function Router() {
       startTransition(() => {
         setIsPopState(true);
         setRoute(target);
+        setNavError(null);
       });
     };
 
@@ -233,7 +399,7 @@ function Router() {
 
   // RSC Logic
   const rscKey = route + "::" + version;
-  const content = getRSCPayload(rscKey);
+  const content = navError ? getErrorRSCPayload(route, navError) : getRSCPayload(rscKey);
 
   const contextValue = useMemo(
     () => ({
@@ -249,7 +415,12 @@ function Router() {
 
   return (
     <RouterContext.Provider value={contextValue}>
-      {use(content)}
+      <ErrorBoundary
+        key={navError ? "error" : "normal"}
+        onError={setNavError}
+      >
+        {use(content)}
+      </ErrorBoundary>
     </RouterContext.Provider>
   );
 }

package/dinou/core/client-error.jsx

@@ -5,11 +5,13 @@ import {
   useTransition,
   useLayoutEffect,
   useMemo,
+  Component,
 } from "react";
 import { createFromFetch } from "@roggc/react-server-dom-esm/client";
 import { hydrateRoot } from "react-dom/client";
 import { RouterContext } from "./navigation.js";
 import { resolveUrl, isExternalUrl } from "./navigation-utils.js";
+import { createServerFunctionProxy } from "./server-function-proxy.js";
 
 // ====================================================================
 // 1. GLOBAL STATE (Outside the component)
@@ -38,30 +40,182 @@ const isHashChangeOnly = (finalPath) => {
   );
 };
 
-const getRSCPayload = (rscKey) => {
+let isInitialErrorLoad = true;
+
+const getRSCPayload = (rscKey, isPrefetch = false) => {
   const url = rscKey.split("::")[0];
-  // Important: url must already be normalized here
+  // 1. Check Idempotence (Avoids the infinite loop of React)
   if (cache.has(url)) return cache.get(url);
 
-  const content = createFromFetch(
-    fetch("/____rsc_payload_error____" + url, {
+  let promise;
+  if (isInitialErrorLoad && url === getCurrentRoute()) {
+    isInitialErrorLoad = false;
+    const payloadUrl = "/____rsc_payload_error____" + url;
+    promise = createFromFetch(
+      fetch(payloadUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          error: {
+            message: window.__DINOU_ERROR_MESSAGE__ || "Unknown Error",
+            stack: window.__DINOU_ERROR_STACK__,
+            name: window.__DINOU_ERROR_NAME__,
+          },
+        }),
+      }).then((res) => {
+        if (res.headers.has("x-rsc-redirect")) {
+          const redirectUrl = res.headers.get("x-rsc-redirect");
+          cache.delete(url);
+          if (!isPrefetch) {
+            if (window.__DINOU_ROUTER_NAVIGATE__) {
+              window.__DINOU_ROUTER_NAVIGATE__(redirectUrl, { replace: true });
+            } else {
+              window.location.href = redirectUrl;
+            }
+          }
+          return new Promise(() => {});
+        }
+        return res;
+      }),
+      {
+        callServer: async (id, args) => {
+          const proxy = createServerFunctionProxy(id);
+          return proxy(...args);
+        }
+      }
+    );
+  } else {
+    // Normal client.jsx load logic!
+    let payloadUrl = "/____rsc_payload____" + url;
+    const buildId = window.__DINOU_BUILD_ID__;
+    if (buildId) {
+      payloadUrl += (payloadUrl.includes("?") ? "&" : "?") + "buildId=" + buildId;
+      window.__DINOU_BUILD_ID__ = undefined;
+    }
+
+    promise = createFromFetch(
+      fetch(payloadUrl).then((res) => {
+        if (res.headers.has("x-rsc-redirect")) {
+          const redirectUrl = res.headers.get("x-rsc-redirect");
+          cache.delete(url);
+          if (!isPrefetch) {
+            if (window.__DINOU_ROUTER_NAVIGATE__) {
+              window.__DINOU_ROUTER_NAVIGATE__(redirectUrl, { replace: true });
+            } else {
+              window.location.href = redirectUrl;
+            }
+          }
+          return new Promise(() => {});
+        }
+        return res;
+      }),
+      {
+        callServer: async (id, args) => {
+          const proxy = createServerFunctionProxy(id);
+          return proxy(...args);
+        }
+      }
+    );
+  }
+
+  cache.set(url, promise);
+  return promise;
+};
+
+const getErrorRSCPayload = (route, error) => {
+  const url = route.split("::")[0];
+  const cacheKey = `error::${url}::${error.message || String(error)}`;
+  if (cache.has(cacheKey)) {
+    return cache.get(cacheKey);
+  }
+
+  const payloadUrl = "/____rsc_payload_error____" + url;
+  const promise = createFromFetch(
+    fetch(payloadUrl, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
         error: {
-          message: window.__DINOU_ERROR_MESSAGE__ || "Unknown Error",
-          stack: window.__DINOU_ERROR_STACK__,
-          name: window.__DINOU_ERROR_NAME__,
+          message: error.message || "Unknown Error",
+          name: error.name,
+          stack: error.stack,
         },
       }),
+    }).then((res) => {
+      if (res.headers.has("x-rsc-redirect")) {
+        const redirectUrl = res.headers.get("x-rsc-redirect");
+        cache.delete(cacheKey);
+        if (window.__DINOU_ROUTER_NAVIGATE__) {
+          window.__DINOU_ROUTER_NAVIGATE__(redirectUrl, { replace: true });
+        } else {
+          window.location.href = redirectUrl;
+        }
+        return new Promise(() => {});
+      }
+      return res;
     }),
+    {
+      callServer: async (id, args) => {
+        const proxy = createServerFunctionProxy(id);
+        return proxy(...args);
+      }
+    }
   );
-  cache.set(url, content);
-  return content;
+  cache.set(cacheKey, promise);
+  return promise;
 };
 
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error("[Dinou] ErrorBoundary caught error:", error, errorInfo);
+    if (this.props.onError) {
+      this.props.onError(error);
+    }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback(this.state.error);
+      }
+      const isDev = process.env.NODE_ENV !== "production";
+      return (
+        <div style={{ padding: "20px", fontFamily: "sans-serif" }}>
+          <h2>Application Error</h2>
+          <p>An unexpected error occurred on the client.</p>
+          <pre style={{ backgroundColor: "#f5f5f5", padding: "15px", borderRadius: "5px", overflowX: "auto" }}>
+            {isDev ? (
+              <>
+                <div style={{ fontWeight: "bold", marginBottom: "10px" }}>
+                  {this.state.error?.name || "Error"}: {this.state.error?.message || String(this.state.error)}
+                </div>
+                <div>{this.state.error?.stack}</div>
+              </>
+            ) : (
+              this.state.error?.message || String(this.state.error)
+            )}
+          </pre>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+
 // ====================================================================
 // 3. ROUTER COMPONENT
 // ====================================================================
@@ -71,18 +225,7 @@ function Router() {
   const [isPopState, setIsPopState] = useState(false);
   const [isPending, startTransition] = useTransition();
   const [version, setVersion] = useState(0);
-
-  // 🔌 EFFECT 1: Expose Global Prefetch
-  useEffect(() => {
-    window.__DINOU_PREFETCH__ = (url) => {
-      // 🛡️ PREFETCH PROTECTION: If it's a local hash, do nothing
-      if (isHashChangeOnly(url)) return;
-      getRSCPayload(url);
-    };
-
-    // Hydration
-    document.body.setAttribute("data-hydrated", "true");
-  }, []); // Only on mount
+  const [navError, setNavError] = useState(null);
 
   // 🧭 NAVIGATE FUNCTION (Core Logic)
   const navigate = (href, options = {}) => {
@@ -126,9 +269,30 @@ function Router() {
     startTransition(() => {
       setIsPopState(false);
       setRoute(finalPath);
+      setNavError(null);
     });
   };
 
+  // 🔌 EFFECT 1: Expose Global Prefetch & Navigation
+  useEffect(() => {
+    window.__DINOU_PREFETCH__ = (url) => {
+      // 🛡️ PREFETCH PROTECTION: If it's a local hash, do nothing
+      if (isHashChangeOnly(url)) return;
+      getRSCPayload(url, true);
+    };
+
+    window.__DINOU_ROUTER_NAVIGATE__ = navigate;
+
+    // Hydration
+    document.body.setAttribute("data-hydrated", "true");
+
+    return () => {
+      if (window.__DINOU_ROUTER_NAVIGATE__ === navigate) {
+        window.__DINOU_ROUTER_NAVIGATE__ = undefined;
+      }
+    };
+  }, [navigate]);
+
   const back = () => window.history.back();
   const forward = () => window.history.forward();
   const refresh = () => {
@@ -142,6 +306,7 @@ function Router() {
     startTransition(() => {
       // 3. Increment version to force re-execution of useMemo
       setVersion((v) => v + 1);
+      setNavError(null);
     });
   };
 
@@ -188,6 +353,7 @@ function Router() {
       startTransition(() => {
         setIsPopState(true);
         setRoute(target);
+        setNavError(null);
       });
     };
 
@@ -233,7 +399,7 @@ function Router() {
 
   // RSC Logic
   const rscKey = route + "::" + version;
-  const content = getRSCPayload(rscKey);
+  const content = navError ? getErrorRSCPayload(route, navError) : getRSCPayload(rscKey);
 
   const contextValue = useMemo(
     () => ({
@@ -249,7 +415,12 @@ function Router() {
 
   return (
     <RouterContext.Provider value={contextValue}>
-      {use(content)}
+      <ErrorBoundary
+        key={navError ? "error" : "normal"}
+        onError={setNavError}
+      >
+        {use(content)}
+      </ErrorBoundary>
     </RouterContext.Provider>
   );
 }

package/dinou/core/client-webpack.jsx

@@ -5,11 +5,13 @@ import {
   useTransition,
   useLayoutEffect,
   useMemo,
+  Component,
 } from "react";
 import { createFromFetch } from "react-server-dom-webpack/client";
 import { hydrateRoot } from "react-dom/client";
 import { RouterContext } from "./navigation.js";
 import { resolveUrl, isExternalUrl } from "./navigation-utils.js";
+import { createServerFunctionProxy } from "./server-function-proxy-webpack.js";
 
 // ====================================================================
 // 1. GLOBAL STATE (Outside the component)
@@ -81,11 +83,109 @@ const getRSCPayload = (rscKey, isPrefetch = false) => {
       }
       return res;
     }),
+    {
+      callServer: async (id, args) => {
+        const proxy = createServerFunctionProxy(id);
+        return proxy(...args);
+      }
+    }
   );
   cache.set(url, promise); // <--- KEY TO AVOID LOOP
   return promise;
 };
 
+const getErrorRSCPayload = (route, error) => {
+  const url = route.split("::")[0];
+  const cacheKey = `error::${url}::${error.message || String(error)}`;
+  if (cache.has(cacheKey)) {
+    return cache.get(cacheKey);
+  }
+
+  const payloadUrl = "/____rsc_payload_error____" + url;
+  const promise = createFromFetch(
+    fetch(payloadUrl, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        error: {
+          message: error.message || "Unknown Error",
+          name: error.name,
+          stack: error.stack,
+        },
+      }),
+    }).then((res) => {
+      if (res.headers.has("x-rsc-redirect")) {
+        const redirectUrl = res.headers.get("x-rsc-redirect");
+        cache.delete(cacheKey);
+        if (window.__DINOU_ROUTER_NAVIGATE__) {
+          window.__DINOU_ROUTER_NAVIGATE__(redirectUrl, { replace: true });
+        } else {
+          window.location.href = redirectUrl;
+        }
+        return new Promise(() => {});
+      }
+      return res;
+    }),
+    {
+      callServer: async (id, args) => {
+        const proxy = createServerFunctionProxy(id);
+        return proxy(...args);
+      }
+    }
+  );
+  cache.set(cacheKey, promise);
+  return promise;
+};
+
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error("[Dinou] ErrorBoundary caught error:", error, errorInfo);
+    if (this.props.onError) {
+      this.props.onError(error);
+    }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback(this.state.error);
+      }
+      const isDev = process.env.NODE_ENV !== "production";
+      return (
+        <div style={{ padding: "20px", fontFamily: "sans-serif" }}>
+          <h2>Application Error</h2>
+          <p>An unexpected error occurred on the client.</p>
+          <pre style={{ backgroundColor: "#f5f5f5", padding: "15px", borderRadius: "5px", overflowX: "auto" }}>
+            {isDev ? (
+              <>
+                <div style={{ fontWeight: "bold", marginBottom: "10px" }}>
+                  {this.state.error?.name || "Error"}: {this.state.error?.message || String(this.state.error)}
+                </div>
+                <div>{this.state.error?.stack}</div>
+              </>
+            ) : (
+              this.state.error?.message || String(this.state.error)
+            )}
+          </pre>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+
 // ====================================================================
 // 3. ROUTER COMPONENT
 // ====================================================================
@@ -95,6 +195,7 @@ function Router() {
   const [isPopState, setIsPopState] = useState(false);
   const [isPending, startTransition] = useTransition();
   const [version, setVersion] = useState(0);
+  const [navError, setNavError] = useState(null);
 
   // 🧭 NAVIGATE FUNCTION (Core Logic)
   const navigate = (href, options = {}) => {
@@ -138,6 +239,7 @@ function Router() {
     startTransition(() => {
       setIsPopState(false);
       setRoute(finalPath);
+      setNavError(null);
     });
   };
 
@@ -174,6 +276,7 @@ function Router() {
     startTransition(() => {
       // 3. Increment version to force re-execution of useMemo
       setVersion((v) => v + 1);
+      setNavError(null);
     });
   };
 
@@ -220,6 +323,7 @@ function Router() {
       startTransition(() => {
         setIsPopState(true);
         setRoute(target);
+        setNavError(null);
       });
     };
 
@@ -265,7 +369,7 @@ function Router() {
 
   // RSC Logic
   const rscKey = route + "::" + version;
-  const content = getRSCPayload(rscKey);
+  const content = navError ? getErrorRSCPayload(route, navError) : getRSCPayload(rscKey);
 
   const contextValue = useMemo(
     () => ({
@@ -281,7 +385,12 @@ function Router() {
 
   return (
     <RouterContext.Provider value={contextValue}>
-      {use(content)}
+      <ErrorBoundary
+        key={navError ? "error" : "normal"}
+        onError={setNavError}
+      >
+        {use(content)}
+      </ErrorBoundary>
     </RouterContext.Provider>
   );
 }

package/dinou/core/client.jsx

@@ -6,11 +6,13 @@ import {
   useTransition,
   useLayoutEffect,
   useMemo,
+  Component,
 } from "react";
 import { createFromFetch } from "@roggc/react-server-dom-esm/client";
 import { hydrateRoot } from "react-dom/client";
 import { RouterContext } from "./navigation.js";
 import { resolveUrl, isExternalUrl } from "./navigation-utils.js";
+import { createServerFunctionProxy } from "./server-function-proxy.js";
 
 // ====================================================================
 // 1. GLOBAL STATE (Outside the component)
@@ -88,11 +90,109 @@ const getRSCPayload = (rscKey, isPrefetch = false) => {
       }
       return res;
     }),
+    {
+      callServer: async (id, args) => {
+        const proxy = createServerFunctionProxy(id);
+        return proxy(...args);
+      }
+    }
   );
   cache.set(url, promise); // <--- KEY TO AVOID LOOP
   return promise;
 };
 
+const getErrorRSCPayload = (route, error) => {
+  const url = route.split("::")[0];
+  const cacheKey = `error::${url}::${error.message || String(error)}`;
+  if (cache.has(cacheKey)) {
+    return cache.get(cacheKey);
+  }
+
+  const payloadUrl = "/____rsc_payload_error____" + url;
+  const promise = createFromFetch(
+    fetch(payloadUrl, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        error: {
+          message: error.message || "Unknown Error",
+          name: error.name,
+          stack: error.stack,
+        },
+      }),
+    }).then((res) => {
+      if (res.headers.has("x-rsc-redirect")) {
+        const redirectUrl = res.headers.get("x-rsc-redirect");
+        cache.delete(cacheKey);
+        if (window.__DINOU_ROUTER_NAVIGATE__) {
+          window.__DINOU_ROUTER_NAVIGATE__(redirectUrl, { replace: true });
+        } else {
+          window.location.href = redirectUrl;
+        }
+        return new Promise(() => {});
+      }
+      return res;
+    }),
+    {
+      callServer: async (id, args) => {
+        const proxy = createServerFunctionProxy(id);
+        return proxy(...args);
+      }
+    }
+  );
+  cache.set(cacheKey, promise);
+  return promise;
+};
+
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error("[Dinou] ErrorBoundary caught error:", error, errorInfo);
+    if (this.props.onError) {
+      this.props.onError(error);
+    }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback(this.state.error);
+      }
+      const isDev = process.env.NODE_ENV !== "production";
+      return (
+        <div style={{ padding: "20px", fontFamily: "sans-serif" }}>
+          <h2>Application Error</h2>
+          <p>An unexpected error occurred on the client.</p>
+          <pre style={{ backgroundColor: "#f5f5f5", padding: "15px", borderRadius: "5px", overflowX: "auto" }}>
+            {isDev ? (
+              <>
+                <div style={{ fontWeight: "bold", marginBottom: "10px" }}>
+                  {this.state.error?.name || "Error"}: {this.state.error?.message || String(this.state.error)}
+                </div>
+                <div>{this.state.error?.stack}</div>
+              </>
+            ) : (
+              this.state.error?.message || String(this.state.error)
+            )}
+          </pre>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+
 // ====================================================================
 // 3. ROUTER COMPONENT
 // ====================================================================
@@ -102,6 +202,7 @@ function Router() {
   const [isPopState, setIsPopState] = useState(false);
   const [isPending, startTransition] = useTransition();
   const [version, setVersion] = useState(0);
+  const [navError, setNavError] = useState(null);
 
   // 🧭 NAVIGATE FUNCTION (Core Logic)
   const navigate = (href, options = {}) => {
@@ -145,6 +246,7 @@ function Router() {
     startTransition(() => {
       setIsPopState(false);
       setRoute(finalPath);
+      setNavError(null);
     });
   };
 
@@ -181,6 +283,7 @@ function Router() {
     startTransition(() => {
       // 3. Increment version to force re-execution of useMemo
       setVersion((v) => v + 1);
+      setNavError(null);
     });
   };
 
@@ -227,6 +330,7 @@ function Router() {
       startTransition(() => {
         setIsPopState(true);
         setRoute(target);
+        setNavError(null);
       });
     };
 
@@ -272,7 +376,7 @@ function Router() {
 
   // RSC Logic
   const rscKey = route + "::" + version;
-  const content = getRSCPayload(rscKey);
+  const content = navError ? getErrorRSCPayload(route, navError) : getRSCPayload(rscKey);
 
   const contextValue = useMemo(
     () => ({
@@ -288,7 +392,12 @@ function Router() {
 
   return (
     <RouterContext.Provider value={contextValue}>
-      {use(content)}
+      <ErrorBoundary
+        key={navError ? "error" : "normal"}
+        onError={setNavError}
+      >
+        {use(content)}
+      </ErrorBoundary>
     </RouterContext.Provider>
   );
 }

package/dinou/core/path-utils.js

@@ -0,0 +1,10 @@
+function normalizePathCase(p) {
+  if (process.platform === "win32" && typeof p === "string" && p[1] === ":") {
+    return p.charAt(0).toLowerCase() + p.slice(1);
+  }
+  return p;
+}
+
+module.exports = {
+  normalizePathCase,
+};

package/dinou/core/server.js

@@ -5,6 +5,8 @@ const isWebpack = process.env.DINOU_BUILD_TOOL === "webpack";
 globalThis.__dinou_require__ = require;
 const path = require("path");
 
+const { normalizePathCase } = require("./path-utils.js");
+
 let reactServerPath, reactDomServerPath, reactJsxRuntimePath, reactJsxDevRuntimePath;
 
 if (!isWebpack) {
@@ -124,11 +126,10 @@ if (isDevelopment) {
       while (attempts < maxRetries) {
         try {
           // console.log(`Attempting to load manifest (try ${attempts + 1})...`);
-          return JSON.parse(readFileSync(manifestPath, "utf8"));
+          const text = readFileSync(manifestPath, "utf8");
+          if (!text.trim()) throw new Error("Empty JSON");
+          return JSON.parse(text);
         } catch (err) {
-          if (err.code !== "ENOENT") {
-            throw err; // Rethrow if it's not a file not found error
-          }
           attempts++;
           if (attempts >= maxRetries) {
             throw err; // Rethrow after max retries
@@ -628,7 +629,7 @@ async function serveRSCPayload(req, res, isOld = false, isStatic = false) {
           const metaObj = JSON.parse(readFileSync(metadataPath, "utf8"));
           currentGeneratedAt = metaObj.generatedAt || null;
         }
-      } catch (e) {}
+      } catch (e) { }
 
       const useOld =
         isOld ||
@@ -797,7 +798,43 @@ async function serveRSCPayload(req, res, isOld = false, isStatic = false) {
     });
   } catch (error) {
     console.error("Error rendering RSC:", error);
-    res.status(500).send("Internal Server Error");
+    try {
+      const serializedError = {
+        message: error.message || "Unknown Error",
+        name: error.name,
+        stack: isDevelopment ? error.stack : undefined,
+      };
+      const context = getContext(req, res);
+      await requestStorage.run(context, async () => {
+        const jsx = await getErrorJSX(
+          reqPath,
+          { ...req.query },
+          serializedError,
+          isDevelopment,
+        );
+        const manifest = isDevelopment
+          ? JSON.parse(
+            readFileSync(
+              path.resolve(
+                process.cwd(),
+                isWebpack
+                  ? `${outputFolder}/react-client-manifest.json`
+                  : `react_client_manifest/react-client-manifest.json`,
+              ),
+              "utf8",
+            ),
+          )
+          : cachedClientManifest;
+        const { pipe } = isWebpack
+          ? renderToPipeableStream(jsx, manifest)
+          : renderToPipeableStream(jsx, pathToFileURL(process.cwd()).href + "/");
+        res.status(500);
+        pipe(res);
+      });
+    } catch (innerError) {
+      console.error("Fatal error rendering fallback error RSC:", innerError);
+      res.status(500).send("Internal Server Error");
+    }
   }
 }
 
@@ -822,29 +859,33 @@ app.post(/^\/____rsc_payload_error____\/.*\/?$/, async (req, res) => {
     const reqPath = (
       req.path.endsWith("/") ? req.path : req.path + "/"
     ).replace("/____rsc_payload_error____", "");
-    const jsx = await getErrorJSX(
-      reqPath,
-      { ...req.query },
-      req.body.error,
-      isDevelopment,
-    );
-    const manifest = isDevelopment
-      ? JSON.parse(
-        readFileSync(
-          path.resolve(
-            process.cwd(),
-            isWebpack
-              ? `${outputFolder}/react-client-manifest.json`
-              : `react_client_manifest/react-client-manifest.json`,
+
+    const context = getContext(req, res);
+    await requestStorage.run(context, async () => {
+      const jsx = await getErrorJSX(
+        reqPath,
+        { ...req.query },
+        req.body.error,
+        isDevelopment,
+      );
+      const manifest = isDevelopment
+        ? JSON.parse(
+          readFileSync(
+            path.resolve(
+              process.cwd(),
+              isWebpack
+                ? `${outputFolder}/react-client-manifest.json`
+                : `react_client_manifest/react-client-manifest.json`,
+            ),
+            "utf8",
           ),
-          "utf8",
-        ),
-      )
-      : cachedClientManifest;
-    const { pipe } = isWebpack
-      ? renderToPipeableStream(jsx, manifest)
-      : renderToPipeableStream(jsx, pathToFileURL(process.cwd()).href + "/");
-    pipe(res);
+        )
+        : cachedClientManifest;
+      const { pipe } = isWebpack
+        ? renderToPipeableStream(jsx, manifest)
+        : renderToPipeableStream(jsx, pathToFileURL(process.cwd()).href + "/");
+      pipe(res);
+    });
   } catch (error) {
     console.error("Error rendering RSC:", error);
     res.status(500).send("Internal Server Error");
@@ -1001,7 +1042,7 @@ app.get(/^\/.*\/?$/, async (req, res) => {
               const metaObj = JSON.parse(readFileSync(metadataPath, "utf8"));
               buildId = metaObj.generatedAt || "";
             }
-          } catch (e) {}
+          } catch (e) { }
 
           let scripts = `<script>window.__DINOU_USE_STATIC__=true;</script>`;
           if (htmlPathOld) {
@@ -1208,8 +1249,27 @@ app.post("/____server_function____", async (req, res) => {
       return res.status(400).json({ error: "Invalid file URL format" });
     }
 
-    // Extract relativePath and normalize (remove 'file://' and potential '/')
-    let relativePath = fileUrl.replace(/^file:\/\/\/?/, "").trim();
+    let relativePath;
+
+    // Check if the URL is a relative reference (e.g. file:///src/...)
+    // If so, extract it directly without using fileURLToPath (which throws on Windows without a drive letter)
+    const isRelativeSrc = fileUrl.startsWith("file:///src/") || fileUrl.startsWith("file:///src\\");
+
+    if (isRelativeSrc) {
+      relativePath = fileUrl.replace(/^file:\/\/\/?/, "").trim();
+    } else {
+      const resolvedPath = fileURLToPath(fileUrl);
+      relativePath = resolvedPath;
+
+      const normalizedCwd = normalizePathCase(process.cwd());
+      const normalizedResolved = normalizePathCase(resolvedPath);
+
+      if (normalizedResolved.startsWith(normalizedCwd)) {
+        relativePath = path.relative(normalizedCwd, normalizedResolved);
+      } else {
+        relativePath = relativePath.replace(/^[\\/]+/, "");
+      }
+    }
     const normalizedRelative = relativePath.replace(/\\/g, "/");
     if (
       normalizedRelative.startsWith("/") ||
@@ -1220,7 +1280,7 @@ app.post("/____server_function____", async (req, res) => {
         .status(400)
         .json({ error: "Invalid path: no absolute, traversal, or drive letter allowed" });
     }
-    // console.log("relPath", relativePath);
+
     // Restrict to 'src/' folder: prepend 'src/' if missing, and resolve absolutePath
     if (!relativePath.startsWith("src/") && !relativePath.startsWith("src\\")) {
       relativePath = path.join("src", relativePath);
@@ -1234,9 +1294,10 @@ app.post("/____server_function____", async (req, res) => {
         .status(403)
         .json({ error: "Access denied: file outside src directory" });
     }
-    // console.log("absPath", absolutePath);
+
     // Verify that the file exists
     if (!existsSync(absolutePath)) {
+      // console.error("❌ [Dinou Server Function 404] File not found! id:", id, "relativePath:", relativePath, "absolutePath:", absolutePath);
       return res.status(404).json({ error: "File not found" });
     }
 
@@ -1257,8 +1318,8 @@ app.post("/____server_function____", async (req, res) => {
           .status(403)
           .json({ error: "Not a valid server function file" });
       }
-      // Parse exports (you need to implement parseExports on server if not present)
-      const exports = parseExports(fileContent); // Assume you move parseExports to a shared util
+      // Parse exports
+      const exports = parseExports(fileContent);
       allowedExports = new Set(exports);
     }
 
@@ -1271,10 +1332,10 @@ app.post("/____server_function____", async (req, res) => {
       return res.status(400).json({ error: "Invalid export name" });
     }
 
-    // Proceed with import (using your importModule)
+    // Proceed with import
     const mod = await importModule(absolutePath);
 
-    // Validate exportName: only allow 'default' or others if you define a whitelist
+    // Validate exportName
     if (!exportName || (exportName !== "default" && !mod[exportName])) {
       return res.status(400).json({ error: "Invalid export name" });
     }

package/dinou/esbuild/helpers-esbuild/get-config-esbuild-prod.mjs

@@ -56,6 +56,9 @@ export default function getConfigEsbuildProd({
     metafile: true,
     logLevel: "warning",
     minify: true,
+    define: {
+      "process.env.NODE_ENV": JSON.stringify("production"),
+    },
     external: [
       "/__SERVER_FUNCTION_PROXY__",
       "/serverFunctionProxy.js",

package/dinou/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dinou-ejected",
-  "version": "5.0.2",
+  "version": "5.0.3",
   "main": "index.js",
   "private": true,
   "exports": {

package/dinou/webpack/loaders/server-functions-loader.js

@@ -1,4 +1,6 @@
 const path = require("path");
+
+const { normalizePathCase } = require("../../core/path-utils.js");
 const parseExports = require("../../core/parse-exports.js");
 const { useServerRegex } = require("../../constants.js");
 
@@ -16,7 +18,10 @@ module.exports = function (source) {
 
   // Build IDs
   const moduleId = this.resourcePath;
-  const relativePath = path.relative(process.cwd(), moduleId);
+  const relativePath = path.relative(
+    normalizePathCase(process.cwd()),
+    normalizePathCase(moduleId)
+  );
   const normalizedPath = relativePath.replace(/\\/g, "/");
 
   const fileUrl = `file:///${normalizedPath}`;

package/dinou/webpack/plugins/manifest-generator-plugin.js

@@ -14,7 +14,7 @@ class ManifestGeneratorPlugin {
       compilation.hooks.processAssets.tap(
         {
           name: pluginName,
-          stage: Compilation.PROCESS_ASSETS_STAGE_REPORT,
+          stage: Compilation.PROCESS_ASSETS_STAGE_ANALYSE,
         },
         (assets) => {
           // Traverse chunks to generate manifest

package/dinou/webpack/webpack.config.js

@@ -45,7 +45,17 @@ const outputDirs = [
 
 function cleanDir(dir) {
   if (fs.existsSync(dir)) {
-    fs.rmSync(dir, { recursive: true, force: true });
+    try {
+      const files = fs.readdirSync(dir);
+      for (const file of files) {
+        const fullPath = path.join(dir, file);
+        fs.rmSync(fullPath, { recursive: true, force: true });
+      }
+    } catch (e) {
+      try {
+        fs.rmSync(dir, { recursive: true, force: true });
+      } catch (err) {}
+    }
   }
 }
 
@@ -61,6 +71,7 @@ module.exports = async () => {
       maxEntrypointSize: 512000,
       maxAssetSize: 512000,
     },
+    cache: false,
     mode: isDevelopment ? "development" : "production",
     entry: {
       main: [path.resolve(__dirname, "../core/client-webpack.jsx")].filter(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dinou",
-  "version": "5.0.2",
+  "version": "5.0.3",
   "description": "Lightweight-Ejectable Full-Stack React 19 Framework with support for React Server Components (RSC), Server Functions, Server-Side Rendering (SSR), Static Generation (SSG), Incremental Static Generation (ISG), and Incremental Static Regeneration (ISR)",
   "main": "index.js",
   "bin": {