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..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, @@ -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" +}