From 3d269499b82d59ca5a7eda7cc38421308e8f9bb8 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Mon, 30 Oct 2023 23:38:56 +0100 Subject: [PATCH 1/2] Fix nested esm package default import resolving mismatch --- packages/next/src/build/webpack-config.ts | 3 +-- test/e2e/app-dir/app-external/app-external.test.ts | 3 +++ test/e2e/app-dir/app-external/app/esm/client/page.js | 2 ++ .../node_modules_bak/nested-import-export-default/index.cjs | 3 +++ .../node_modules_bak/nested-import-export-default/index.mjs | 5 +++++ .../nested-import-export-default/package.json | 6 ++++++ 6 files changed, 20 insertions(+), 2 deletions(-) create mode 100644 test/e2e/app-dir/app-external/node_modules_bak/nested-import-export-default/index.cjs create mode 100644 test/e2e/app-dir/app-external/node_modules_bak/nested-import-export-default/index.mjs create mode 100644 test/e2e/app-dir/app-external/node_modules_bak/nested-import-export-default/package.json diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts index 8223e506e8037..2126c5b952f42 100644 --- a/packages/next/src/build/webpack-config.ts +++ b/packages/next/src/build/webpack-config.ts @@ -1401,12 +1401,11 @@ export default async function getBaseWebpackConfig( use: swcLoaderForServerLayer, }, { - ...codeCondition, + test: codeCondition.test, issuerLayer: [ WEBPACK_LAYERS.appPagesBrowser, WEBPACK_LAYERS.serverSideRendering, ], - exclude: codeCondition.exclude, use: swcLoaderForClientLayer, resolve: { mainFields: getMainField('app', compilerType), diff --git a/test/e2e/app-dir/app-external/app-external.test.ts b/test/e2e/app-dir/app-external/app-external.test.ts index b4e66cb205966..dbf044d7324cc 100644 --- a/test/e2e/app-dir/app-external/app-external.test.ts +++ b/test/e2e/app-dir/app-external/app-external.test.ts @@ -168,6 +168,9 @@ createNextDescribe( 'CJS-ESM Compat package: cjs-esm-compat/index.mjs' ) expect(html).toContain('CJS package: cjs-lib') + expect(html).toContain( + 'Nested imports: nested-import:esm:cjs-esm-compat/index.mjs' + ) }) it('should use the same react in server app', async () => { diff --git a/test/e2e/app-dir/app-external/app/esm/client/page.js b/test/e2e/app-dir/app-external/app/esm/client/page.js index eaf90cd08743d..98fd9d66c4999 100644 --- a/test/e2e/app-dir/app-external/app/esm/client/page.js +++ b/test/e2e/app-dir/app-external/app/esm/client/page.js @@ -4,6 +4,7 @@ import React from 'react' import { version, useValue } from 'esm-with-react' import { packageEntry as compatPackageEntry } from 'cjs-esm-compat' import { packageName } from 'cjs-lib' +import nestedImportExportDefaultValue from 'nested-import-export-default' export default function Index() { const value = useValue() @@ -14,6 +15,7 @@ export default function Index() {

{'Test: ' + value}

{`CJS-ESM Compat package: ${compatPackageEntry}`}

{`CJS package: ${packageName}`}

+

{`Nested imports: ${nestedImportExportDefaultValue}`}

) } diff --git a/test/e2e/app-dir/app-external/node_modules_bak/nested-import-export-default/index.cjs b/test/e2e/app-dir/app-external/node_modules_bak/nested-import-export-default/index.cjs new file mode 100644 index 0000000000000..fb0f843a10a24 --- /dev/null +++ b/test/e2e/app-dir/app-external/node_modules_bak/nested-import-export-default/index.cjs @@ -0,0 +1,3 @@ +const value = require('cjs-esm-compat').packageEntry + +exports.default = 'nested-import:cjs:' + value diff --git a/test/e2e/app-dir/app-external/node_modules_bak/nested-import-export-default/index.mjs b/test/e2e/app-dir/app-external/node_modules_bak/nested-import-export-default/index.mjs new file mode 100644 index 0000000000000..5f8eef500e9b1 --- /dev/null +++ b/test/e2e/app-dir/app-external/node_modules_bak/nested-import-export-default/index.mjs @@ -0,0 +1,5 @@ +import { packageEntry as value } from 'cjs-esm-compat' + +const packageEntry = 'nested-import:esm:' + value + +export default packageEntry diff --git a/test/e2e/app-dir/app-external/node_modules_bak/nested-import-export-default/package.json b/test/e2e/app-dir/app-external/node_modules_bak/nested-import-export-default/package.json new file mode 100644 index 0000000000000..3646ad4bdb5f5 --- /dev/null +++ b/test/e2e/app-dir/app-external/node_modules_bak/nested-import-export-default/package.json @@ -0,0 +1,6 @@ +{ + "exports": { + "import": "./index.mjs", + "require": "./index.cjs" + } +} From bac6bc5825b3c94efbe87d35842da0e883ff8980 Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Tue, 31 Oct 2023 00:37:14 +0100 Subject: [PATCH 2/2] fix hmr --- packages/next/src/build/webpack-config.ts | 36 +++++++++++++++-------- 1 file changed, 23 insertions(+), 13 deletions(-) diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts index 2126c5b952f42..32559ce10e9af 100644 --- a/packages/next/src/build/webpack-config.ts +++ b/packages/next/src/build/webpack-config.ts @@ -730,13 +730,8 @@ export default async function getBaseWebpackConfig( const shouldIncludeExternalDirs = config.experimental.externalDir || !!config.transpilePackages - const codeCondition = { - test: /\.(tsx|ts|js|cjs|mjs|jsx)$/, - ...(shouldIncludeExternalDirs - ? // Allowing importing TS/TSX files from outside of the root dir. - {} - : { include: [dir, ...babelIncludeRegexes] }), - exclude: (excludePath: string) => { + function createLoaderRuleExclude(skipNodeModules: boolean) { + return (excludePath: string) => { if (babelIncludeRegexes.some((r) => r.test(excludePath))) { return false } @@ -747,8 +742,17 @@ export default async function getBaseWebpackConfig( ) if (shouldBeBundled) return false - return excludePath.includes('node_modules') - }, + return skipNodeModules && excludePath.includes('node_modules') + } + } + + const codeCondition = { + test: /\.(tsx|ts|js|cjs|mjs|jsx)$/, + ...(shouldIncludeExternalDirs + ? // Allowing importing TS/TSX files from outside of the root dir. + {} + : { include: [dir, ...babelIncludeRegexes] }), + exclude: createLoaderRuleExclude(true), } let webpackConfig: webpack.Configuration = { @@ -1402,10 +1406,16 @@ export default async function getBaseWebpackConfig( }, { test: codeCondition.test, - issuerLayer: [ - WEBPACK_LAYERS.appPagesBrowser, - WEBPACK_LAYERS.serverSideRendering, - ], + exclude: codeCondition.exclude, + issuerLayer: [WEBPACK_LAYERS.appPagesBrowser], + use: swcLoaderForClientLayer, + resolve: { + mainFields: getMainField('app', compilerType), + }, + }, + { + test: codeCondition.test, + issuerLayer: [WEBPACK_LAYERS.serverSideRendering], use: swcLoaderForClientLayer, resolve: { mainFields: getMainField('app', compilerType),