@modern-js/runtime 2.10.0 → 2.12.0

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @modern-js/runtime
 
+## 2.12.0
+
+### Patch Changes
+
+- 0b05ec3: fix: the SSR plugin will product some effects, disable the ssr plugin when user doesn't use ssr
+  fix: SSR 插件将会尝试一些副作用，如果用户没有使用它时禁用这个插件。
+- 1aa0cb7: fix: beforeCreateRouter should be false after render router
+  fix: 在渲染 router 后，beforeCreateRouter 应该为 false
+- Updated dependencies [c2ca6c8]
+- Updated dependencies [6d86e34]
+  - @modern-js/utils@2.12.0
+  - @modern-js/plugin@2.12.0
+  - @modern-js/types@2.12.0
+
+## 2.11.0
+
+### Patch Changes
+
+- 5d624fd: feat: assets and data prefetching is supported
+  feat: 支持资源和数据预加载
+- e2466a1: fix: remove nestedRoutes file from @modern-js/utils
+  fix: 将 nestedRoutes 从 @modern-js/utils 中移除
+- 02bb383: fix: fix lost props when using nested route in micro-front-end mode
+  修复嵌套路由在微前端场景下主子应用传递 props 丢失问题
+- 381a3b9: feat(utils): move universal utils to the universal folder
+
+  feat(utils): 将运行时使用的 utils 移动到 universal 目录
+
+- Updated dependencies [cfb058f]
+- Updated dependencies [0bd018b]
+- Updated dependencies [5d624fd]
+- Updated dependencies [e2466a1]
+- Updated dependencies [02bb383]
+- Updated dependencies [381a3b9]
+- Updated dependencies [7a60f10]
+- Updated dependencies [274b2e5]
+- Updated dependencies [b9e1c54]
+  - @modern-js/utils@2.11.0
+  - @modern-js/plugin@2.11.0
+  - @modern-js/types@2.11.0
+
 ## 2.10.0
 
 ### Patch Changes

package/dist/cjs/core/compatible.js

@@ -35,7 +35,7 @@ module.exports = __toCommonJS(compatible_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_hoist_non_react_statics = __toESM(require("hoist-non-react-statics"));
-var import_constants = require("@modern-js/utils/constants");
+var import_constants = require("@modern-js/utils/universal/constants");
 var import_runtimeContext = require("../runtimeContext");
 var import_plugin = require("./plugin");
 var import_loaderManager = require("./loader/loaderManager");
@@ -56,10 +56,14 @@ const createApp = ({ plugins }) => {
   return (App) => {
     const runner = appRuntime.init();
     const WrapperComponent = (props) => {
+      var _a;
       const element = import_react.default.createElement(
         App || import_react.default.Fragment,
-        { ...props },
-        props.children
+        App ? { ...props } : null,
+        App ? props.children : import_react.default.cloneElement(props.children, {
+          ...(_a = props.children) == null ? void 0 : _a.props,
+          ...props
+        })
       );
       const context = (0, import_react.useContext)(import_runtimeContext.RuntimeReactContext);
       return runner.provide(

package/dist/cjs/router/runtime/DeferredDataScripts.node.js

@@ -23,7 +23,7 @@ module.exports = __toCommonJS(DeferredDataScripts_node_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_react_router_dom = require("react-router-dom");
-var import_serialize = require("@modern-js/utils/serialize");
+var import_serialize = require("@modern-js/utils/universal/serialize");
 var import_common = require("../../common");
 var import_utils = require("./utils");
 const setupFnStr = `function s(r,e){_ROUTER_DATA.r=_ROUTER_DATA.r||{},_ROUTER_DATA.r[r]=_ROUTER_DATA.r[r]||{};return new Promise((function(A,R){_ROUTER_DATA.r[r][e]={resolve:A,reject:R}}))};`;

package/dist/cjs/router/runtime/PrefetchLink.js

@@ -0,0 +1,206 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var PrefetchLink_exports = {};
+__export(PrefetchLink_exports, {
+  PrefetchLink: () => Link,
+  PrefetchNavLink: () => NavLink,
+  composeEventHandlers: () => composeEventHandlers
+});
+module.exports = __toCommonJS(PrefetchLink_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_react_router_dom = require("react-router-dom");
+var import_core = require("../../core");
+function composeEventHandlers(theirHandler, ourHandler) {
+  return (event) => {
+    theirHandler == null ? void 0 : theirHandler(event);
+    if (!event.defaultPrevented) {
+      ourHandler(event);
+    }
+  };
+}
+const ABSOLUTE_URL_REGEX = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
+function usePrefetchBehavior(prefetch, theirElementProps) {
+  const [maybePrefetch, setMaybePrefetch] = import_react.default.useState(false);
+  const [shouldPrefetch, setShouldPrefetch] = import_react.default.useState(false);
+  const { onFocus, onBlur, onMouseEnter, onMouseLeave, onTouchStart } = theirElementProps;
+  import_react.default.useEffect(() => {
+    if (prefetch === "render") {
+      setShouldPrefetch(true);
+    }
+  }, [prefetch]);
+  const setIntent = () => {
+    if (prefetch === "intent") {
+      setMaybePrefetch(true);
+    }
+  };
+  const cancelIntent = () => {
+    if (prefetch === "intent") {
+      setMaybePrefetch(false);
+      setShouldPrefetch(false);
+    }
+  };
+  import_react.default.useEffect(() => {
+    if (maybePrefetch) {
+      const id = setTimeout(() => {
+        setShouldPrefetch(true);
+      }, 100);
+      return () => {
+        clearTimeout(id);
+      };
+    }
+  }, [maybePrefetch]);
+  return [
+    shouldPrefetch,
+    {
+      onFocus: composeEventHandlers(onFocus, setIntent),
+      onBlur: composeEventHandlers(onBlur, cancelIntent),
+      onMouseEnter: composeEventHandlers(onMouseEnter, setIntent),
+      onMouseLeave: composeEventHandlers(onMouseLeave, cancelIntent),
+      onTouchStart: composeEventHandlers(onTouchStart, setIntent)
+    }
+  ];
+}
+async function loadRouteModule(route, routeAssets) {
+  const routeId = route.id;
+  if (!routeId) {
+    return;
+  }
+  if (!routeAssets[routeId]) {
+    return;
+  }
+  const { chunkIds } = routeAssets[routeId];
+  if (!chunkIds) {
+    return;
+  }
+  try {
+    await Promise.all(
+      chunkIds.map((chunkId) => {
+        return __webpack_chunk_load__ == null ? void 0 : __webpack_chunk_load__(String(chunkId));
+      })
+    );
+  } catch (error) {
+    console.error(error);
+  }
+}
+const getRequestUrl = (pathname, routeId) => {
+  const LOADER_ID_PARAM = "__loader";
+  const DIRECT_PARAM = "__ssrDirect";
+  const { protocol, host } = window.location;
+  const url = new URL(pathname, `${protocol}//${host}`);
+  url.searchParams.append(LOADER_ID_PARAM, routeId);
+  url.searchParams.append(DIRECT_PARAM, "true");
+  return url;
+};
+const createDataHref = (href) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("link", { rel: "prefetch", as: "fetch", href }, href);
+};
+const getDataHref = (route, pathname, basename) => {
+  const { id } = route;
+  const path = basename === "/" ? pathname : `${basename}${pathname}`;
+  const url = getRequestUrl(path, id);
+  return createDataHref(url.toString());
+};
+const PrefetchPageLinks = ({ pathname }) => {
+  const context = (0, import_react.useContext)(import_core.RuntimeReactContext);
+  const { routeManifest, routes } = context;
+  const { routeAssets } = routeManifest;
+  const matches = Array.isArray(routes) ? (0, import_react_router_dom.matchRoutes)(routes, pathname) : [];
+  if (Array.isArray(matches)) {
+    matches == null ? void 0 : matches.forEach((match) => loadRouteModule(match.route, routeAssets));
+  }
+  if (!window._SSR_DATA) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    PrefetchDataLinks,
+    {
+      matches,
+      pathname,
+      routeManifest
+    }
+  );
+};
+const PrefetchDataLinks = ({ matches, pathname, routeManifest }) => {
+  const currentMatches = (0, import_react_router_dom.useMatches)();
+  const basename = (0, import_react_router_dom.useHref)("/");
+  const dataHrefs = (0, import_react.useMemo)(() => {
+    return matches == null ? void 0 : matches.filter((match, index) => {
+      if (!match.route.loader || typeof match.route.loader !== "function" || match.route.loader.length === 0) {
+        return false;
+      }
+      const currentMatch = currentMatches[index];
+      if (!currentMatch || currentMatch.id !== match.route.id) {
+        return true;
+      }
+      if (currentMatch.pathname !== match.pathname) {
+        return true;
+      }
+      if (currentMatch.pathname.endsWith("*") && currentMatch.params["*"] !== match.params["*"]) {
+        return true;
+      }
+      return false;
+    }).map((match) => getDataHref(match.route, pathname, basename));
+  }, [matches, pathname, routeManifest]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: dataHrefs });
+};
+const createPrefetchLink = (Link2) => {
+  return import_react.default.forwardRef(
+    ({ to, prefetch = "none", ...props }, forwardedRef) => {
+      const isAbsolute = typeof to === "string" && ABSOLUTE_URL_REGEX.test(to);
+      const [shouldPrefetch, prefetchHandlers] = usePrefetchBehavior(
+        prefetch,
+        props
+      );
+      const resolvedPath = (0, import_react_router_dom.useResolvedPath)(to);
+      const { pathname } = resolvedPath;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Link2,
+          {
+            ref: forwardedRef,
+            to,
+            ...props,
+            ...prefetchHandlers
+          }
+        ),
+        shouldPrefetch && __webpack_chunk_load__ && !isAbsolute ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PrefetchPageLinks, { pathname }) : null
+      ] });
+    }
+  );
+};
+const Link = createPrefetchLink(import_react_router_dom.Link);
+Link.displayName = "Link";
+const NavLink = createPrefetchLink(import_react_router_dom.NavLink);
+NavLink.displayName = "NavLink";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PrefetchLink,
+  PrefetchNavLink,
+  composeEventHandlers
+});

package/dist/cjs/router/runtime/index.js

@@ -27,6 +27,8 @@ __export(runtime_exports, {
   NavLink: () => import_react_router_dom.NavLink,
   Navigate: () => import_react_router_dom.Navigate,
   Outlet: () => import_react_router_dom.Outlet,
+  PrefetchLink: () => import_PrefetchLink.PrefetchLink,
+  PrefetchNavLink: () => import_PrefetchLink.PrefetchNavLink,
   Route: () => import_react_router_dom.Route,
   Router: () => import_react_router_dom.Router,
   RouterProvider: () => import_react_router_dom.RouterProvider,
@@ -81,8 +83,9 @@ module.exports = __toCommonJS(runtime_exports);
 var import_plugin = require("./plugin");
 var import_plugin2 = require("./plugin");
 __reExport(runtime_exports, require("./withRouter"), module.exports);
+var import_PrefetchLink = require("./PrefetchLink");
 var import_react_router_dom = require("react-router-dom");
-var import_remix_router = require("@modern-js/utils/remix-router");
+var import_remix_router = require("@modern-js/utils/universal/remix-router");
 var runtime_default = import_plugin.routerPlugin;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -95,6 +98,8 @@ var runtime_default = import_plugin.routerPlugin;
   NavLink,
   Navigate,
   Outlet,
+  PrefetchLink,
+  PrefetchNavLink,
   Route,
   Router,
   RouterProvider,

package/dist/cjs/router/runtime/plugin.js

@@ -60,6 +60,7 @@ const routerPlugin = ({
   createRoutes
 }) => {
   const select = (pathname) => serverBase.find((baseUrl) => pathname.search(baseUrl) === 0) || "/";
+  let routes = [];
   finalRouteConfig = routesConfig;
   return {
     name: "@modern-js/plugin-router",
@@ -70,6 +71,11 @@ const routerPlugin = ({
             useMatches: import_react_router_dom.useMatches,
             useLocation: import_react_router_dom.useLocation
           };
+          Object.defineProperty(context, "routes", {
+            get() {
+              return routes;
+            }
+          });
           return next({ context });
         },
         hoc: ({ App }, next) => {
@@ -79,8 +85,13 @@ const routerPlugin = ({
           const getRouteApp = () => {
             return (props) => {
               var _a;
-              beforeCreateRouter = true;
-              const routes = createRoutes ? createRoutes() : (0, import_react_router_dom.createRoutesFromElements)((0, import_utils.renderRoutes)(finalRouteConfig));
+              beforeCreateRouter = false;
+              routes = createRoutes ? createRoutes() : (0, import_react_router_dom.createRoutesFromElements)(
+                (0, import_utils.renderRoutes)({
+                  routesConfig: finalRouteConfig,
+                  props
+                })
+              );
               const baseUrl = ((_a = window._SERVER_DATA) == null ? void 0 : _a.router.baseUrl) || select(location.pathname);
               const _basename = baseUrl === "/" ? (0, import_utils.urlJoin)(baseUrl, basename) : baseUrl;
               let hydrationData = window._ROUTER_DATA;

package/dist/cjs/router/runtime/plugin.node.js

@@ -34,7 +34,7 @@ __export(plugin_node_exports, {
 module.exports = __toCommonJS(plugin_node_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_remix_router = require("@modern-js/utils/remix-router");
+var import_remix_router = require("@modern-js/utils/universal/remix-router");
 var import_server = require("react-router-dom/server");
 var import_hoist_non_react_statics = __toESM(require("hoist-non-react-statics"));
 var import_react_router_dom = require("react-router-dom");
@@ -84,7 +84,12 @@ const routerPlugin = ({
           const { request, mode: ssrMode } = context.ssrContext;
           const baseUrl = request.baseUrl;
           const _basename = baseUrl === "/" ? (0, import_utils.urlJoin)(baseUrl, basename) : baseUrl;
-          const routes = createRoutes ? createRoutes() : (0, import_react_router_dom.createRoutesFromElements)((0, import_utils.renderRoutes)(routesConfig, ssrMode));
+          const routes = createRoutes ? createRoutes() : (0, import_react_router_dom.createRoutesFromElements)(
+            (0, import_utils.renderRoutes)({
+              routesConfig,
+              ssrMode
+            })
+          );
           const { query } = (0, import_remix_router.createStaticHandler)(routes, {
             basename: _basename
           });

package/dist/cjs/router/runtime/utils.js

@@ -38,26 +38,28 @@ __export(utils_exports, {
 module.exports = __toCommonJS(utils_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react_router_dom = require("react-router-dom");
-var import_nestedRoutes = require("@modern-js/utils/nestedRoutes");
-var import_remix_router = require("@modern-js/utils/remix-router");
+var import_remix_router = require("@modern-js/utils/universal/remix-router");
+var import_nestedRoutes = require("@modern-js/utils/universal/nestedRoutes");
 var import_DefaultNotFound = require("./DefaultNotFound");
 var import_DeferredDataScripts = __toESM(require("./DeferredDataScripts"));
 function getRouteComponents(routes, {
   globalApp,
-  ssrMode
+  ssrMode,
+  props
 }) {
-  const Layout = ({ Component, ...props }) => {
+  const Layout = ({ Component, ...props2 }) => {
     const GlobalLayout = globalApp;
     if (!GlobalLayout) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props2 });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalLayout, { Component, ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalLayout, { Component, ...props2 });
   };
   const routeElements = [];
   for (const route of routes) {
     if (route.type === "nested") {
       const routeElement = (0, import_nestedRoutes.renderNestedRoute)(route, {
-        DeferredDataComponent: ssrMode === "stream" ? import_DeferredDataScripts.default : void 0
+        DeferredDataComponent: ssrMode === "stream" ? import_DeferredDataScripts.default : void 0,
+        props
       });
       routeElements.push(routeElement);
     } else {
@@ -75,7 +77,11 @@ function getRouteComponents(routes, {
   routeElements.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_router_dom.Route, { path: "*", element: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DefaultNotFound.DefaultNotFound, {}) }, "*"));
   return routeElements;
 }
-function renderRoutes(routesConfig, ssrMode) {
+function renderRoutes({
+  routesConfig,
+  props,
+  ssrMode
+}) {
   if (!routesConfig) {
     return null;
   }
@@ -83,7 +89,11 @@ function renderRoutes(routesConfig, ssrMode) {
   if (!routes) {
     return null;
   }
-  const routeElements = getRouteComponents(routes, { globalApp, ssrMode });
+  const routeElements = getRouteComponents(routes, {
+    globalApp,
+    ssrMode,
+    props
+  });
   return routeElements;
 }
 function getLocation(serverContext) {

package/dist/cjs/ssr/cli/index.js

@@ -61,6 +61,20 @@ var cli_default = () => ({
           appContext.internalDirectory,
           "plugins"
         );
+        const { builder } = api.useAppContext();
+        const bundlerType = (builder == null ? void 0 : builder.context.bundlerType) || "webpack";
+        const babelConfig = bundlerType === "webpack" ? (config) => {
+          var _a, _b;
+          (_a = config.plugins) == null ? void 0 : _a.push(
+            import_path.default.join(__dirname, "./babel-plugin-ssr-loader-id")
+          );
+          const userConfig = api.useResolvedConfigContext();
+          if ((0, import_utils.isUseSSRBundle)(userConfig) && hasStringSSREntry(userConfig)) {
+            (_b = config.plugins) == null ? void 0 : _b.push(
+              require.resolve("@loadable/babel-plugin")
+            );
+          }
+        } : void 0;
         return {
           source: {
             alias: {
@@ -94,15 +108,7 @@ var cli_default = () => ({
                 ];
               });
             },
-            babel: (config) => {
-              config.plugins.push(
-                import_path.default.join(__dirname, "./babel-plugin-ssr-loader-id")
-              );
-              const userConfig = api.useResolvedConfigContext();
-              if ((0, import_utils.isUseSSRBundle)(userConfig) && hasStringSSREntry(userConfig)) {
-                config.plugins.push(require.resolve("@loadable/babel-plugin"));
-              }
-            }
+            babel: babelConfig
           }
         };
       },

package/dist/cjs/ssr/index.js

@@ -48,6 +48,9 @@ const ssr = (config) => ({
         var _a;
         const hydrateContext = {
           ...context,
+          get routes() {
+            return context.routes;
+          },
           _hydration: true
         };
         const callback = () => {

package/dist/cjs/ssr/serverRender/renderToStream/buildTemplate.after.js

@@ -20,7 +20,7 @@ __export(buildTemplate_after_exports, {
   buildShellAfterTemplate: () => buildShellAfterTemplate
 });
 module.exports = __toCommonJS(buildTemplate_after_exports);
-var import_serialize = require("@modern-js/utils/serialize");
+var import_serialize = require("@modern-js/utils/universal/serialize");
 var import_buildTemplate = require("./buildTemplate.share");
 function buildShellAfterTemplate(afterAppTemplate, options) {
   const callbacks = [injectSSRDataScript];

package/dist/cjs/ssr/serverRender/renderToStream/bulidTemplate.before.js

@@ -71,8 +71,8 @@ function getHeadTemplate(beforeEntryTemplate, context) {
         if (routeId) {
           const routeManifest2 = routeAssets[routeId];
           if (routeManifest2) {
-            const { assets = [] } = routeManifest2;
-            const _cssChunks = assets.filter(
+            const { referenceCssAssets = [] } = routeManifest2;
+            const _cssChunks = referenceCssAssets.filter(
               (asset) => asset == null ? void 0 : asset.endsWith(".css")
             );
             cssChunks.push(..._cssChunks);

package/dist/cjs/ssr/serverRender/renderToString/entry.js

@@ -32,7 +32,7 @@ __export(entry_exports, {
 module.exports = __toCommonJS(entry_exports);
 var import_react = __toESM(require("react"));
 var import_server = __toESM(require("react-dom/server"));
-var import_serialize = require("@modern-js/utils/serialize");
+var import_serialize = require("@modern-js/utils/universal/serialize");
 var import_react_helmet = __toESM(require("react-helmet"));
 var import_utils = require("../../../router/runtime/utils");
 var import_helmet = __toESM(require("../helmet"));

package/dist/esm/core/compatible.js

@@ -212,7 +212,7 @@ var __generator = this && this.__generator || function(thisArg, body) {
 import { jsx } from "react/jsx-runtime";
 import React, { useContext, useMemo } from "react";
 import hoistNonReactStatics from "hoist-non-react-statics";
-import { ROUTE_MANIFEST } from "@modern-js/utils/constants";
+import { ROUTE_MANIFEST } from "@modern-js/utils/universal/constants";
 import { RuntimeReactContext } from "../runtimeContext";
 import { runtime } from "./plugin";
 import { createLoaderManager } from "./loader/loaderManager";
@@ -237,7 +237,8 @@ var createApp = function(param) {
     return function(App) {
         var runner = appRuntime.init();
         var WrapperComponent = function(props) {
-            var element = React.createElement(App || React.Fragment, _objectSpread({}, props), props.children);
+            var _props_children;
+            var element = React.createElement(App || React.Fragment, App ? _objectSpread({}, props) : null, App ? props.children : React.cloneElement(props.children, _objectSpread({}, (_props_children = props.children) === null || _props_children === void 0 ? void 0 : _props_children.props, props)));
             var context = useContext(RuntimeReactContext);
             return runner.provide({
                 element: element,

package/dist/esm/router/runtime/DeferredDataScripts.node.js

@@ -47,7 +47,7 @@ function _unsupportedIterableToArray(o, minLen) {
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Suspense, useEffect, useRef, useMemo, useContext } from "react";
 import { Await, UNSAFE_DataRouterContext as DataRouterContext, useAsyncError } from "react-router-dom";
-import { serializeJson } from "@modern-js/utils/serialize";
+import { serializeJson } from "@modern-js/utils/universal/serialize";
 import { JSX_SHELL_STREAM_END_MARK } from "../../common";
 import { serializeErrors } from "./utils";
 var setupFnStr = "function s(r,e){_ROUTER_DATA.r=_ROUTER_DATA.r||{},_ROUTER_DATA.r[r]=_ROUTER_DATA.r[r]||{};return new Promise((function(A,R){_ROUTER_DATA.r[r][e]={resolve:A,reject:R}}))};";