chore(rsc): upgrade to react canary (#10194)

jtoar · Tobbe · web-flow · commit 93459f9dc9f5 · 2024-03-17T09:33:08.000-07:00
Want to see how CI reacts to upgrading to React canary. ~I may have over-upgraded (i.e. some fixtures and maybe the docs don't need to be upgraded), but let's see what happens.~ This upgrade was complicated by facebook/react#27436 which added a poisoned import to `react-server-dom-webpack/server`, meaning that if you tried to import from that entry point without the "react-server" condition, it would throw. In a much-earlier PR, Sebastian mentions there generally being two ways to do things: > Either you can have the server code prebundled using Webpack (what Next.js does in practice) or you can use an unbundled Node.js server (what the reference implementation does). See facebook/react#26172. This PR goes with the former, prebundling `react-server-dom-webpack/server` with the "react-server" condition so that we can avoid having to specify it at runtime. It's hard to tell if this the better option long-term, but since we're keen on getting rid of the worker right now, this moves us closer in that direction. The alternative solution was to move decoding the reply into the worker where the condition is specified. --------- Co-authored-by: Tobbe Lundberg <tobbe@tlundberg.com>
diff --git a/.github/renovate.json b/.github/renovate.json
@@ -69,10 +69,7 @@
       "enabled": false,
 
       "matchPackageNames": [
-        "@apollo/experimental-nextjs-app-support",
-        "react",
-        "react-dom",
-        "react-server-dom-webpack"
+        "@apollo/experimental-nextjs-app-support"
       ]
     }
   ]
diff --git a/__fixtures__/fragment-test-project/web/package.json b/__fixtures__/fragment-test-project/web/package.json
@@ -16,8 +16,8 @@
     "@redwoodjs/router": "7.0.0",
     "@redwoodjs/web": "7.0.0",
     "humanize-string": "2.1.0",
-    "react": "0.0.0-experimental-e5205658f-20230913",
-    "react-dom": "0.0.0-experimental-e5205658f-20230913"
+    "react": "18.3.0-canary-a870b2d54-20240314",
+    "react-dom": "18.3.0-canary-a870b2d54-20240314"
   },
   "devDependencies": {
     "@redwoodjs/vite": "7.0.0",
diff --git a/__fixtures__/test-project-rsa/web/package.json b/__fixtures__/test-project-rsa/web/package.json
@@ -15,8 +15,8 @@
     "@redwoodjs/forms": "8.0.0-canary.144",
     "@redwoodjs/router": "8.0.0-canary.144",
     "@redwoodjs/web": "8.0.0-canary.144",
-    "react": "0.0.0-experimental-e5205658f-20230913",
-    "react-dom": "0.0.0-experimental-e5205658f-20230913"
+    "react": "18.3.0-canary-a870b2d54-20240314",
+    "react-dom": "18.3.0-canary-a870b2d54-20240314"
   },
   "devDependencies": {
     "@redwoodjs/vite": "8.0.0-canary.144",
diff --git a/__fixtures__/test-project-rsc-external-packages-and-cells/web/package.json b/__fixtures__/test-project-rsc-external-packages-and-cells/web/package.json
@@ -18,8 +18,8 @@
     "@redwoodjs/web": "7.0.0-canary.1011",
     "@tobbe.dev/rsc-test": "0.0.5",
     "client-only": "0.0.1",
-    "react": "0.0.0-experimental-e5205658f-20230913",
-    "react-dom": "0.0.0-experimental-e5205658f-20230913"
+    "react": "18.3.0-canary-a870b2d54-20240314",
+    "react-dom": "18.3.0-canary-a870b2d54-20240314"
   },
   "devDependencies": {
     "@redwoodjs/vite": "7.0.0-canary.1011",
diff --git a/__fixtures__/test-project/web/package.json b/__fixtures__/test-project/web/package.json
@@ -16,8 +16,8 @@
     "@redwoodjs/router": "7.0.0",
     "@redwoodjs/web": "7.0.0",
     "humanize-string": "2.1.0",
-    "react": "0.0.0-experimental-e5205658f-20230913",
-    "react-dom": "0.0.0-experimental-e5205658f-20230913"
+    "react": "18.3.0-canary-a870b2d54-20240314",
+    "react-dom": "18.3.0-canary-a870b2d54-20240314"
   },
   "devDependencies": {
     "@redwoodjs/vite": "7.0.0",
diff --git a/packages/auth-providers/auth0/web/package.json b/packages/auth-providers/auth0/web/package.json
@@ -32,7 +32,7 @@
     "@babel/cli": "7.23.9",
     "@babel/core": "^7.22.20",
     "@types/react": "^18.2.55",
-    "react": "0.0.0-experimental-e5205658f-20230913",
+    "react": "18.3.0-canary-a870b2d54-20240314",
     "typescript": "5.3.3",
     "vitest": "1.3.1"
   },
diff --git a/packages/auth-providers/azureActiveDirectory/web/package.json b/packages/auth-providers/azureActiveDirectory/web/package.json
@@ -33,7 +33,7 @@
     "@babel/core": "^7.22.20",
     "@types/netlify-identity-widget": "1.9.6",
     "@types/react": "^18.2.55",
-    "react": "0.0.0-experimental-e5205658f-20230913",
+    "react": "18.3.0-canary-a870b2d54-20240314",
     "typescript": "5.3.3",
     "vitest": "1.3.1"
   },
diff --git a/packages/auth-providers/clerk/web/package.json b/packages/auth-providers/clerk/web/package.json
@@ -33,7 +33,7 @@
     "@clerk/clerk-react": "4.30.7",
     "@clerk/types": "3.60.0",
     "@types/react": "^18.2.55",
-    "react": "0.0.0-experimental-e5205658f-20230913",
+    "react": "18.3.0-canary-a870b2d54-20240314",
     "typescript": "5.3.3",
     "vitest": "1.3.1"
   },
diff --git a/packages/auth-providers/dbAuth/web/package.json b/packages/auth-providers/dbAuth/web/package.json
@@ -36,7 +36,7 @@
     "@types/react": "^18.2.55",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "react": "0.0.0-experimental-e5205658f-20230913",
+    "react": "18.3.0-canary-a870b2d54-20240314",
     "typescript": "5.3.3"
   },
   "gitHead": "3905ed045508b861b495f8d5630d76c7a157d8f1"
diff --git a/packages/auth-providers/firebase/web/package.json b/packages/auth-providers/firebase/web/package.json
@@ -34,7 +34,7 @@
     "firebase": "10.7.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "react": "0.0.0-experimental-e5205658f-20230913",
+    "react": "18.3.0-canary-a870b2d54-20240314",
     "typescript": "5.3.3"
   },
   "peerDependencies": {
diff --git a/packages/auth-providers/netlify/web/package.json b/packages/auth-providers/netlify/web/package.json
@@ -32,7 +32,7 @@
     "@babel/core": "^7.22.20",
     "@types/netlify-identity-widget": "1.9.6",
     "@types/react": "^18.2.55",
-    "react": "0.0.0-experimental-e5205658f-20230913",
+    "react": "18.3.0-canary-a870b2d54-20240314",
     "typescript": "5.3.3",
     "vitest": "1.3.1"
   },
diff --git a/packages/auth-providers/supabase/web/package.json b/packages/auth-providers/supabase/web/package.json
@@ -31,7 +31,7 @@
     "@babel/core": "^7.22.20",
     "@supabase/supabase-js": "2.39.7",
     "@types/react": "^18.2.55",
-    "react": "0.0.0-experimental-e5205658f-20230913",
+    "react": "18.3.0-canary-a870b2d54-20240314",
     "typescript": "5.3.3",
     "vitest": "1.3.1"
   },
diff --git a/packages/auth-providers/supertokens/web/package.json b/packages/auth-providers/supertokens/web/package.json
@@ -31,7 +31,7 @@
     "@babel/cli": "7.23.9",
     "@babel/core": "^7.22.20",
     "@types/react": "^18.2.55",
-    "react": "0.0.0-experimental-e5205658f-20230913",
+    "react": "18.3.0-canary-a870b2d54-20240314",
     "supertokens-auth-react": "0.34.0",
     "typescript": "5.3.3",
     "vitest": "1.3.1"
diff --git a/packages/auth/package.json b/packages/auth/package.json
@@ -25,7 +25,7 @@
   "dependencies": {
     "@babel/runtime-corejs3": "7.24.0",
     "core-js": "3.35.1",
-    "react": "0.0.0-experimental-e5205658f-20230913"
+    "react": "18.3.0-canary-a870b2d54-20240314"
   },
   "devDependencies": {
     "@babel/cli": "7.23.9",
diff --git a/packages/create-redwood-app/templates/js/web/package.json b/packages/create-redwood-app/templates/js/web/package.json
@@ -14,8 +14,8 @@
     "@redwoodjs/forms": "7.0.0",
     "@redwoodjs/router": "7.0.0",
     "@redwoodjs/web": "7.0.0",
-    "react": "0.0.0-experimental-e5205658f-20230913",
-    "react-dom": "0.0.0-experimental-e5205658f-20230913"
+    "react": "18.3.0-canary-a870b2d54-20240314",
+    "react-dom": "18.3.0-canary-a870b2d54-20240314"
   },
   "devDependencies": {
     "@redwoodjs/vite": "7.0.0",
diff --git a/packages/create-redwood-app/templates/ts/web/package.json b/packages/create-redwood-app/templates/ts/web/package.json
@@ -14,8 +14,8 @@
     "@redwoodjs/forms": "7.0.0",
     "@redwoodjs/router": "7.0.0",
     "@redwoodjs/web": "7.0.0",
-    "react": "0.0.0-experimental-e5205658f-20230913",
-    "react-dom": "0.0.0-experimental-e5205658f-20230913"
+    "react": "18.3.0-canary-a870b2d54-20240314",
+    "react-dom": "18.3.0-canary-a870b2d54-20240314"
   },
   "devDependencies": {
     "@redwoodjs/vite": "7.0.0",
diff --git a/packages/forms/package.json b/packages/forms/package.json
@@ -40,13 +40,13 @@
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "nodemon": "3.0.2",
-    "react": "0.0.0-experimental-e5205658f-20230913",
-    "react-dom": "0.0.0-experimental-e5205658f-20230913",
+    "react": "18.3.0-canary-a870b2d54-20240314",
+    "react-dom": "18.3.0-canary-a870b2d54-20240314",
     "typescript": "5.3.3",
     "vitest": "1.3.1"
   },
   "peerDependencies": {
-    "react": "0.0.0-experimental-e5205658f-20230913"
+    "react": "18.3.0-canary-a870b2d54-20240314"
   },
   "gitHead": "3905ed045508b861b495f8d5630d76c7a157d8f1"
 }
diff --git a/packages/prerender/package.json b/packages/prerender/package.json
@@ -48,8 +48,8 @@
     "vitest": "1.3.1"
   },
   "peerDependencies": {
-    "react": "0.0.0-experimental-e5205658f-20230913",
-    "react-dom": "0.0.0-experimental-e5205658f-20230913"
+    "react": "18.3.0-canary-a870b2d54-20240314",
+    "react-dom": "18.3.0-canary-a870b2d54-20240314"
   },
   "externals": {
     "react": "react",
diff --git a/packages/router/package.json b/packages/router/package.json
@@ -36,14 +36,14 @@
     "@types/react-dom": "^18.2.19",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "react": "0.0.0-experimental-e5205658f-20230913",
-    "react-dom": "0.0.0-experimental-e5205658f-20230913",
+    "react": "18.3.0-canary-a870b2d54-20240314",
+    "react-dom": "18.3.0-canary-a870b2d54-20240314",
     "tstyche": "1.0.0",
     "typescript": "5.3.3"
   },
   "peerDependencies": {
-    "react": "0.0.0-experimental-e5205658f-20230913",
-    "react-dom": "0.0.0-experimental-e5205658f-20230913"
+    "react": "18.3.0-canary-a870b2d54-20240314",
+    "react-dom": "18.3.0-canary-a870b2d54-20240314"
   },
   "gitHead": "3905ed045508b861b495f8d5630d76c7a157d8f1"
 }
diff --git a/packages/vite/ambient.d.ts b/packages/vite/ambient.d.ts
@@ -25,6 +25,8 @@ declare global {
   var __REDWOOD__PRERENDER_PAGES: any
 
   var __REDWOOD__HELMET_CONTEXT: { helmet?: HelmetServerState }
+
+  var __rw_module_cache__: Map<string, unknown>
 }
 
 export {}
diff --git a/packages/vite/build.mts b/packages/vite/build.mts
@@ -1,3 +1,24 @@
-import { build } from '@redwoodjs/framework-tools'
+import { build, defaultIgnorePatterns } from '@redwoodjs/framework-tools'
 
-await build()
+import * as esbuild from 'esbuild'
+
+await build({
+  entryPointOptions: {
+    ignore: [...defaultIgnorePatterns, '**/bundled'],
+  }
+})
+
+// We bundle some react packages with the "react-server" condition
+// so that we don't need to specify it at runtime.
+
+await esbuild.build({
+  entryPoints: ['src/bundled/*'],
+  outdir: 'dist/bundled',
+
+  bundle: true,
+  conditions: ['react-server'],
+  platform: 'node',
+  target: ['node20'],
+
+  logLevel: 'info',
+})
diff --git a/packages/vite/modules.d.ts b/packages/vite/modules.d.ts
@@ -1,6 +1,4 @@
 declare module 'react-server-dom-webpack/node-loader'
-declare module 'react-server-dom-webpack/server'
-declare module 'react-server-dom-webpack/server.node.unbundled'
 
 declare module 'react-server-dom-webpack/client' {
   // https://github.com/facebook/react/blob/dfaed5582550f11b27aae967a8e7084202dd2d90/packages/react-server-dom-webpack/src/ReactFlightDOMClientBrowser.js#L31
@@ -21,5 +19,66 @@ declare module 'react-server-dom-webpack/client' {
   ): Promise<string | URLSearchParams | FormData>
 }
 
+declare module 'react-server-dom-webpack/server' {
+  import type { Writable } from 'stream'
+
+  import type { Busboy } from 'busboy'
+
+  // It's difficult to know the true type of `ServerManifest`.
+  // A lot of react's source files are stubs that are replaced at build time.
+  // Going off this reference for now: https://github.com/facebook/react/blob/b09e102ff1e2aaaf5eb6585b04609ac7ff54a5c8/packages/react-server-dom-webpack/src/ReactFlightClientConfigBundlerWebpack.js#L40
+  type ImportManifestEntry = {
+    id: string
+    chunks: Array<string>
+    name: string
+  }
+
+  type ServerManifest = {
+    [id: string]: ImportManifestEntry
+  }
+
+  // The types for `decodeReply` and `decodeReplyFromBusboy` were taken from
+  // https://github.com/facebook/react/blob/b09e102ff1e2aaaf5eb6585b04609ac7ff54a5c8/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
+  // which is what 'react-server-dom-webpack/server' resolves to with the 'react-server' condition.
+
+  /**
+   * WARNING: The types for this were handwritten by looking at React's source and could be wrong.
+   */
+  export function decodeReply<T>(
+    body: string | FormData,
+    webpackMap?: ServerManifest,
+  ): Promise<T>
+
+  /**
+   * WARNING: The types for this were handwritten by looking at React's source and could be wrong.
+   */
+  export function decodeReplyFromBusboy<T>(
+    busboyStream: Busboy,
+    webpackMap?: ServerManifest,
+  ): Promise<T>
+
+  type ClientReferenceManifestEntry = ImportManifestEntry
+
+  type ClientManifest = {
+    [id: string]: ClientReferenceManifestEntry
+  }
+
+  type PipeableStream = {
+    abort(reason: any): void
+    pipe<T extends Writable>(destination: T): T
+  }
+
+  // The types for `renderToPipeableStream` are incomplete and were taken from
+  // https://github.com/facebook/react/blob/b09e102ff1e2aaaf5eb6585b04609ac7ff54a5c8/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js#L75.
+
+  /**
+   * WARNING: The types for this were handwritten by looking at React's source and could be wrong.
+   */
+  export function renderToPipeableStream(
+    model: ReactClientValue,
+    webpackMap: ClientManifest,
+  ): PipeableStream
+}
+
 declare module 'acorn-loose'
 declare module 'vite-plugin-cjs-interop'
diff --git a/packages/vite/package.json b/packages/vite/package.json
@@ -80,8 +80,8 @@
     "express": "4.18.2",
     "http-proxy-middleware": "2.0.6",
     "isbot": "3.7.1",
-    "react": "0.0.0-experimental-e5205658f-20230913",
-    "react-server-dom-webpack": "0.0.0-experimental-e5205658f-20230913",
+    "react": "18.3.0-canary-a870b2d54-20240314",
+    "react-server-dom-webpack": "18.3.0-canary-a870b2d54-20240314",
     "vite": "5.1.6",
     "vite-plugin-cjs-interop": "2.1.0",
     "yargs-parser": "21.1.1"
diff --git a/packages/vite/src/bundled/react-server-dom-webpack.server.ts b/packages/vite/src/bundled/react-server-dom-webpack.server.ts
@@ -0,0 +1,7 @@
+// We bundle out these functions with the "react-server" condition
+// so that we don't need to specify it at runtime.
+
+export {
+  decodeReply,
+  decodeReplyFromBusboy,
+} from 'react-server-dom-webpack/server'
diff --git a/packages/vite/src/devFeServer.ts b/packages/vite/src/devFeServer.ts
@@ -14,7 +14,7 @@ import { getProjectRoutes } from '@redwoodjs/internal/dist/routes'
 import type { Paths } from '@redwoodjs/project-config'
 import { getConfig, getPaths } from '@redwoodjs/project-config'
 
-import { registerFwGlobals } from './lib/registerGlobals.js'
+import { registerFwGlobalsAndShims } from './lib/registerFwGlobalsAndShims.js'
 import { invoke } from './middleware/invokeMiddleware.js'
 import { createRscRequestHandler } from './rsc/rscRequestHandler.js'
 import { collectCssPaths, componentsModules } from './streaming/collectCss.js'
@@ -27,7 +27,7 @@ globalThis.__REDWOOD__PRERENDER_PAGES = {}
 async function createServer() {
   ensureProcessDirWeb()
 
-  registerFwGlobals()
+  registerFwGlobalsAndShims()
 
   const app = express()
   const rwPaths = getPaths()
diff --git a/packages/vite/src/index.ts b/packages/vite/src/index.ts
@@ -11,7 +11,6 @@ import { getConfig, getPaths } from '@redwoodjs/project-config'
 import { getMergedConfig } from './lib/getMergedConfig.js'
 import handleJsAsJsx from './plugins/vite-plugin-jsx-loader.js'
 import removeFromBundle from './plugins/vite-plugin-remove-from-bundle.js'
-import { rscTransformEntryPlugin } from './plugins/vite-plugin-rsc-transform-entry.js'
 import swapApolloProvider from './plugins/vite-plugin-swap-apollo-provider.js'
 
 /**
@@ -41,7 +40,6 @@ export default function redwoodPluginVite(): PluginOption[] {
   const rscEnabled = rwConfig.experimental.rsc.enabled
 
   return [
-    rscEnabled && rscTransformEntryPlugin(),
     {
       name: 'redwood-plugin-vite-html-env',
 
diff --git a/packages/vite/src/lib/registerFwGlobalsAndShims.ts b/packages/vite/src/lib/registerFwGlobalsAndShims.ts
diff --git a/packages/vite/src/plugins/vite-plugin-rsc-transform-entry.ts b/packages/vite/src/plugins/vite-plugin-rsc-transform-entry.ts
diff --git a/packages/vite/src/rsc/rscRequestHandler.ts b/packages/vite/src/rsc/rscRequestHandler.ts
diff --git a/packages/vite/src/rsc/rscWorker.ts b/packages/vite/src/rsc/rscWorker.ts
diff --git a/packages/vite/src/runFeServer.ts b/packages/vite/src/runFeServer.ts
diff --git a/packages/vite/src/streaming/streamHelpers.ts b/packages/vite/src/streaming/streamHelpers.ts
diff --git a/packages/web/package.json b/packages/web/package.json
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -69,10 +69,7 @@`
`69`	`69`	`"enabled": false,`
`70`	`70`
`71`	`71`	`"matchPackageNames": [`
`72`		`- "@apollo/experimental-nextjs-app-support",`
`73`		`- "react",`
`74`		`- "react-dom",`
`75`		`- "react-server-dom-webpack"`
	`72`	`+ "@apollo/experimental-nextjs-app-support"`
`76`	`73`	`]`
`77`	`74`	`}`
`78`	`75`	`]`