From 05f75a38d70ac202891f0ce390bffe5ef4d12137 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Sun, 15 May 2022 15:15:15 +0200 Subject: [PATCH 1/9] Provide __webpack_require__ in all cases --- packages/next/build/webpack/loaders/next-view-loader.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/next/build/webpack/loaders/next-view-loader.ts b/packages/next/build/webpack/loaders/next-view-loader.ts index d0c1370a2901..bc4675df2b9b 100644 --- a/packages/next/build/webpack/loaders/next-view-loader.ts +++ b/packages/next/build/webpack/loaders/next-view-loader.ts @@ -119,6 +119,10 @@ const nextViewLoader: webpack.LoaderDefinitionFunction<{ export const components = { ${componentsCode.join(',\n')} }; + + export const __next_rsc__ = { + __webpack_require__ + }; ` return result } From 02948d67d9b46ff6908200a144ae0ee5111007e3 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Sun, 15 May 2022 16:25:00 +0200 Subject: [PATCH 2/9] Apply correct layer --- packages/next/build/entries.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/next/build/entries.ts b/packages/next/build/entries.ts index 2213d83bce63..524027a148bb 100644 --- a/packages/next/build/entries.ts +++ b/packages/next/build/entries.ts @@ -313,7 +313,10 @@ export function getViewsEntry(opts: { viewsDir: string pageExtensions: string[] }) { - return `next-view-loader?${stringify(opts)}!` + return { + import: `next-view-loader?${stringify(opts)}!`, + layer: 'sc_server', + } } export function getServerlessEntry(opts: { From 0f9ecc75df9f134cef40c19125a2ce91dbb2ff91 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Sun, 15 May 2022 16:30:21 +0200 Subject: [PATCH 3/9] Revert "Provide __webpack_require__ in all cases" This reverts commit 05f75a38d70ac202891f0ce390bffe5ef4d12137. --- packages/next/build/webpack/loaders/next-view-loader.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/next/build/webpack/loaders/next-view-loader.ts b/packages/next/build/webpack/loaders/next-view-loader.ts index bc4675df2b9b..d0c1370a2901 100644 --- a/packages/next/build/webpack/loaders/next-view-loader.ts +++ b/packages/next/build/webpack/loaders/next-view-loader.ts @@ -119,10 +119,6 @@ const nextViewLoader: webpack.LoaderDefinitionFunction<{ export const components = { ${componentsCode.join(',\n')} }; - - export const __next_rsc__ = { - __webpack_require__ - }; ` return result } From 381f9ebe8cafb3947565478e4cc8022a0cef489b Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Sun, 15 May 2022 16:30:24 +0200 Subject: [PATCH 4/9] Revert "Apply correct layer" This reverts commit 02948d67d9b46ff6908200a144ae0ee5111007e3. --- packages/next/build/entries.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/next/build/entries.ts b/packages/next/build/entries.ts index 524027a148bb..2213d83bce63 100644 --- a/packages/next/build/entries.ts +++ b/packages/next/build/entries.ts @@ -313,10 +313,7 @@ export function getViewsEntry(opts: { viewsDir: string pageExtensions: string[] }) { - return { - import: `next-view-loader?${stringify(opts)}!`, - layer: 'sc_server', - } + return `next-view-loader?${stringify(opts)}!` } export function getServerlessEntry(opts: { From 9b33d6e914a7be165a9cc87ee0582675ceb54f81 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Sun, 15 May 2022 16:39:03 +0200 Subject: [PATCH 5/9] Use correct layer for compilation --- packages/next/build/entries.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/next/build/entries.ts b/packages/next/build/entries.ts index 2213d83bce63..524027a148bb 100644 --- a/packages/next/build/entries.ts +++ b/packages/next/build/entries.ts @@ -313,7 +313,10 @@ export function getViewsEntry(opts: { viewsDir: string pageExtensions: string[] }) { - return `next-view-loader?${stringify(opts)}!` + return { + import: `next-view-loader?${stringify(opts)}!`, + layer: 'sc_server', + } } export function getServerlessEntry(opts: { From ccd264298ac1f924c2a06ab79c0ecaa2a12e5f54 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Sun, 15 May 2022 16:44:54 +0200 Subject: [PATCH 6/9] Ensure webpack_require is provided --- packages/next/build/webpack/loaders/next-view-loader.ts | 2 ++ packages/next/server/view-render.tsx | 7 ++++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/next/build/webpack/loaders/next-view-loader.ts b/packages/next/build/webpack/loaders/next-view-loader.ts index d0c1370a2901..4dc602c02f23 100644 --- a/packages/next/build/webpack/loaders/next-view-loader.ts +++ b/packages/next/build/webpack/loaders/next-view-loader.ts @@ -119,6 +119,8 @@ const nextViewLoader: webpack.LoaderDefinitionFunction<{ export const components = { ${componentsCode.join(',\n')} }; + + export const webpackRequire = __webpack_require__ ` return result } diff --git a/packages/next/server/view-render.tsx b/packages/next/server/view-render.tsx index 8fbdaafdec75..29e5d653b24e 100644 --- a/packages/next/server/view-render.tsx +++ b/packages/next/server/view-render.tsx @@ -165,10 +165,11 @@ function createServerComponentRenderer( ) { // We need to expose the `__webpack_require__` API globally for // react-server-dom-webpack. This is a hack until we find a better way. - if (ComponentMod.__next_rsc__) { + if (ComponentMod.webpackRequire || ComponentMod.__next_rsc__) { // @ts-ignore - globalThis.__webpack_require__ = - ComponentMod.__next_rsc__.__webpack_require__ + globalThis.__webpack_require__ = ComponentMod.webpackRequire + ? ComponentMod.webpackRequire + : ComponentMod.__next_rsc__.__webpack_require__ // @ts-ignore globalThis.__webpack_chunk_load__ = () => Promise.resolve() From a66aa277633bbc5087b6d83d36fa8bf783cfb0c4 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Mon, 16 May 2022 09:03:38 +0200 Subject: [PATCH 7/9] Add rootEnabled --- packages/next/server/load-components.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/next/server/load-components.ts b/packages/next/server/load-components.ts index fea6d8ffe300..67a31e5ef140 100644 --- a/packages/next/server/load-components.ts +++ b/packages/next/server/load-components.ts @@ -137,7 +137,8 @@ export async function loadComponents( await requirePage( normalizePagePath(pathname) + '.__sc_client__', distDir, - serverless + serverless, + rootEnabled ) } catch (_) { // This page might not be a server component page, so there is no __sc_client__ From fa725c8004a5f2f7a0aca96cd69ec412437ad2c0 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Mon, 16 May 2022 09:24:27 +0200 Subject: [PATCH 8/9] Enable client component tests for server-side --- test/e2e/views-dir/index.test.ts | 68 ++++++++++++++++++-------------- 1 file changed, 39 insertions(+), 29 deletions(-) diff --git a/test/e2e/views-dir/index.test.ts b/test/e2e/views-dir/index.test.ts index b1d1c052af59..91382a622bce 100644 --- a/test/e2e/views-dir/index.test.ts +++ b/test/e2e/views-dir/index.test.ts @@ -226,37 +226,47 @@ describe('views dir', () => { expect(html).toContain('hello from root/shared-component-route') }) - // TODO: implement - it.skip('should serve client component', async () => { - const html = await renderViaHTTP(next.url, '/client-component-route') - expect(html).toContain('hello from root/client-component-route. count: 0') - - const browser = await webdriver(next.url, '/client-component-route') - // After hydration count should be 1 - expect(await browser.elementByCss('p').text()).toBe( - 'hello from root/client-component-route. count: 1' - ) + describe('should serve client component', () => { + it('should serve server-side', async () => { + const html = await renderViaHTTP(next.url, '/client-component-route') + const $ = cheerio.load(html) + expect($('p').text()).toBe( + 'hello from root/client-component-route. count: 0' + ) + }) + + // TODO: Implement hydration + it.skip('should serve client-side', async () => { + const browser = await webdriver(next.url, '/client-component-route') + // After hydration count should be 1 + expect(await browser.elementByCss('p').text()).toBe( + 'hello from root/client-component-route. count: 1' + ) + }) }) - // TODO: implement - it.skip('should include client component layout with server component route', async () => { - const html = await renderViaHTTP(next.url, '/client-nested') - const $ = cheerio.load(html) - // Should not be nested in dashboard - expect($('h1').text()).toBe('Client Nested. Count: 0') - // Should include the page text - expect($('p').text()).toBe('hello from root/client-nested') - - const browser = await webdriver(next.url, '/client-nested') - // After hydration count should be 1 - expect(await browser.elementByCss('h1').text()).toBe( - 'Client Nested. Count: 0' - ) - - // After hydration count should be 1 - expect(await browser.elementByCss('h1').text()).toBe( - 'hello from root/client-nested' - ) + describe('should include client component layout with server component route', () => { + it('should include it server-side', async () => { + const html = await renderViaHTTP(next.url, '/client-nested') + const $ = cheerio.load(html) + // Should not be nested in dashboard + expect($('h1').text()).toBe('Client Nested. Count: 0') + // Should include the page text + expect($('p').text()).toBe('hello from root/client-nested') + }) + + // TODO: Implement hydration + it.skip('should include it client-side', async () => { + const browser = await webdriver(next.url, '/client-nested') + // After hydration count should be 1 + expect(await browser.elementByCss('h1').text()).toBe( + 'Client Nested. Count: 0' + ) + // After hydration count should be 1 + expect(await browser.elementByCss('h1').text()).toBe( + 'hello from root/client-nested' + ) + }) }) }) }) From e5b1415048808d3546364ea08657035e8a9df3a1 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Mon, 16 May 2022 11:26:22 +0200 Subject: [PATCH 9/9] Rename variable --- packages/next/build/webpack/loaders/next-view-loader.ts | 2 +- packages/next/server/view-render.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/next/build/webpack/loaders/next-view-loader.ts b/packages/next/build/webpack/loaders/next-view-loader.ts index 4dc602c02f23..481b35b2bc37 100644 --- a/packages/next/build/webpack/loaders/next-view-loader.ts +++ b/packages/next/build/webpack/loaders/next-view-loader.ts @@ -120,7 +120,7 @@ const nextViewLoader: webpack.LoaderDefinitionFunction<{ ${componentsCode.join(',\n')} }; - export const webpackRequire = __webpack_require__ + export const __next_view_webpack_require__ = __webpack_require__ ` return result } diff --git a/packages/next/server/view-render.tsx b/packages/next/server/view-render.tsx index 29e5d653b24e..a4f6c3d840b0 100644 --- a/packages/next/server/view-render.tsx +++ b/packages/next/server/view-render.tsx @@ -165,10 +165,10 @@ function createServerComponentRenderer( ) { // We need to expose the `__webpack_require__` API globally for // react-server-dom-webpack. This is a hack until we find a better way. - if (ComponentMod.webpackRequire || ComponentMod.__next_rsc__) { + if (ComponentMod.__next_view_webpack_require__ || ComponentMod.__next_rsc__) { // @ts-ignore - globalThis.__webpack_require__ = ComponentMod.webpackRequire - ? ComponentMod.webpackRequire + globalThis.__webpack_require__ = ComponentMod.__next_view_webpack_require__ + ? ComponentMod.__next_view_webpack_require__ : ComponentMod.__next_rsc__.__webpack_require__ // @ts-ignore