Include router context as rsc shared dep (#37320)

Router context should be treated as rsc shared dep otherwise client component won't receive the instance in edge runtime ## Bug - [x] Integration tests added
vercel · May 30, 2022 · 3d9c21b · 3d9c21b
1 parent 6718068
commit 3d9c21b
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 2 deletions.
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -936,6 +936,9 @@ export default async function getBaseWebpackConfig(
     include: [dir, /next[\\/]dist[\\/]pages/],
   }
 
+  const rscSharedRegex =
+    /(node_modules\/react\/|\/shared\/lib\/(head-manager-context|router-context)\.js|node_modules\/styled-jsx\/)/
+
   let webpackConfig: webpack.Configuration = {
     parallelism: Number(process.env.NEXT_WEBPACK_PARALLELISM) || undefined,
     // @ts-ignore
@@ -1029,7 +1032,7 @@ export default async function getBaseWebpackConfig(
                 enforce: true,
                 name: 'rsc-runtime-deps',
                 filename: 'rsc-runtime-deps.js',
-                test: /(node_modules\/react\/|\/shared\/lib\/head-manager-context\.js|node_modules\/styled-jsx\/)/,
+                test: rscSharedRegex,
               },
             }
           : undefined
@@ -1284,7 +1287,7 @@ export default async function getBaseWebpackConfig(
               // Move shared dependencies from sc_server and sc_client into the
               // same layer.
               {
-                test: /(node_modules\/react\/|\/shared\/lib\/head-manager-context\.js|node_modules\/styled-jsx\/)/,
+                test: rscSharedRegex,
                 layer: 'rsc_shared_deps',
               },
             ]

diff --git a/test/integration/react-streaming-and-server-components/app/components/router-path.client.js b/test/integration/react-streaming-and-server-components/app/components/router-path.client.js
@@ -0,0 +1,6 @@
+import { useRouter } from 'next/router'
+
+export default () => {
+  const { pathname } = useRouter()
+  return <div>{`router pathname: ${pathname}`}</div>
+}
diff --git a/test/integration/react-streaming-and-server-components/app/pages/routes/[dynamic].server.js b/test/integration/react-streaming-and-server-components/app/pages/routes/[dynamic].server.js
@@ -1,10 +1,12 @@
 import { parse } from 'url'
+import RouterPath from '../../components/router-path.client'
 
 export default function Pid({ text, pathname }) {
   return (
     <>
       <div>{`query: ${text}`}</div>
       <div>{`pathname: ${pathname}`}</div>
+      <RouterPath />
     </>
   )
 }

diff --git a/test/integration/react-streaming-and-server-components/test/rsc.js b/test/integration/react-streaming-and-server-components/test/rsc.js
@@ -129,6 +129,7 @@ export default function (context, { runtime, env }) {
     expect(dynamicRoute1HTML).toContain('pathname: /routes/dynamic')
     expect(dynamicRoute2HTML).toContain('query: dynamic2')
     expect(dynamicRoute2HTML).toContain('pathname: /routes/dynamic')
+    expect(dynamicRoute1HTML).toContain('router pathname: /routes/[dynamic]')
   })
 
   it('should be able to navigate between rsc pages', async () => {