fix: edge cases for custom react module resolution

packages/runtime/src/templates/requireHooks.ts

@@ -1,4 +1,4 @@
-/* eslint-disable n/no-extraneous-require, no-underscore-dangle, @typescript-eslint/no-explicit-any */
+/* eslint-disable no-underscore-dangle, @typescript-eslint/no-explicit-any */
 
 // This is a modified version of the require hooks from Next.js
 // https://github.com/vercel/next.js/blob/b04c70573ac199a9bb3ea42201e0865e610d5b67/packages/next/src/server/require-hook.ts
@@ -11,86 +11,93 @@ const resolveFilename = (mod as any)._resolveFilename
 const requireHooks = new Map<string, Map<string, string>>()
 
 export const overrideRequireHooks = (config: NextConfig) => {
-  // we may have changed the working directory in the handler
-  const opts = {
-    paths: [process.cwd()],
-  }
+  setRequireHooks(config)
+  resolveRequireHooks()
+}
 
+const setRequireHooks = (config: NextConfig) => {
   requireHooks.set(
     'default',
     new Map([
-      ['react', require.resolve(`react`, opts)],
-      ['react/jsx-runtime', require.resolve(`react/jsx-runtime`, opts)],
+      ['react', `react`],
+      ['react/jsx-runtime', `react/jsx-runtime`],
     ]),
   )
 
   if (config.experimental.appDir) {
-    requireHooks.set(
-      'next',
-      new Map([
-        ['react', require.resolve(`next/dist/compiled/react`, opts)],
-        ['react/jsx-runtime', require.resolve(`next/dist/compiled/react/jsx-runtime`, opts)],
-        ['react/jsx-dev-runtime', require.resolve(`next/dist/compiled/react/jsx-dev-runtime`, opts)],
-        ['react-dom', require.resolve(`next/dist/compiled/react-dom/server-rendering-stub`, opts)],
-        ['react-dom/client', require.resolve(`next/dist/compiled/react-dom/client`, opts)],
-        ['react-dom/server', require.resolve(`next/dist/compiled/react-dom/server`, opts)],
-        ['react-dom/server.browser', require.resolve(`next/dist/compiled/react-dom/server.browser`, opts)],
-        ['react-dom/server.edge', require.resolve(`next/dist/compiled/react-dom/server.edge`, opts)],
-        [
-          'react-server-dom-webpack/client',
-          require.resolve(`next/dist/compiled/react-server-dom-webpack/client`, opts),
-        ],
-        [
-          'react-server-dom-webpack/client.edge',
-          require.resolve(`next/dist/compiled/react-server-dom-webpack/client.edge`, opts),
-        ],
-        [
-          'react-server-dom-webpack/server.edge',
-          require.resolve(`next/dist/compiled/react-server-dom-webpack/server.edge`, opts),
-        ],
-        [
-          'react-server-dom-webpack/server.node',
-          require.resolve(`next/dist/compiled/react-server-dom-webpack/server.node`, opts),
-        ],
-        ['styled-jsx', require.resolve('styled-jsx', opts)],
-        ['styled-jsx/style', require.resolve('styled-jsx/style', opts)],
-      ]),
-    )
+    if (config.experimental.serverActions) {
+      requireHooks.set(
+        'experimental',
+        new Map([
+          ['react', `next/dist/compiled/react-experimental`],
+          ['react/jsx-runtime', `next/dist/compiled/react-experimental/jsx-runtime`],
+          ['react/jsx-dev-runtime', `next/dist/compiled/react-experimental/jsx-dev-runtime`],
+          ['react-dom', `next/dist/compiled/react-dom-experimental/server-rendering-stub`],
+          ['react-dom/client', `next/dist/compiled/react-dom-experimental/client`],
+          ['react-dom/server', `next/dist/compiled/react-dom-experimental/server`],
+          ['react-dom/server.browser', `next/dist/compiled/react-dom-experimental/server.browser`],
+          ['react-dom/server.edge', `next/dist/compiled/react-dom-experimental/server.edge`],
+          ['react-server-dom-webpack/client', `next/dist/compiled/react-server-dom-webpack-experimental/client`],
+          [
+            'react-server-dom-webpack/client.edge',
+            `next/dist/compiled/react-server-dom-webpack-experimental/client.edge`,
+          ],
+          [
+            'react-server-dom-webpack/server.edge',
+            `next/dist/compiled/react-server-dom-webpack-experimental/server.edge`,
+          ],
+          [
+            'react-server-dom-webpack/server.node',
+            `next/dist/compiled/react-server-dom-webpack-experimental/server.node`,
+          ],
+          ['styled-jsx', 'styled-jsx'],
+          ['styled-jsx/style', 'styled-jsx/style'],
+        ]),
+      )
+    } else {
+      requireHooks.set(
+        'next',
+        new Map([
+          ['react', `next/dist/compiled/react`],
+          ['react/jsx-runtime', `next/dist/compiled/react/jsx-runtime`],
+          ['react/jsx-dev-runtime', `next/dist/compiled/react/jsx-dev-runtime`],
+          ['react-dom', `next/dist/compiled/react-dom/server-rendering-stub`],
+          ['react-dom/client', `next/dist/compiled/react-dom/client`],
+          ['react-dom/server', `next/dist/compiled/react-dom/server`],
+          ['react-dom/server.browser', `next/dist/compiled/react-dom/server.browser`],
+          ['react-dom/server.edge', `next/dist/compiled/react-dom/server.edge`],
+          ['react-server-dom-webpack/client', `next/dist/compiled/react-server-dom-webpack/client`],
+          ['react-server-dom-webpack/client.edge', `next/dist/compiled/react-server-dom-webpack/client.edge`],
+          ['react-server-dom-webpack/server.edge', `next/dist/compiled/react-server-dom-webpack/server.edge`],
+          ['react-server-dom-webpack/server.node', `next/dist/compiled/react-server-dom-webpack/server.node`],
+          ['styled-jsx', 'styled-jsx'],
+          ['styled-jsx/style', 'styled-jsx/style'],
+        ]),
+      )
+    }
   }
+}
 
-  if (config.experimental.serverActions) {
-    requireHooks.set(
-      'experimental',
-      new Map([
-        ['react', require.resolve(`next/dist/compiled/react-experimental`, opts)],
-        ['react/jsx-runtime', require.resolve(`next/dist/compiled/react-experimental/jsx-runtime`, opts)],
-        ['react/jsx-dev-runtime', require.resolve(`next/dist/compiled/react-experimental/jsx-dev-runtime`, opts)],
-        ['react-dom', require.resolve(`next/dist/compiled/react-dom-experimental/server-rendering-stub`, opts)],
-        ['react-dom/client', require.resolve(`next/dist/compiled/react-dom-experimental/client`, opts)],
-        ['react-dom/server', require.resolve(`next/dist/compiled/react-dom-experimental/server`, opts)],
-        ['react-dom/server.browser', require.resolve(`next/dist/compiled/react-dom-experimental/server.browser`, opts)],
-        ['react-dom/server.edge', require.resolve(`next/dist/compiled/react-dom-experimental/server.edge`, opts)],
-        [
-          'react-server-dom-webpack/client',
-          require.resolve(`next/dist/compiled/react-server-dom-webpack-experimental/client`, opts),
-        ],
-        [
-          'react-server-dom-webpack/client.edge',
-          require.resolve(`next/dist/compiled/react-server-dom-webpack-experimental/client.edge`, opts),
-        ],
-        [
-          'react-server-dom-webpack/server.edge',
-          require.resolve(`next/dist/compiled/react-server-dom-webpack-experimental/server.edge`, opts),
-        ],
-        [
-          'react-server-dom-webpack/server.node',
-          require.resolve(`next/dist/compiled/react-server-dom-webpack-experimental/server.node`, opts),
-        ],
-        ['styled-jsx', require.resolve('styled-jsx', opts)],
-        ['styled-jsx/style', require.resolve('styled-jsx/style', opts)],
-      ]),
-    )
-  }
+const resolveRequireHooks = () => {
+  // we may have changed the working directory in the handler
+  const opts = { paths: [process.cwd()] }
+
+  // resolve require hooks with module paths
+  requireHooks.forEach((mode) => {
+    mode.forEach((hook, path) => {
+      try {
+        const resolvedPath = require.resolve(path, opts)
+        mode.set(hook, resolvedPath)
+      } catch (error) {
+        if (error.code === 'MODULE_NOT_FOUND') {
+          // module not present (older version of Next.js)
+          mode.delete(hook)
+        } else {
+          throw error
+        }
+      }
+    })
+  })
 }
 
 export const applyRequireHooks = () => {
@@ -103,12 +110,12 @@ export const applyRequireHooks = () => {
     isMain: boolean,
     options: any,
   ) {
-    const reactMode = process.env.__NEXT_PRIVATE_PREBUNDLED_REACT ?? 'default'
+    const reactMode = process.env.__NEXT_PRIVATE_PREBUNDLED_REACT || 'default'
     const resolvedRequest = hooks.get(reactMode)?.get(request) ?? request
 
     return originalResolveFilename.call(mod, resolvedRequest, parent, isMain, options)
 
     // We use `bind` here to avoid referencing outside variables to create potential memory leaks.
   }.bind(null, resolveFilename, requireHooks)
 }
-/* eslint-enable n/no-extraneous-require, no-underscore-dangle, @typescript-eslint/no-explicit-any */
+/* eslint-enable no-underscore-dangle, @typescript-eslint/no-explicit-any */

packages/runtime/src/templates/server.ts

@@ -74,7 +74,7 @@ const getNetlifyNextServer = (NextServer: NextServerType) => {
       const appPathsManifest = this.getAppPathsManifest?.()
 
       const routes = routesManifest && [...routesManifest.staticRoutes, ...routesManifest.dynamicRoutes]
-      const matchedRoute = routes?.find((route) => new RegExp(route.regex).test(path))
+      const matchedRoute = routes?.find((route) => new RegExp(route.regex).test(path.split('?')[0]))
       const isAppRoute =
         appPathsManifest && matchedRoute ? appPathsManifest[joinPaths(matchedRoute.page, 'page')] : false