fix: Update to latest Ink and React 19 and bundle React and Ink into CLI (#138)

* Update to latest Ink and React 19

* bundle into CLI

Author: christianalfoni

build/fakeReactDevtoolsCore.js

@@ -0,0 +1 @@
+module.exports = {};

build/utils.cjs

@@ -1,4 +1,4 @@
-module.exports.nodeExternals = [
+module.exports.externalModules = [
   ...Object.keys(require("../package.json").dependencies),
   ...require("module").builtinModules,
   ...require("module").builtinModules.map((mod) => `node:${mod}`),

esbuild.cjs

@@ -1,6 +1,6 @@
-const fs = require("fs");
+const { join } = require("path");
 const esbuild = require("esbuild");
-const { nodeExternals, define } = require("./build/utils.cjs");
+const { externalModules, define } = require("./build/utils.cjs");
 const {
   moduleReplacementPlugin,
   forbidImportsPlugin,
@@ -13,6 +13,17 @@ const preventPitcherClientImportsPlugin = forbidImportsPlugin([
   "@codesandbox/pitcher-common",
 ]);
 
+const devtoolsStubPlugin = {
+  name: "stub-react-devtools",
+  setup(build) {
+    // whenever someone does `import 'react-devtools-core'`, redirect to our empty.js
+    build.onResolve({ filter: /^react-devtools-core$/ }, () => ({
+      path: join(__dirname, "build/fakeReactDevtoolsCore.js"),
+      namespace: "file",
+    }));
+  },
+};
+
 /**
  * BROWSER CLIENT BUILD
  */
@@ -74,7 +85,7 @@ const nodeClientCjsBuild = esbuild.build({
   // .cjs extension is required because "type": "module" is set in package.json
   outfile: "dist/cjs/node.cjs",
   platform: "node",
-  external: nodeExternals,
+  external: externalModules,
   plugins: [preventPitcherClientImportsPlugin],
 });
 
@@ -84,7 +95,7 @@ const nodeClientEsmBuild = esbuild.build({
   format: "esm",
   outfile: "dist/esm/node.js",
   platform: "node",
-  external: nodeExternals,
+  external: externalModules,
   plugins: [preventPitcherClientImportsPlugin],
 });
 
@@ -99,7 +110,7 @@ const sdkCjsBuild = esbuild.build({
   platform: "node",
   // .cjs extension is required because "type": "module" is set in package.json
   outfile: "dist/cjs/index.cjs",
-  external: nodeExternals,
+  external: externalModules,
 });
 
 const sdkEsmBuild = esbuild.build({
@@ -109,7 +120,7 @@ const sdkEsmBuild = esbuild.build({
   define,
   platform: "node",
   outfile: "dist/esm/index.js",
-  external: nodeExternals,
+  external: externalModules,
   plugins: [preventPitcherClientImportsPlugin],
 });
 
@@ -124,10 +135,19 @@ const cliBuild = esbuild.build({
   format: "esm",
   platform: "node",
   banner: {
-    js: `#!/usr/bin/env node\n\n`,
+    js: `#!/usr/bin/env node\n\nimport { createRequire } from "module";\nconst require = createRequire(import.meta.url);\n`,
   },
-  external: [...nodeExternals, "@codesandbox/sdk"],
-  plugins: [preventPitcherClientImportsPlugin],
+  external: [
+    // We have to bundle React and Ink into the bundle because Ink supports React 18 in v5 and React 19 in v6,
+    // but this breaks when running the CLI in the project folder as it might have either React version and we do not
+    // want users to manually install React and correct Ink version as peer dependencies
+    ...externalModules.filter(
+      (mod) =>
+        mod !== "react" && mod !== "ink" && mod !== "@tanstack/react-query"
+    ),
+    "@codesandbox/sdk",
+  ],
+  plugins: [preventPitcherClientImportsPlugin, devtoolsStubPlugin],
 });
 
 Promise.all([

package-lock.json

@@ -73,6 +73,9 @@
     "@types/node": "^22.15.30",
     "@types/react": "^19.1.5",
     "@types/yargs": "^17.0.33",
+    "ink": "^6.1.0",
+    "react": "^19.1.1",
+    "@tanstack/react-query": "^5.76.1",
     "buffer-browserify": "^0.2.5",
     "crypto-browserify": "^3.12.1",
     "esbuild": "^0.25.0",
@@ -88,24 +91,21 @@
   },
   "dependencies": {
     "@codesandbox/pitcher-client": "1.1.7",
-    "@inkjs/ui": "^2.0.0",
     "@hey-api/client-fetch": "^0.7.3",
+    "@inkjs/ui": "^2.0.0",
     "@msgpack/msgpack": "^3.1.0",
-    "@tanstack/react-query": "^5.76.1",
     "blessed": "^0.1.81",
     "blessed-contrib": "^4.11.0",
     "cli-table3": "^0.6.3",
-    "ink": "^5.2.1",
     "isbinaryfile": "^5.0.4",
     "isomorphic-ws": "^5.0.0",
     "ora": "^8.2.0",
     "path": "^0.12.7",
-    "react": "^18.3.1",
     "readline": "^1.3.0",
     "util": "^0.12.5",
     "yargs": "^17.7.2"
   },
   "optionalDependencies": {
     "@sentry/node": "^9.29.0"
   }
-}
+}