Fix react and react-dom peer dependencies mismatch #4

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

@@ -9,6 +9,8 @@ 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 { ROOT_DIR } = grabDirNames();
 let _reactVersion = "19";
 try {
     _reactVersion = JSON.parse(readFileSync(path.join(process.cwd(), "node_modules/react/package.json"), "utf-8")).version;
@@ -16,7 +18,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 { renderToReadableStream } = await import(`${ROOT_DIR}/node_modules/react-dom/server.js`);
     const is_dev = isDevelopment();
     if (debug) {
         log.info("component", component);

package.json

@@ -2,7 +2,7 @@
     "name": "@moduletrace/bunext",
     "module": "index.ts",
     "type": "module",
-    "version": "1.0.54",
+    "version": "1.0.55",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
     "exports": {

src/__tests__/e2e/e2e.test.ts

@@ -1,7 +1,17 @@
 import { describe, expect, test, beforeAll, afterAll } from "bun:test";
 import startServer from "../../../src/functions/server/start-server";
 import path from "path";
-import fs from "fs";
+import fs, { FSWatcher } from "fs";
+import { execSync } from "child_process";
+import {
+    BundlerCTXMap,
+    BunextConfig,
+    GlobalHMRControllerObject,
+    PageFiles,
+} from "../../types";
+import { FileSystemRouter } from "bun";
+import { BuildContext } from "esbuild";
+import grabDirNames from "../../utils/grab-dir-names";
 
 // Fixture lives under test/ so the framework's directory guard allows it
 const fixtureDir = path.resolve(__dirname, "../../../test/e2e-fixture");
@@ -11,6 +21,25 @@ const fixtureIndexPage = path.join(fixturePagesDir, "index.tsx");
 let originalCwd = process.cwd();
 let originalPort: string | undefined;
 
+declare global {
+    var CONFIG: BunextConfig;
+    var SERVER: Bun.Server<any> | undefined;
+    var RECOMPILING: boolean;
+    var WATCHER_TIMEOUT: any;
+    var ROUTER: FileSystemRouter;
+    var HMR_CONTROLLERS: GlobalHMRControllerObject[];
+    var LAST_BUILD_TIME: number;
+    var BUNDLER_CTX_MAP: { [k: string]: BundlerCTXMap } | undefined;
+    var BUNDLER_REBUILDS: 0;
+    var PAGES_SRC_WATCHER: FSWatcher | undefined;
+    var CURRENT_VERSION: string | undefined;
+    var PAGE_FILES: PageFiles[];
+    var ROOT_FILE_UPDATED: boolean;
+    var SKIPPED_BROWSER_MODULES: Set<string>;
+    var BUNDLER_CTX: BuildContext | undefined;
+    var DIR_NAMES: ReturnType<typeof grabDirNames>;
+}
+
 describe("E2E Integration", () => {
     let server: any;
 
@@ -21,6 +50,10 @@ describe("E2E Integration", () => {
 
         process.chdir(fixtureDir);
 
+        execSync(`bun init -y && bun install react react-dom`, {
+            cwd: fixtureDir,
+        });
+
         global.CONFIG = { development: true };
         global.HMR_CONTROLLERS = [];
         global.BUNDLER_REBUILDS = 0;
@@ -81,7 +114,9 @@ describe("E2E Integration", () => {
     });
 
     test("returns 404 for unknown route", async () => {
-        const response = await fetch(`http://localhost:${server.port}/unknown-foo-bar123`);
+        const response = await fetch(
+            `http://localhost:${server.port}/unknown-foo-bar123`,
+        );
         expect(response.status).toBe(404);
         const text = await response.text();
         // Default 404 component is rendered
@@ -93,7 +128,9 @@ describe("E2E Integration", () => {
         const pageFilePath = fixtureIndexPage;
 
         // Write a temporary .server.ts companion that injects a prop
-        await Bun.write(serverFilePath, `
+        await Bun.write(
+            serverFilePath,
+            `
 import type { BunextPageServerFn } from "../../../../../src/types";
 
 const server: BunextPageServerFn<{ greeting: string }> = async () => {
@@ -101,18 +138,19 @@ const server: BunextPageServerFn<{ greeting: string }> = async () => {
 };
 
 export default server;
-`);
+`,
+        );
 
         // Add the fixture page to the BUNDLER_CTX_MAP
-        global.BUNDLER_CTX_MAP[pageFilePath] = {
-            path: ".bunext/public/pages/index.js",
-            hash: "index",
-            type: "text/javascript",
-            entrypoint: pageFilePath,
-            local_path: pageFilePath,
-            url_path: "/",
-            file_name: "index",
-        };
+        // global.BUNDLER_CTX_MAP[pageFilePath] = {
+        //     path: ".bunext/public/pages/index.js",
+        //     hash: "index",
+        //     type: "text/javascript",
+        //     entrypoint: pageFilePath,
+        //     local_path: pageFilePath,
+        //     url_path: "/",
+        //     file_name: "index",
+        // };
 
         const response = await fetch(`http://localhost:${server.port}/`);
         expect(response.status).toBe(200);

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

@@ -9,6 +9,9 @@ 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 { ROOT_DIR } = grabDirNames();
 
 let _reactVersion = "19";
 try {
@@ -33,7 +36,7 @@ export default async function genWebHTML({
         grabContants();
 
     const { renderToReadableStream } = await import(
-        `${global.DIR_NAMES.ROOT_DIR}/node_modules/react-dom/server.js`
+        `${ROOT_DIR}/node_modules/react-dom/server.js`
     );
 
     const is_dev = isDevelopment();