Fix react and react-dom peer dependencies mismatch #3

bun.lock

@@ -19,8 +19,6 @@
         "micromatch": "^4.0.8",
         "ora": "^9.0.0",
         "postcss": "^8.5.8",
-        "react": "19.0.0",
-        "react-dom": "19.0.0",
         "tailwindcss": "^4.2.2",
         "typescript": "^5.0.0",
       },
@@ -30,6 +28,10 @@
         "@types/micromatch": "^4.0.10",
         "happy-dom": "^20.8.4",
       },
+      "peerDependencies": {
+        "react": "^19",
+        "react-dom": "^19",
+      },
     },
   },
   "packages": {

dist/functions/bundler/grab-client-hydration-script.js

@@ -1,11 +1,8 @@
 import { existsSync } from "fs";
-import path from "path";
 import grabDirNames from "../../utils/grab-dir-names";
-import AppNames from "../../utils/grab-app-names";
 import grabConstants from "../../utils/grab-constants";
-import pagePathTransform from "../../utils/page-path-transform";
 import grabRootFilePath from "../server/web-pages/grab-root-file-path";
-const { PAGES_DIR } = grabDirNames();
+const { ROOT_DIR } = grabDirNames();
 export default async function grabClientHydrationScript({ page_local_path, }) {
     const { ClientRootElementIDName, ClientRootComponentWindowName, ClientWindowPagePropsName, } = grabConstants();
     const { root_file_path } = grabRootFilePath();
@@ -30,7 +27,7 @@ export default async function grabClientHydrationScript({ page_local_path, }) {
         return undefined;
     }
     let txt = ``;
-    txt += `import { hydrateRoot } from "react-dom/client";\n`;
+    txt += `import { hydrateRoot } from "${ROOT_DIR}/node_modules/react-dom/client.js";\n`;
     if (root_file_path) {
         txt += `import Root from "${root_file_path}";\n`;
     }

dist/functions/server/web-pages/generate-web-html.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { renderToReadableStream, renderToString } from "react-dom/server";
 import grabContants from "../../../utils/grab-constants";
 import EJSON from "../../../utils/ejson";
 import isDevelopment from "../../../utils/is-development";
@@ -10,8 +9,6 @@ import { AppData } from "../../../data/app-data";
 import { readFileSync } from "fs";
 import path from "path";
 import _ from "lodash";
-import grabDirNames from "../../../utils/grab-dir-names";
-const {} = grabDirNames();
 let _reactVersion = "19";
 try {
     _reactVersion = JSON.parse(readFileSync(path.join(process.cwd(), "node_modules/react/package.json"), "utf-8")).version;
@@ -19,6 +16,7 @@ try {
 catch { }
 export default async function genWebHTML({ component, pageProps, bundledMap, module, routeParams, debug, root_module, }) {
     const { ClientRootElementIDName, ClientWindowPagePropsName } = grabContants();
+    const { renderToReadableStream } = await import(`${global.DIR_NAMES.ROOT_DIR}/node_modules/react-dom/server.js`);
     const is_dev = isDevelopment();
     if (debug) {
         log.info("component", component);

dist/functions/server/web-pages/grab-page-modules.d.ts

@@ -1,5 +1,4 @@
-import type { BunextPageModule, BunextPageModuleServerReturn, BunxRouteParams } from "../../../types";
+import type { BunextPageModule, BunxRouteParams } from "../../../types";
-import type { JSX } from "react";
 type Params = {
     file_path: string;
     debug?: boolean;
@@ -8,8 +7,8 @@ type Params = {
     routeParams?: BunxRouteParams;
 };
 export default function grabPageModules({ file_path, debug, url, query, routeParams, }: Params): Promise<{
-    component: JSX.Element;
+    component: import("react").JSX.Element;
-    serverRes: BunextPageModuleServerReturn;
+    serverRes: import("../../../types").BunextPageModuleServerReturn;
     module: BunextPageModule;
     root_module: BunextPageModule | undefined;
 }>;

dist/functions/server/web-pages/grab-page-modules.js

@@ -2,8 +2,6 @@ import grabPageBundledReactComponent from "./grab-page-bundled-react-component";
 import _ from "lodash";
 import { log } from "../../../utils/log";
 import grabRootFilePath from "./grab-root-file-path";
-import grabPageServerRes from "./grab-page-server-res";
-import grabPageServerPath from "./grab-page-server-path";
 import grabPageCombinedServerRes from "./grab-page-combined-server-res";
 export default async function grabPageModules({ file_path, debug, url, query, routeParams, }) {
     const now = Date.now();

dist/utils/import-react-dom-server.d.ts

@@ -1 +0,0 @@
-export default function importReactDomServer(): Promise<any>;

dist/utils/import-react-dom-server.js

@@ -1,14 +0,0 @@
-import path from "path";
-import reactDomServer from "react-dom/server";
-export default async function importReactDomServer() {
-    try {
-        const reactDomServerDynamicImport = await import(path.join(process.cwd(), "node_modules", "react-dom", "server"));
-        if (!reactDomServerDynamicImport.renderToString) {
-            return reactDomServer;
-        }
-        return reactDomServerDynamicImport;
-    }
-    catch (error) {
-        return reactDomServer;
-    }
-}

package.json

@@ -2,7 +2,7 @@
     "name": "@moduletrace/bunext",
     "module": "index.ts",
     "type": "module",
-    "version": "1.0.52",
+    "version": "1.0.53",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
     "exports": {
@@ -38,13 +38,15 @@
         "@types/micromatch": "^4.0.10",
         "happy-dom": "^20.8.4"
     },
+    "peerDependencies": {
+        "react": "^19",
+        "react-dom": "^19"
+    },
     "publishConfig": {
         "registry": "https://npm.pkg.github.com"
     },
     "dependencies": {
         "typescript": "^5.0.0",
-        "react": "19.0.0",
-        "react-dom": "19.0.0",
         "@tailwindcss/postcss": "^4.2.2",
         "@types/bun": "latest",
         "@types/node": "^24.10.0",

src/functions/bundler/grab-client-hydration-script.tsx

@@ -1,12 +1,9 @@
 import { existsSync } from "fs";
-import path from "path";
 import grabDirNames from "../../utils/grab-dir-names";
-import AppNames from "../../utils/grab-app-names";
 import grabConstants from "../../utils/grab-constants";
-import pagePathTransform from "../../utils/page-path-transform";
 import grabRootFilePath from "../server/web-pages/grab-root-file-path";
 
-const { PAGES_DIR } = grabDirNames();
+const { ROOT_DIR } = grabDirNames();
 
 type Params = {
     page_local_path: string;
@@ -52,7 +49,7 @@ export default async function grabClientHydrationScript({
 
     let txt = ``;
 
-    txt += `import { hydrateRoot } from "react-dom/client";\n`;
+    txt += `import { hydrateRoot } from "${ROOT_DIR}/node_modules/react-dom/client.js";\n`;
     if (root_file_path) {
         txt += `import Root from "${root_file_path}";\n`;
     }

src/functions/server/web-pages/generate-web-html.tsx

@@ -1,4 +1,3 @@
-import { renderToReadableStream, renderToString } from "react-dom/server";
 import grabContants from "../../../utils/grab-constants";
 import EJSON from "../../../utils/ejson";
 import type { LivePageDistGenParams } from "../../../types";
@@ -10,9 +9,6 @@ import { AppData } from "../../../data/app-data";
 import { readFileSync } from "fs";
 import path from "path";
 import _ from "lodash";
-import grabDirNames from "../../../utils/grab-dir-names";
-
-const {} = grabDirNames();
 
 let _reactVersion = "19";
 try {
@@ -36,6 +32,10 @@ export default async function genWebHTML({
     const { ClientRootElementIDName, ClientWindowPagePropsName } =
         grabContants();
 
+    const { renderToReadableStream } = await import(
+        `${global.DIR_NAMES.ROOT_DIR}/node_modules/react-dom/server.js`
+    );
+
     const is_dev = isDevelopment();
 
     if (debug) {

src/functions/server/web-pages/grab-page-modules.tsx

@@ -1,7 +1,5 @@
 import type {
     BunextPageModule,
-    BunextPageModuleServerReturn,
-    BunextPageServerModule,
     BunextRootModule,
     BunxRouteParams,
 } from "../../../types";
@@ -9,9 +7,6 @@ import grabPageBundledReactComponent from "./grab-page-bundled-react-component";
 import _ from "lodash";
 import { log } from "../../../utils/log";
 import grabRootFilePath from "./grab-root-file-path";
-import grabPageServerRes from "./grab-page-server-res";
-import grabPageServerPath from "./grab-page-server-path";
-import type { JSX } from "react";
 import grabPageCombinedServerRes from "./grab-page-combined-server-res";
 
 type Params = {

src/utils/import-react-dom-server.ts

@@ -1,18 +0,0 @@
-import path from "path";
-import reactDomServer from "react-dom/server";
-
-export default async function importReactDomServer() {
-    try {
-        const reactDomServerDynamicImport = await import(
-            path.join(process.cwd(), "node_modules", "react-dom", "server")
-        );
-
-        if (!reactDomServerDynamicImport.renderToString) {
-            return reactDomServer;
-        }
-
-        return reactDomServerDynamicImport;
-    } catch (error) {
-        return reactDomServer;
-    }
-}