From 042e15d6a3704929e12248eb316880a2e4217a14 Mon Sep 17 00:00:00 2001 From: Shu Ding Date: Thu, 24 Nov 2022 21:01:54 +0100 Subject: [PATCH 1/2] fix package resolution bug --- .../plugins/flight-client-entry-plugin.ts | 21 ++++++------------- test/e2e/app-dir/app-external.test.ts | 5 +++++ .../app-external/app/client-dep/page.js | 9 ++++++++ .../node_modules_bak/client-module/index.js | 3 +++ .../node_modules_bak/client-module/index.mjs | 3 +++ .../client-module/package.json | 5 +++++ 6 files changed, 31 insertions(+), 15 deletions(-) create mode 100644 test/e2e/app-dir/app-external/app/client-dep/page.js create mode 100644 test/e2e/app-dir/app-external/node_modules_bak/client-module/index.js create mode 100644 test/e2e/app-dir/app-external/node_modules_bak/client-module/index.mjs create mode 100644 test/e2e/app-dir/app-external/node_modules_bak/client-module/package.json diff --git a/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts b/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts index 77545f5c2b85..83c79a2dbae5 100644 --- a/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts +++ b/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts @@ -379,23 +379,14 @@ export class FlightClientEntryPlugin { compilation.moduleGraph.getResolvedModule(dependencyToFilter) if (!mod) return - // Keep client imports as simple - // native or installed js module: -> raw request, e.g. next/head - // client js or css: -> user request const rawRequest = mod.rawRequest - // Request could be undefined or '' - if (!rawRequest) return - const isCSS = regexCSS.test(rawRequest) - const isLocal = - !isCSS && - !rawRequest.startsWith('.') && - !rawRequest.startsWith('/') && - !rawRequest.startsWith(APP_DIR_ALIAS) - - const modRequest: string | undefined = isLocal - ? rawRequest - : mod.resourceResolveData?.path + mod.resourceResolveData?.query + + // We have to always use the resolved request here to make sure the + // server and client are using the same module path (required by RSC), as + // the server compiler and client compiler have different resolve configs. + const modRequest: string | undefined = + mod.resourceResolveData?.path + mod.resourceResolveData?.query // Ensure module is not walked again if it's already been visited if (!visitedBySegment[entryRequest]) { diff --git a/test/e2e/app-dir/app-external.test.ts b/test/e2e/app-dir/app-external.test.ts index f80c78aacc87..a30ffc420ba0 100644 --- a/test/e2e/app-dir/app-external.test.ts +++ b/test/e2e/app-dir/app-external.test.ts @@ -147,6 +147,11 @@ describe('app dir - external dependency', () => { ).toBe('rgb(255, 0, 0)') }) + it('should use the same export type for packages in both ssr and client', async () => { + const browser = await webdriver(next.url, '/client-dep') + expect(await browser.eval(`window.document.body.innerText`)).toBe('hello') + }) + it('should handle external css modules in pages', async () => { const browser = await webdriver(next.url, '/test-pages') diff --git a/test/e2e/app-dir/app-external/app/client-dep/page.js b/test/e2e/app-dir/app-external/app/client-dep/page.js new file mode 100644 index 000000000000..ad1857f515b1 --- /dev/null +++ b/test/e2e/app-dir/app-external/app/client-dep/page.js @@ -0,0 +1,9 @@ +import Foo from 'client-module' + +export default function Index() { + return ( +
+ +
+ ) +} diff --git a/test/e2e/app-dir/app-external/node_modules_bak/client-module/index.js b/test/e2e/app-dir/app-external/node_modules_bak/client-module/index.js new file mode 100644 index 000000000000..d992d053fe4e --- /dev/null +++ b/test/e2e/app-dir/app-external/node_modules_bak/client-module/index.js @@ -0,0 +1,3 @@ +'use client' + +module.exports = () => 'hello' diff --git a/test/e2e/app-dir/app-external/node_modules_bak/client-module/index.mjs b/test/e2e/app-dir/app-external/node_modules_bak/client-module/index.mjs new file mode 100644 index 000000000000..0572a6628410 --- /dev/null +++ b/test/e2e/app-dir/app-external/node_modules_bak/client-module/index.mjs @@ -0,0 +1,3 @@ +'use client' + +export default () => 'hello' diff --git a/test/e2e/app-dir/app-external/node_modules_bak/client-module/package.json b/test/e2e/app-dir/app-external/node_modules_bak/client-module/package.json new file mode 100644 index 000000000000..d1b194ceeaec --- /dev/null +++ b/test/e2e/app-dir/app-external/node_modules_bak/client-module/package.json @@ -0,0 +1,5 @@ +{ + "name": "client-module", + "main": "index.js", + "module": "index.mjs" +} From 5a0f85d3f688920c5b623b075a33c6677a2c1be7 Mon Sep 17 00:00:00 2001 From: Shu Ding Date: Thu, 24 Nov 2022 22:36:08 +0100 Subject: [PATCH 2/2] fix lint error --- .../next/build/webpack/plugins/flight-client-entry-plugin.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts b/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts index 83c79a2dbae5..b8c483ceba37 100644 --- a/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts +++ b/packages/next/build/webpack/plugins/flight-client-entry-plugin.ts @@ -12,7 +12,7 @@ import { entries, EntryTypes, } from '../../../server/dev/on-demand-entry-handler' -import { APP_DIR_ALIAS, WEBPACK_LAYERS } from '../../../lib/constants' +import { WEBPACK_LAYERS } from '../../../lib/constants' import { APP_CLIENT_INTERNALS, COMPILER_NAMES,