From d441f9982ee609d083954c948fa12b009f2f5bd2 Mon Sep 17 00:00:00 2001 From: Benjamin Toby Date: Sun, 5 Apr 2026 17:58:52 +0100 Subject: [PATCH] Fix react and react-dom peer dependencies mismatch #3 --- bun.lock | 6 ++++-- .../bundler/grab-client-hydration-script.js | 7 ++----- .../server/web-pages/generate-web-html.js | 4 +--- .../server/web-pages/grab-page-modules.d.ts | 7 +++---- .../server/web-pages/grab-page-modules.js | 2 -- dist/utils/import-react-dom-server.d.ts | 1 - dist/utils/import-react-dom-server.js | 14 -------------- package.json | 8 +++++--- .../bundler/grab-client-hydration-script.tsx | 7 ++----- .../server/web-pages/generate-web-html.tsx | 8 ++++---- .../server/web-pages/grab-page-modules.tsx | 5 ----- src/utils/import-react-dom-server.ts | 18 ------------------ 12 files changed, 21 insertions(+), 66 deletions(-) delete mode 100644 dist/utils/import-react-dom-server.d.ts delete mode 100644 dist/utils/import-react-dom-server.js delete mode 100644 src/utils/import-react-dom-server.ts diff --git a/bun.lock b/bun.lock index 6e03f86..7260917 100644 --- a/bun.lock +++ b/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": { diff --git a/dist/functions/bundler/grab-client-hydration-script.js b/dist/functions/bundler/grab-client-hydration-script.js index 11b1f06..dd8addb 100644 --- a/dist/functions/bundler/grab-client-hydration-script.js +++ b/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`; } diff --git a/dist/functions/server/web-pages/generate-web-html.js b/dist/functions/server/web-pages/generate-web-html.js index 598608b..92631e4 100644 --- a/dist/functions/server/web-pages/generate-web-html.js +++ b/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); diff --git a/dist/functions/server/web-pages/grab-page-modules.d.ts b/dist/functions/server/web-pages/grab-page-modules.d.ts index 08164df..393f99b 100644 --- a/dist/functions/server/web-pages/grab-page-modules.d.ts +++ b/dist/functions/server/web-pages/grab-page-modules.d.ts @@ -1,5 +1,4 @@ -import type { BunextPageModule, BunextPageModuleServerReturn, BunxRouteParams } from "../../../types"; -import type { JSX } from "react"; +import type { BunextPageModule, BunxRouteParams } from "../../../types"; 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; - serverRes: BunextPageModuleServerReturn; + component: import("react").JSX.Element; + serverRes: import("../../../types").BunextPageModuleServerReturn; module: BunextPageModule; root_module: BunextPageModule | undefined; }>; diff --git a/dist/functions/server/web-pages/grab-page-modules.js b/dist/functions/server/web-pages/grab-page-modules.js index e23a7a8..b1a8335 100644 --- a/dist/functions/server/web-pages/grab-page-modules.js +++ b/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(); diff --git a/dist/utils/import-react-dom-server.d.ts b/dist/utils/import-react-dom-server.d.ts deleted file mode 100644 index ea9da18..0000000 --- a/dist/utils/import-react-dom-server.d.ts +++ /dev/null @@ -1 +0,0 @@ -export default function importReactDomServer(): Promise; diff --git a/dist/utils/import-react-dom-server.js b/dist/utils/import-react-dom-server.js deleted file mode 100644 index 50a5549..0000000 --- a/dist/utils/import-react-dom-server.js +++ /dev/null @@ -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; - } -} diff --git a/package.json b/package.json index e1ee513..983d4f8 100644 --- a/package.json +++ b/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", diff --git a/src/functions/bundler/grab-client-hydration-script.tsx b/src/functions/bundler/grab-client-hydration-script.tsx index d896add..71262fc 100644 --- a/src/functions/bundler/grab-client-hydration-script.tsx +++ b/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`; } diff --git a/src/functions/server/web-pages/generate-web-html.tsx b/src/functions/server/web-pages/generate-web-html.tsx index 3a12d4b..1ad3e8a 100644 --- a/src/functions/server/web-pages/generate-web-html.tsx +++ b/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) { diff --git a/src/functions/server/web-pages/grab-page-modules.tsx b/src/functions/server/web-pages/grab-page-modules.tsx index cb49989..5cce599 100644 --- a/src/functions/server/web-pages/grab-page-modules.tsx +++ b/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 = { diff --git a/src/utils/import-react-dom-server.ts b/src/utils/import-react-dom-server.ts deleted file mode 100644 index 2ec9f60..0000000 --- a/src/utils/import-react-dom-server.ts +++ /dev/null @@ -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; - } -}