@modern-js/runtime 3.5.0 → 3.7.0

package/dist/cjs/cli/index.js

@@ -101,12 +101,10 @@ const runtimePlugin = (params)=>({
             });
             api.config(()=>{
                 const { appDirectory, metaName } = api.getAppContext();
-                const isReact18 = (0, utils_namespaceObject.isReact18)(appDirectory);
-                process.env.IS_REACT18 = isReact18.toString();
                 return {
                     source: {
                         globalVars: {
-                            'process.env.IS_REACT18': process.env.IS_REACT18
+                            'process.env.IS_REACT18': 'true'
                         },
                         include: [
                             new RegExp(`[\\\\/]node_modules[\\\\/]@${metaName}[\\\\/]runtime[\\\\/].*[\\\\/]head\\.`)
@@ -115,14 +113,6 @@ const runtimePlugin = (params)=>({
                     tools: {
                         bundlerChain: (chain)=>{
                             chain.module.rule('modern-entry').test(/\.jsx?$/).include.add(external_path_default().resolve(appDirectory, 'node_modules', `.${metaName}`)).end().sideEffects(true);
-                        },
-                        rspack: (_config, { appendPlugins, rspack })=>{
-                            if (!isReact18) appendPlugins([
-                                new rspack.IgnorePlugin({
-                                    resourceRegExp: /^react-dom\/client$/,
-                                    contextRegExp: /@modern-js\/runtime/
-                                })
-                            ]);
                         }
                     }
                 };

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

@@ -76,7 +76,9 @@ const ssrBuilderPlugin = (modernAPI, outputModule, exportLoadablePath)=>({
                     source: {
                         define: {
                             'process.env.MODERN_TARGET': isServerEnvironment ? JSON.stringify('node') : JSON.stringify('browser'),
-                            'process.env.MODERN_SSR_ENV': JSON.stringify(ssrEnv)
+                            'process.env.MODERN_SSR_ENV': JSON.stringify(ssrEnv),
+                            'process.env.MODERN_ENABLE_HYDRATION': JSON.stringify((0, utils_namespaceObject.isUseSSRBundle)(userConfig)),
+                            'process.env.MODERN_ENABLE_RSC': JSON.stringify(Boolean(userConfig.server?.rsc))
                         }
                     },
                     output: {

package/dist/cjs/core/browser/hydrate.js

@@ -29,14 +29,20 @@ var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     hydrateRoot: ()=>hydrateRoot,
-    isReact18: ()=>isReact18
+    hydrateWithReact: ()=>hydrateWithReact
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const component_namespaceObject = require("@loadable/component");
+const constants_namespaceObject = require("@modern-js/utils/universal/constants");
+const client_namespaceObject = require("react-dom/client");
 const external_constants_js_namespaceObject = require("../constants.js");
 const wrapper_js_namespaceObject = require("../react/wrapper.js");
 const external_withCallback_js_namespaceObject = require("./withCallback.js");
-const isReact18 = ()=>'true' === process.env.IS_REACT18;
+async function hydrateWithReact(App, rootElement) {
+    return (0, client_namespaceObject.hydrateRoot)(rootElement, App, {
+        identifierPrefix: constants_namespaceObject.SSR_HYDRATION_ID_PREFIX
+    });
+}
 function hydrateRoot(App, context, ModernRender, ModernHydrate) {
     const hydrateContext = {
         ...context,
@@ -50,7 +56,7 @@ function hydrateRoot(App, context, ModernRender, ModernHydrate) {
     };
     const renderLevel = window?._SSR_DATA?.renderLevel || external_constants_js_namespaceObject.RenderLevel.CLIENT_RENDER;
     const renderMode = window?._SSR_DATA?.mode || 'string';
-    if (isReact18() && 'stream' === renderMode) return streamSSRHydrate();
+    if ('stream' === renderMode) return streamSSRHydrate();
     function streamSSRHydrate() {
         if (renderLevel !== external_constants_js_namespaceObject.RenderLevel.SERVER_RENDER) return ModernRender((0, wrapper_js_namespaceObject.wrapRuntimeContextProvider)(App, context));
         {
@@ -65,7 +71,7 @@ function hydrateRoot(App, context, ModernRender, ModernHydrate) {
     function stringSSRHydrate() {
         if (renderLevel === external_constants_js_namespaceObject.RenderLevel.CLIENT_RENDER) return ModernRender((0, wrapper_js_namespaceObject.wrapRuntimeContextProvider)(App, context));
         if (renderLevel === external_constants_js_namespaceObject.RenderLevel.SERVER_RENDER) return new Promise((resolve)=>{
-            if (isReact18()) (0, component_namespaceObject.loadableReady)(()=>{
+            (0, component_namespaceObject.loadableReady)(()=>{
                 const SSRApp = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_withCallback_js_namespaceObject.WithCallback, {
                         callback: callback,
                         children: App
@@ -74,21 +80,16 @@ function hydrateRoot(App, context, ModernRender, ModernHydrate) {
                     resolve(root);
                 });
             });
-            else (0, component_namespaceObject.loadableReady)(()=>{
-                ModernHydrate((0, wrapper_js_namespaceObject.wrapRuntimeContextProvider)(App, hydrateContext), callback).then((root)=>{
-                    resolve(root);
-                });
-            });
         });
         console.warn(`unknow render level: ${renderLevel}, execute render()`);
         return ModernRender((0, wrapper_js_namespaceObject.wrapRuntimeContextProvider)(App, context));
     }
 }
 exports.hydrateRoot = __webpack_exports__.hydrateRoot;
-exports.isReact18 = __webpack_exports__.isReact18;
+exports.hydrateWithReact = __webpack_exports__.hydrateWithReact;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "hydrateRoot",
-    "isReact18"
+    "hydrateWithReact"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true

package/dist/cjs/core/browser/index.js

@@ -37,20 +37,17 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    hydrateWithReact17: ()=>hydrateWithReact17,
-    hydrateWithReact18: ()=>hydrateWithReact18,
+    hydrateWithReact: ()=>external_hydrate_js_namespaceObject.hydrateWithReact,
     render: ()=>render,
-    renderWithReact17: ()=>renderWithReact17,
-    renderWithReact18: ()=>renderWithReact18
+    renderWithReact: ()=>renderWithReact
 });
-const constants_namespaceObject = require("@modern-js/utils/universal/constants");
 const external_cookie_namespaceObject = require("cookie");
 var external_cookie_default = /*#__PURE__*/ __webpack_require__.n(external_cookie_namespaceObject);
+const client_namespaceObject = require("react-dom/client");
 const index_js_namespaceObject = require("../context/index.js");
 const runtime_js_namespaceObject = require("../context/runtime.js");
 const wrapper_js_namespaceObject = require("../react/wrapper.js");
 const external_hydrate_js_namespaceObject = require("./hydrate.js");
-const IS_REACT18 = 'true' === process.env.IS_REACT18;
 const getQuery = ()=>window.location.search.substring(1).split('&').reduce((res, item)=>{
         const [key, value] = item.split('=');
         if (key) res[key] = value;
@@ -108,52 +105,30 @@ async function render(App, id) {
         await runBeforeRender(context);
         const rootElement = id && 'string' != typeof id ? id : document.getElementById(id || 'root');
         async function ModernRender(App) {
-            const renderFunc = IS_REACT18 ? renderWithReact18 : renderWithReact17;
-            return renderFunc(App, rootElement);
+            return renderWithReact(App, rootElement);
         }
-        async function ModernHydrate(App, callback) {
-            const hydrateFunc = IS_REACT18 ? hydrateWithReact18 : hydrateWithReact17;
-            return hydrateFunc(App, rootElement, callback);
+        if (process.env.MODERN_ENABLE_HYDRATION && window._SSR_DATA) {
+            async function ModernHydrate(App) {
+                return (0, external_hydrate_js_namespaceObject.hydrateWithReact)(App, rootElement);
+            }
+            return (0, external_hydrate_js_namespaceObject.hydrateRoot)(App, context, ModernRender, ModernHydrate);
         }
-        if (window._SSR_DATA) return (0, external_hydrate_js_namespaceObject.hydrateRoot)(App, context, ModernRender, ModernHydrate);
         return ModernRender((0, wrapper_js_namespaceObject.wrapRuntimeContextProvider)(App, context));
     }
     throw Error('`render` function needs id in browser environment, it needs to be string or element');
 }
-async function renderWithReact18(App, rootElement) {
-    const ReactDOM = await import("react-dom/client");
-    const root = ReactDOM.createRoot(rootElement);
+async function renderWithReact(App, rootElement) {
+    const root = (0, client_namespaceObject.createRoot)(rootElement);
     root.render(App);
     return root;
 }
-async function renderWithReact17(App, rootElement) {
-    const ReactDOM = await import("react-dom");
-    ReactDOM.render(App, rootElement);
-    return rootElement;
-}
-async function hydrateWithReact18(App, rootElement) {
-    const ReactDOM = await import("react-dom/client");
-    const root = ReactDOM.hydrateRoot(rootElement, App, {
-        identifierPrefix: constants_namespaceObject.SSR_HYDRATION_ID_PREFIX
-    });
-    return root;
-}
-async function hydrateWithReact17(App, rootElement, callback) {
-    const ReactDOM = await import("react-dom");
-    const root = ReactDOM.hydrate(App, rootElement, callback);
-    return root;
-}
-exports.hydrateWithReact17 = __webpack_exports__.hydrateWithReact17;
-exports.hydrateWithReact18 = __webpack_exports__.hydrateWithReact18;
+exports.hydrateWithReact = __webpack_exports__.hydrateWithReact;
 exports.render = __webpack_exports__.render;
-exports.renderWithReact17 = __webpack_exports__.renderWithReact17;
-exports.renderWithReact18 = __webpack_exports__.renderWithReact18;
+exports.renderWithReact = __webpack_exports__.renderWithReact;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "hydrateWithReact17",
-    "hydrateWithReact18",
+    "hydrateWithReact",
     "render",
-    "renderWithReact17",
-    "renderWithReact18"
+    "renderWithReact"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true

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

@@ -101,10 +101,10 @@ const routerPlugin = (userConfig = {})=>({
                 };
                 let cachedRouter = null;
                 const RouterWrapper = (props)=>{
-                    const routerResult = useRouterCreation({
+                    const routerResult = useRouterCreation(process.env.MODERN_ENABLE_RSC ? {
                         ...props,
                         rscPayload: props?.rscPayload
-                    }, {
+                    } : props, {
                         api: api,
                         createRoutes,
                         supportHtml5History,
@@ -158,16 +158,15 @@ function useRouterCreation(props, options) {
     const baseUrl = selectBasePath(location.pathname).replace(/^\/*/, '/');
     const _basename = '/' === baseUrl ? (0, external_utils_js_namespaceObject.urlJoin)(baseUrl, runtimeContext._internalRouterBaseName || basename || '') : baseUrl;
     const { unstable_getBlockNavState: getBlockNavState } = runtimeContext;
-    const rscPayload = props?.rscPayload ? safeUse(props.rscPayload) : null;
-    let hydrationData = window._ROUTER_DATA || rscPayload;
+    const rscPayload = process.env.MODERN_ENABLE_RSC && props?.rscPayload ? safeUse(props.rscPayload) : null;
+    let hydrationData = process.env.MODERN_ENABLE_RSC ? window._ROUTER_DATA || rscPayload : window._ROUTER_DATA;
     return (0, external_react_namespaceObject.useMemo)(()=>{
         if (hydrationData?.errors) hydrationData = {
             ...hydrationData,
             errors: (0, external_utils_js_namespaceObject.deserializeErrors)(hydrationData.errors)
         };
-        const isRscClient = (0, index_js_namespaceObject.getGlobalIsRscClient)();
         let routes = null;
-        routes = isRscClient ? createRoutes ? createRoutes() : (0, external_utils_js_namespaceObject.createRouteObjectsFromConfig)({
+        routes = process.env.MODERN_ENABLE_RSC && (0, index_js_namespaceObject.getGlobalIsRscClient)() ? createRoutes ? createRoutes() : (0, external_utils_js_namespaceObject.createRouteObjectsFromConfig)({
             routesConfig: finalRouteConfig
         }) : createRoutes ? createRoutes() : (0, router_namespaceObject.createRoutesFromElements)((0, external_utils_js_namespaceObject.renderRoutes)({
             routesConfig: finalRouteConfig,
@@ -175,7 +174,7 @@ function useRouterCreation(props, options) {
         }));
         if (!routes) routes = [];
         const hooks = api.getHooks();
-        if (rscPayload) try {
+        if (process.env.MODERN_ENABLE_RSC && rscPayload) try {
             const router = (0, external_rsc_router_js_namespaceObject.createClientRouterFromPayload)(rscPayload, routes, _basename);
             return {
                 router,

package/dist/esm/cli/index.mjs

@@ -1,5 +1,5 @@
 import path_0 from "path";
-import { cleanRequireCache, isReact18 as utils_isReact18 } from "@modern-js/utils";
+import { cleanRequireCache } from "@modern-js/utils";
 import { documentPlugin } from "../document/cli/index.mjs";
 import { routerPlugin } from "../router/cli/index.mjs";
 import { builderPluginAlias } from "./alias.mjs";
@@ -54,12 +54,10 @@ const runtimePlugin = (params)=>({
             });
             api.config(()=>{
                 const { appDirectory, metaName } = api.getAppContext();
-                const isReact18 = utils_isReact18(appDirectory);
-                process.env.IS_REACT18 = isReact18.toString();
                 return {
                     source: {
                         globalVars: {
-                            'process.env.IS_REACT18': process.env.IS_REACT18
+                            'process.env.IS_REACT18': 'true'
                         },
                         include: [
                             new RegExp(`[\\\\/]node_modules[\\\\/]@${metaName}[\\\\/]runtime[\\\\/].*[\\\\/]head\\.`)
@@ -68,14 +66,6 @@ const runtimePlugin = (params)=>({
                     tools: {
                         bundlerChain: (chain)=>{
                             chain.module.rule('modern-entry').test(/\.jsx?$/).include.add(path_0.resolve(appDirectory, 'node_modules', `.${metaName}`)).end().sideEffects(true);
-                        },
-                        rspack: (_config, { appendPlugins, rspack })=>{
-                            if (!isReact18) appendPlugins([
-                                new rspack.IgnorePlugin({
-                                    resourceRegExp: /^react-dom\/client$/,
-                                    contextRegExp: /@modern-js\/runtime/
-                                })
-                            ]);
                         }
                     }
                 };

package/dist/esm/cli/ssr/index.mjs

@@ -32,7 +32,9 @@ const ssrBuilderPlugin = (modernAPI, outputModule, exportLoadablePath)=>({
                     source: {
                         define: {
                             'process.env.MODERN_TARGET': isServerEnvironment ? JSON.stringify('node') : JSON.stringify('browser'),
-                            'process.env.MODERN_SSR_ENV': JSON.stringify(ssrEnv)
+                            'process.env.MODERN_SSR_ENV': JSON.stringify(ssrEnv),
+                            'process.env.MODERN_ENABLE_HYDRATION': JSON.stringify(isUseSSRBundle(userConfig)),
+                            'process.env.MODERN_ENABLE_RSC': JSON.stringify(Boolean(userConfig.server?.rsc))
                         }
                     },
                     output: {

package/dist/esm/core/browser/hydrate.mjs

@@ -1,10 +1,16 @@
 import { jsx } from "react/jsx-runtime";
 import { loadableReady } from "@loadable/component";
+import { SSR_HYDRATION_ID_PREFIX } from "@modern-js/utils/universal/constants";
+import { hydrateRoot } from "react-dom/client";
 import { RenderLevel } from "../constants.mjs";
 import { wrapRuntimeContextProvider } from "../react/wrapper.mjs";
 import { WithCallback } from "./withCallback.mjs";
-const isReact18 = ()=>'true' === process.env.IS_REACT18;
-function hydrateRoot(App, context, ModernRender, ModernHydrate) {
+async function hydrateWithReact(App, rootElement) {
+    return hydrateRoot(rootElement, App, {
+        identifierPrefix: SSR_HYDRATION_ID_PREFIX
+    });
+}
+function hydrate_hydrateRoot(App, context, ModernRender, ModernHydrate) {
     const hydrateContext = {
         ...context,
         get routes () {
@@ -17,7 +23,7 @@ function hydrateRoot(App, context, ModernRender, ModernHydrate) {
     };
     const renderLevel = window?._SSR_DATA?.renderLevel || RenderLevel.CLIENT_RENDER;
     const renderMode = window?._SSR_DATA?.mode || 'string';
-    if (isReact18() && 'stream' === renderMode) return streamSSRHydrate();
+    if ('stream' === renderMode) return streamSSRHydrate();
     function streamSSRHydrate() {
         if (renderLevel !== RenderLevel.SERVER_RENDER) return ModernRender(wrapRuntimeContextProvider(App, context));
         {
@@ -32,7 +38,7 @@ function hydrateRoot(App, context, ModernRender, ModernHydrate) {
     function stringSSRHydrate() {
         if (renderLevel === RenderLevel.CLIENT_RENDER) return ModernRender(wrapRuntimeContextProvider(App, context));
         if (renderLevel === RenderLevel.SERVER_RENDER) return new Promise((resolve)=>{
-            isReact18() ? loadableReady(()=>{
+            loadableReady(()=>{
                 const SSRApp = ()=>/*#__PURE__*/ jsx(WithCallback, {
                         callback: callback,
                         children: App
@@ -40,14 +46,10 @@ function hydrateRoot(App, context, ModernRender, ModernHydrate) {
                 ModernHydrate(wrapRuntimeContextProvider(/*#__PURE__*/ jsx(SSRApp, {}), hydrateContext)).then((root)=>{
                     resolve(root);
                 });
-            }) : loadableReady(()=>{
-                ModernHydrate(wrapRuntimeContextProvider(App, hydrateContext), callback).then((root)=>{
-                    resolve(root);
-                });
             });
         });
         console.warn(`unknow render level: ${renderLevel}, execute render()`);
         return ModernRender(wrapRuntimeContextProvider(App, context));
     }
 }
-export { hydrateRoot, isReact18 };
+export { hydrateWithReact, hydrate_hydrateRoot as hydrateRoot };

package/dist/esm/core/browser/index.mjs

@@ -1,10 +1,9 @@
-import { SSR_HYDRATION_ID_PREFIX } from "@modern-js/utils/universal/constants";
 import cookie from "cookie";
+import { createRoot } from "react-dom/client";
 import { getGlobalInternalRuntimeContext } from "../context/index.mjs";
 import { getInitialContext } from "../context/runtime.mjs";
 import { wrapRuntimeContextProvider } from "../react/wrapper.mjs";
-import { hydrateRoot } from "./hydrate.mjs";
-const IS_REACT18 = 'true' === process.env.IS_REACT18;
+import { hydrateRoot, hydrateWithReact } from "./hydrate.mjs";
 const getQuery = ()=>window.location.search.substring(1).split('&').reduce((res, item)=>{
         const [key, value] = item.split('=');
         if (key) res[key] = value;
@@ -62,39 +61,21 @@ async function render(App, id) {
         await runBeforeRender(context);
         const rootElement = id && 'string' != typeof id ? id : document.getElementById(id || 'root');
         async function ModernRender(App) {
-            const renderFunc = IS_REACT18 ? renderWithReact18 : renderWithReact17;
-            return renderFunc(App, rootElement);
+            return renderWithReact(App, rootElement);
         }
-        async function ModernHydrate(App, callback) {
-            const hydrateFunc = IS_REACT18 ? hydrateWithReact18 : hydrateWithReact17;
-            return hydrateFunc(App, rootElement, callback);
+        if (process.env.MODERN_ENABLE_HYDRATION && window._SSR_DATA) {
+            async function ModernHydrate(App) {
+                return hydrateWithReact(App, rootElement);
+            }
+            return hydrateRoot(App, context, ModernRender, ModernHydrate);
         }
-        if (window._SSR_DATA) return hydrateRoot(App, context, ModernRender, ModernHydrate);
         return ModernRender(wrapRuntimeContextProvider(App, context));
     }
     throw Error('`render` function needs id in browser environment, it needs to be string or element');
 }
-async function renderWithReact18(App, rootElement) {
-    const ReactDOM = await import("react-dom/client");
-    const root = ReactDOM.createRoot(rootElement);
+async function renderWithReact(App, rootElement) {
+    const root = createRoot(rootElement);
     root.render(App);
     return root;
 }
-async function renderWithReact17(App, rootElement) {
-    const ReactDOM = await import("react-dom");
-    ReactDOM.render(App, rootElement);
-    return rootElement;
-}
-async function hydrateWithReact18(App, rootElement) {
-    const ReactDOM = await import("react-dom/client");
-    const root = ReactDOM.hydrateRoot(rootElement, App, {
-        identifierPrefix: SSR_HYDRATION_ID_PREFIX
-    });
-    return root;
-}
-async function hydrateWithReact17(App, rootElement, callback) {
-    const ReactDOM = await import("react-dom");
-    const root = ReactDOM.hydrate(App, rootElement, callback);
-    return root;
-}
-export { hydrateWithReact17, hydrateWithReact18, render, renderWithReact17, renderWithReact18 };
+export { hydrateWithReact, render, renderWithReact };

package/dist/esm/router/runtime/plugin.mjs

@@ -66,10 +66,10 @@ const routerPlugin = (userConfig = {})=>({
                 };
                 let cachedRouter = null;
                 const RouterWrapper = (props)=>{
-                    const routerResult = useRouterCreation({
+                    const routerResult = useRouterCreation(process.env.MODERN_ENABLE_RSC ? {
                         ...props,
                         rscPayload: props?.rscPayload
-                    }, {
+                    } : props, {
                         api: api,
                         createRoutes,
                         supportHtml5History,
@@ -123,16 +123,15 @@ function useRouterCreation(props, options) {
     const baseUrl = selectBasePath(location.pathname).replace(/^\/*/, '/');
     const _basename = '/' === baseUrl ? urlJoin(baseUrl, runtimeContext._internalRouterBaseName || basename || '') : baseUrl;
     const { unstable_getBlockNavState: getBlockNavState } = runtimeContext;
-    const rscPayload = props?.rscPayload ? safeUse(props.rscPayload) : null;
-    let hydrationData = window._ROUTER_DATA || rscPayload;
+    const rscPayload = process.env.MODERN_ENABLE_RSC && props?.rscPayload ? safeUse(props.rscPayload) : null;
+    let hydrationData = process.env.MODERN_ENABLE_RSC ? window._ROUTER_DATA || rscPayload : window._ROUTER_DATA;
     return (0, __rspack_external_react.useMemo)(()=>{
         if (hydrationData?.errors) hydrationData = {
             ...hydrationData,
             errors: deserializeErrors(hydrationData.errors)
         };
-        const isRscClient = getGlobalIsRscClient();
         let routes = null;
-        routes = isRscClient ? createRoutes ? createRoutes() : createRouteObjectsFromConfig({
+        routes = process.env.MODERN_ENABLE_RSC && getGlobalIsRscClient() ? createRoutes ? createRoutes() : createRouteObjectsFromConfig({
             routesConfig: finalRouteConfig
         }) : createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes({
             routesConfig: finalRouteConfig,
@@ -140,7 +139,7 @@ function useRouterCreation(props, options) {
         }));
         if (!routes) routes = [];
         const hooks = api.getHooks();
-        if (rscPayload) try {
+        if (process.env.MODERN_ENABLE_RSC && rscPayload) try {
             const router = createClientRouterFromPayload(rscPayload, routes, _basename);
             return {
                 router,

package/dist/esm-node/cli/index.mjs

@@ -1,7 +1,7 @@
 import __rslib_shim_module__ from "node:module";
 const require = /*#__PURE__*/ __rslib_shim_module__.createRequire(/*#__PURE__*/ (()=>import.meta.url)());
 import path_0 from "path";
-import { cleanRequireCache, isReact18 as utils_isReact18 } from "@modern-js/utils";
+import { cleanRequireCache } from "@modern-js/utils";
 import { documentPlugin } from "../document/cli/index.mjs";
 import { routerPlugin } from "../router/cli/index.mjs";
 import { builderPluginAlias } from "./alias.mjs";
@@ -56,12 +56,10 @@ const runtimePlugin = (params)=>({
             });
             api.config(()=>{
                 const { appDirectory, metaName } = api.getAppContext();
-                const isReact18 = utils_isReact18(appDirectory);
-                process.env.IS_REACT18 = isReact18.toString();
                 return {
                     source: {
                         globalVars: {
-                            'process.env.IS_REACT18': process.env.IS_REACT18
+                            'process.env.IS_REACT18': 'true'
                         },
                         include: [
                             new RegExp(`[\\\\/]node_modules[\\\\/]@${metaName}[\\\\/]runtime[\\\\/].*[\\\\/]head\\.`)
@@ -70,14 +68,6 @@ const runtimePlugin = (params)=>({
                     tools: {
                         bundlerChain: (chain)=>{
                             chain.module.rule('modern-entry').test(/\.jsx?$/).include.add(path_0.resolve(appDirectory, 'node_modules', `.${metaName}`)).end().sideEffects(true);
-                        },
-                        rspack: (_config, { appendPlugins, rspack })=>{
-                            if (!isReact18) appendPlugins([
-                                new rspack.IgnorePlugin({
-                                    resourceRegExp: /^react-dom\/client$/,
-                                    contextRegExp: /@modern-js\/runtime/
-                                })
-                            ]);
                         }
                     }
                 };

package/dist/esm-node/cli/ssr/index.mjs

@@ -34,7 +34,9 @@ const ssrBuilderPlugin = (modernAPI, outputModule, exportLoadablePath)=>({
                     source: {
                         define: {
                             'process.env.MODERN_TARGET': isServerEnvironment ? JSON.stringify('node') : JSON.stringify('browser'),
-                            'process.env.MODERN_SSR_ENV': JSON.stringify(ssrEnv)
+                            'process.env.MODERN_SSR_ENV': JSON.stringify(ssrEnv),
+                            'process.env.MODERN_ENABLE_HYDRATION': JSON.stringify(isUseSSRBundle(userConfig)),
+                            'process.env.MODERN_ENABLE_RSC': JSON.stringify(Boolean(userConfig.server?.rsc))
                         }
                     },
                     output: {

package/dist/esm-node/core/browser/hydrate.mjs

@@ -1,11 +1,17 @@
 import "node:module";
 import { jsx } from "react/jsx-runtime";
 import { loadableReady } from "@loadable/component";
+import { SSR_HYDRATION_ID_PREFIX } from "@modern-js/utils/universal/constants";
+import { hydrateRoot } from "react-dom/client";
 import { RenderLevel } from "../constants.mjs";
 import { wrapRuntimeContextProvider } from "../react/wrapper.mjs";
 import { WithCallback } from "./withCallback.mjs";
-const isReact18 = ()=>'true' === process.env.IS_REACT18;
-function hydrateRoot(App, context, ModernRender, ModernHydrate) {
+async function hydrateWithReact(App, rootElement) {
+    return hydrateRoot(rootElement, App, {
+        identifierPrefix: SSR_HYDRATION_ID_PREFIX
+    });
+}
+function hydrate_hydrateRoot(App, context, ModernRender, ModernHydrate) {
     const hydrateContext = {
         ...context,
         get routes () {
@@ -18,7 +24,7 @@ function hydrateRoot(App, context, ModernRender, ModernHydrate) {
     };
     const renderLevel = window?._SSR_DATA?.renderLevel || RenderLevel.CLIENT_RENDER;
     const renderMode = window?._SSR_DATA?.mode || 'string';
-    if (isReact18() && 'stream' === renderMode) return streamSSRHydrate();
+    if ('stream' === renderMode) return streamSSRHydrate();
     function streamSSRHydrate() {
         if (renderLevel !== RenderLevel.SERVER_RENDER) return ModernRender(wrapRuntimeContextProvider(App, context));
         {
@@ -33,7 +39,7 @@ function hydrateRoot(App, context, ModernRender, ModernHydrate) {
     function stringSSRHydrate() {
         if (renderLevel === RenderLevel.CLIENT_RENDER) return ModernRender(wrapRuntimeContextProvider(App, context));
         if (renderLevel === RenderLevel.SERVER_RENDER) return new Promise((resolve)=>{
-            isReact18() ? loadableReady(()=>{
+            loadableReady(()=>{
                 const SSRApp = ()=>/*#__PURE__*/ jsx(WithCallback, {
                         callback: callback,
                         children: App
@@ -41,14 +47,10 @@ function hydrateRoot(App, context, ModernRender, ModernHydrate) {
                 ModernHydrate(wrapRuntimeContextProvider(/*#__PURE__*/ jsx(SSRApp, {}), hydrateContext)).then((root)=>{
                     resolve(root);
                 });
-            }) : loadableReady(()=>{
-                ModernHydrate(wrapRuntimeContextProvider(App, hydrateContext), callback).then((root)=>{
-                    resolve(root);
-                });
             });
         });
         console.warn(`unknow render level: ${renderLevel}, execute render()`);
         return ModernRender(wrapRuntimeContextProvider(App, context));
     }
 }
-export { hydrateRoot, isReact18 };
+export { hydrateWithReact, hydrate_hydrateRoot as hydrateRoot };

package/dist/esm-node/core/browser/index.mjs

@@ -1,11 +1,10 @@
 import "node:module";
-import { SSR_HYDRATION_ID_PREFIX } from "@modern-js/utils/universal/constants";
 import cookie from "cookie";
+import { createRoot } from "react-dom/client";
 import { getGlobalInternalRuntimeContext } from "../context/index.mjs";
 import { getInitialContext } from "../context/runtime.mjs";
 import { wrapRuntimeContextProvider } from "../react/wrapper.mjs";
-import { hydrateRoot } from "./hydrate.mjs";
-const IS_REACT18 = 'true' === process.env.IS_REACT18;
+import { hydrateRoot, hydrateWithReact } from "./hydrate.mjs";
 const getQuery = ()=>window.location.search.substring(1).split('&').reduce((res, item)=>{
         const [key, value] = item.split('=');
         if (key) res[key] = value;
@@ -63,39 +62,21 @@ async function render(App, id) {
         await runBeforeRender(context);
         const rootElement = id && 'string' != typeof id ? id : document.getElementById(id || 'root');
         async function ModernRender(App) {
-            const renderFunc = IS_REACT18 ? renderWithReact18 : renderWithReact17;
-            return renderFunc(App, rootElement);
+            return renderWithReact(App, rootElement);
         }
-        async function ModernHydrate(App, callback) {
-            const hydrateFunc = IS_REACT18 ? hydrateWithReact18 : hydrateWithReact17;
-            return hydrateFunc(App, rootElement, callback);
+        if (process.env.MODERN_ENABLE_HYDRATION && window._SSR_DATA) {
+            async function ModernHydrate(App) {
+                return hydrateWithReact(App, rootElement);
+            }
+            return hydrateRoot(App, context, ModernRender, ModernHydrate);
         }
-        if (window._SSR_DATA) return hydrateRoot(App, context, ModernRender, ModernHydrate);
         return ModernRender(wrapRuntimeContextProvider(App, context));
     }
     throw Error('`render` function needs id in browser environment, it needs to be string or element');
 }
-async function renderWithReact18(App, rootElement) {
-    const ReactDOM = await import("react-dom/client");
-    const root = ReactDOM.createRoot(rootElement);
+async function renderWithReact(App, rootElement) {
+    const root = createRoot(rootElement);
     root.render(App);
     return root;
 }
-async function renderWithReact17(App, rootElement) {
-    const ReactDOM = await import("react-dom");
-    ReactDOM.render(App, rootElement);
-    return rootElement;
-}
-async function hydrateWithReact18(App, rootElement) {
-    const ReactDOM = await import("react-dom/client");
-    const root = ReactDOM.hydrateRoot(rootElement, App, {
-        identifierPrefix: SSR_HYDRATION_ID_PREFIX
-    });
-    return root;
-}
-async function hydrateWithReact17(App, rootElement, callback) {
-    const ReactDOM = await import("react-dom");
-    const root = ReactDOM.hydrate(App, rootElement, callback);
-    return root;
-}
-export { hydrateWithReact17, hydrateWithReact18, render, renderWithReact17, renderWithReact18 };
+export { hydrateWithReact, render, renderWithReact };

package/dist/esm-node/core/server/stream/beforeTemplate.mjs

@@ -7,11 +7,11 @@ import { buildHtml } from "../shared.mjs";
 import { checkIsNode, hasStylesheetLink, safeReplace } from "../utils.mjs";
 import { fileURLToPath as __rspack_fileURLToPath } from "node:url";
 import { dirname as __rspack_dirname } from "node:path";
-var beforeTemplate_dirname = __rspack_dirname(__rspack_fileURLToPath(import.meta.url));
+var __rspack_import_meta_dirname__ = __rspack_dirname(__rspack_fileURLToPath(import.meta.url));
 const readAsset = async (chunk)=>{
     const fs = await import("fs/promises");
     const path = await import("path");
-    const filepath = path.join(beforeTemplate_dirname, chunk);
+    const filepath = path.join(__rspack_import_meta_dirname__, chunk);
     return fs.readFile(filepath, 'utf-8');
 };
 const checkIsInline = (chunk, enableInline)=>{

package/dist/esm-node/core/server/string/loadable.mjs

@@ -3,7 +3,7 @@ import { ChunkExtractor } from "@loadable/server";
 import { attributesToString, checkIsNode, hasStylesheetLink } from "../utils.mjs";
 import { fileURLToPath as __rspack_fileURLToPath } from "node:url";
 import { dirname as __rspack_dirname } from "node:path";
-var loadable_dirname = __rspack_dirname(__rspack_fileURLToPath(import.meta.url));
+var __rspack_import_meta_dirname__ = __rspack_dirname(__rspack_fileURLToPath(import.meta.url));
 const extname = (uri)=>{
     if ('string' != typeof uri || !uri.includes('.')) return '';
     return `.${uri?.split('.').pop()}` || '';
@@ -17,7 +17,7 @@ const checkIsInline = (chunk, enableInline)=>{
 const readAsset = async (chunk)=>{
     const fs = await import("fs/promises");
     const path = await import("path");
-    const filepath = path.resolve(loadable_dirname, chunk.filename);
+    const filepath = path.resolve(__rspack_import_meta_dirname__, chunk.filename);
     return fs.readFile(filepath, 'utf-8');
 };
 class LoadableCollector {

package/dist/esm-node/router/cli/index.mjs

@@ -5,7 +5,7 @@ import { isRouteEntry } from "./entry.mjs";
 import { handleFileChange, handleGeneratorEntryCode, handleModifyEntrypoints } from "./handler.mjs";
 import { fileURLToPath as __rspack_fileURLToPath } from "node:url";
 import { dirname as __rspack_dirname } from "node:path";
-var cli_dirname = __rspack_dirname(__rspack_fileURLToPath(import.meta.url));
+var __rspack_import_meta_dirname__ = __rspack_dirname(__rspack_fileURLToPath(import.meta.url));
 const routerPlugin = ()=>({
         name: '@modern-js/plugin-router',
         required: [
@@ -46,7 +46,7 @@ const routerPlugin = ()=>({
                         include: [
                             /[\\/]node_modules[\\/]react-router[\\/]/,
                             /[\\/]node_modules[\\/]react-router-dom[\\/]/,
-                            node_path.resolve(cli_dirname, '../runtime').replace('cjs', 'esm')
+                            node_path.resolve(__rspack_import_meta_dirname__, '../runtime').replace('cjs', 'esm')
                         ]
                     }
                 }));

package/dist/esm-node/router/runtime/plugin.mjs

@@ -67,10 +67,10 @@ const routerPlugin = (userConfig = {})=>({
                 };
                 let cachedRouter = null;
                 const RouterWrapper = (props)=>{
-                    const routerResult = useRouterCreation({
+                    const routerResult = useRouterCreation(process.env.MODERN_ENABLE_RSC ? {
                         ...props,
                         rscPayload: props?.rscPayload
-                    }, {
+                    } : props, {
                         api: api,
                         createRoutes,
                         supportHtml5History,
@@ -124,16 +124,15 @@ function useRouterCreation(props, options) {
     const baseUrl = selectBasePath(location.pathname).replace(/^\/*/, '/');
     const _basename = '/' === baseUrl ? urlJoin(baseUrl, runtimeContext._internalRouterBaseName || basename || '') : baseUrl;
     const { unstable_getBlockNavState: getBlockNavState } = runtimeContext;
-    const rscPayload = props?.rscPayload ? safeUse(props.rscPayload) : null;
-    let hydrationData = window._ROUTER_DATA || rscPayload;
+    const rscPayload = process.env.MODERN_ENABLE_RSC && props?.rscPayload ? safeUse(props.rscPayload) : null;
+    let hydrationData = process.env.MODERN_ENABLE_RSC ? window._ROUTER_DATA || rscPayload : window._ROUTER_DATA;
     return (0, __rspack_external_react.useMemo)(()=>{
         if (hydrationData?.errors) hydrationData = {
             ...hydrationData,
             errors: deserializeErrors(hydrationData.errors)
         };
-        const isRscClient = getGlobalIsRscClient();
         let routes = null;
-        routes = isRscClient ? createRoutes ? createRoutes() : createRouteObjectsFromConfig({
+        routes = process.env.MODERN_ENABLE_RSC && getGlobalIsRscClient() ? createRoutes ? createRoutes() : createRouteObjectsFromConfig({
             routesConfig: finalRouteConfig
         }) : createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes({
             routesConfig: finalRouteConfig,
@@ -141,7 +140,7 @@ function useRouterCreation(props, options) {
         }));
         if (!routes) routes = [];
         const hooks = api.getHooks();
-        if (rscPayload) try {
+        if (process.env.MODERN_ENABLE_RSC && rscPayload) try {
             const router = createClientRouterFromPayload(rscPayload, routes, _basename);
             return {
                 router,

package/dist/types/core/browser/hydrate.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { Root } from 'react-dom/client';
+import { type Root } from 'react-dom/client';
 import type { TRuntimeContext } from '../context/runtime';
-export declare const isReact18: () => boolean;
-export declare function hydrateRoot(App: React.ReactElement, context: TRuntimeContext, ModernRender: (App: React.ReactElement) => Promise<HTMLElement | Root>, ModernHydrate: (App: React.ReactElement, callback?: () => void) => Promise<HTMLElement | Root>): Promise<HTMLElement | Root>;
+export declare function hydrateWithReact(App: React.ReactElement, rootElement: HTMLElement): Promise<Root>;
+export declare function hydrateRoot(App: React.ReactElement, context: TRuntimeContext, ModernRender: (App: React.ReactElement) => Promise<HTMLElement | Root>, ModernHydrate: (App: React.ReactElement) => Promise<HTMLElement | Root>): Promise<HTMLElement | Root>;

package/dist/types/core/browser/index.d.ts

@@ -1,9 +1,8 @@
 import type React from 'react';
+import { hydrateWithReact } from './hydrate';
+export { hydrateWithReact };
 export type RenderFunc = typeof render;
 export declare function render(App: React.ReactElement<{
     basename: string;
 }>, id?: HTMLElement | string): Promise<HTMLElement | import("react-dom/client").Root>;
-export declare function renderWithReact18(App: React.ReactElement, rootElement: HTMLElement): Promise<import("react-dom/client").Root>;
-export declare function renderWithReact17(App: React.ReactElement, rootElement: HTMLElement): Promise<HTMLElement>;
-export declare function hydrateWithReact18(App: React.ReactElement, rootElement: HTMLElement): Promise<import("react-dom/client").Root>;
-export declare function hydrateWithReact17(App: React.ReactElement, rootElement: HTMLElement, callback?: () => void): Promise<any>;
+export declare function renderWithReact(App: React.ReactElement, rootElement: HTMLElement): Promise<import("react-dom/client").Root>;

package/package.json

@@ -15,7 +15,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "3.5.0",
+  "version": "3.7.0",
   "engines": {
     "node": ">=20"
   },
@@ -215,21 +215,21 @@
     "isbot": "3.8.0",
     "react-helmet": "^6.1.0",
     "react-is": "^18.3.1",
-    "@modern-js/plugin": "3.5.0",
-    "@modern-js/plugin-data-loader": "3.5.0",
-    "@modern-js/render": "3.5.0",
-    "@modern-js/runtime-utils": "3.5.0",
-    "@modern-js/types": "3.5.0",
-    "@modern-js/utils": "3.5.0"
+    "@modern-js/plugin": "3.7.0",
+    "@modern-js/plugin-data-loader": "3.7.0",
+    "@modern-js/render": "3.7.0",
+    "@modern-js/runtime-utils": "3.7.0",
+    "@modern-js/types": "3.7.0",
+    "@modern-js/utils": "3.7.0"
   },
   "peerDependencies": {
-    "react": ">=17.0.2",
-    "react-dom": ">=17.0.2"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "devDependencies": {
     "@remix-run/web-fetch": "^4.1.3",
     "@rsbuild/core": "2.1.0",
-    "@rslib/core": "0.23.0",
+    "@rslib/core": "0.23.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@types/cookie": "0.6.0",
@@ -240,7 +240,7 @@
     "react-dom": "^19.2.7",
     "ts-node": "^10.9.2",
     "typescript": "^5",
-    "@modern-js/app-tools": "3.5.0",
+    "@modern-js/app-tools": "3.7.0",
     "@modern-js/rslib": "2.68.10",
     "@scripts/rstest-config": "2.66.0"
   },