Fix mixed module swc compilation for app router

[huozhi]

After we landed #57784 we started to prefer ESM assets of 3rd party packages in app router bundles including both server (RSC, SSR layers) and client. But some of the packages are not 100% correct format for ES Module.

The packages triggered the bundling errors:

e.g. @pathfinder-ide/react includes the below code

if (typeof module < "u")
  try {
    module.exports = Fd, Object.defineProperty(Fd, "__esModule", { value: !0 }), Fd.default = Fd, Fd.outdent = Fd;
  } catch {

which makes next-swc compiler think it's a CJS module since we didn't specify the output module type. Then you saw sometimes import a module will result into failed module exports resolving.

In #57962 it's the same case that when you import the mixed type of code into page, it might be compiled to CJS so you lost the ESM exports.

Solution

To align the preferred module type and compiled result, we explicitly specify the output module type to "esm", then it will still bundle as ESM. Though mixing two types of code is dangerous and will make the module type ambiguous.

Fixes #58831
Fixes #57964
Fixes #57962

Closes #58572 (incorrect fix)

[ijjk]

Tests Passed

[ijjk]

Stats from current PR

Default Build (Increase detected ⚠️)

General

	vercel/next.js canary	vercel/next.js fix/esm-external-dynamic	Change
buildDuration	10.6s	10.7s	⚠️ +102ms
buildDurationCached	6s	6.7s	⚠️ +641ms
nodeModulesSize	199 MB	199 MB	N/A
nextStartRea..uration (ms)	422ms	419ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js fix/esm-external-dynamic	Change
199-HASH.js gzip	30.7 kB	30.7 kB	N/A
3f784ff6-HASH.js gzip	53.3 kB	53.3 kB	✓
494.HASH.js gzip	180 B	181 B	N/A
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	241 B	239 B	N/A
main-HASH.js gzip	31.7 kB	31.7 kB	N/A
webpack-HASH.js gzip	1.7 kB	1.7 kB	✓
Overall change	100 kB	100 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js fix/esm-external-dynamic	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js fix/esm-external-dynamic	Change
_app-HASH.js gzip	194 B	195 B	N/A
_error-HASH.js gzip	182 B	181 B	N/A
amp-HASH.js gzip	501 B	503 B	N/A
css-HASH.js gzip	322 B	323 B	N/A
dynamic-HASH.js gzip	2.5 kB	2.5 kB	✓
edge-ssr-HASH.js gzip	253 B	255 B	N/A
head-HASH.js gzip	348 B	347 B	N/A
hooks-HASH.js gzip	369 B	368 B	N/A
image-HASH.js gzip	4.27 kB	4.27 kB	N/A
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	2.61 kB	2.6 kB	N/A
routerDirect..HASH.js gzip	311 B	311 B	✓
script-HASH.js gzip	384 B	383 B	N/A
withRouter-HASH.js gzip	307 B	308 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	3.17 kB	3.17 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js fix/esm-external-dynamic	Change
_buildManifest.js gzip	484 B	483 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js fix/esm-external-dynamic	Change
index.html gzip	528 B	526 B	N/A
link.html gzip	538 B	541 B	N/A
withRouter.html gzip	523 B	523 B	✓
Overall change	523 B	523 B	✓

Edge SSR bundle Size Overall increase ⚠️

	vercel/next.js canary	vercel/next.js fix/esm-external-dynamic	Change
edge-ssr.js gzip	92.6 kB	92.6 kB	N/A
page.js gzip	145 kB	146 kB	⚠️ +159 B
Overall change	145 kB	146 kB	⚠️ +159 B

Middleware size

	vercel/next.js canary	vercel/next.js fix/esm-external-dynamic	Change
middleware-b..fest.js gzip	626 B	628 B	N/A
middleware-r..fest.js gzip	150 B	151 B	N/A
middleware.js gzip	35.7 kB	35.7 kB	N/A
edge-runtime..pack.js gzip	1.92 kB	1.92 kB	✓
Overall change	1.92 kB	1.92 kB	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js fix/esm-external-dynamic	Change
app-page-exp...dev.js gzip	168 kB	168 kB	N/A
app-page-exp..prod.js gzip	93.8 kB	93.7 kB	N/A
app-page-tur..prod.js gzip	94.5 kB	94.5 kB	N/A
app-page-tur..prod.js gzip	89.1 kB	89 kB	N/A
app-page.run...dev.js gzip	138 kB	138 kB	N/A
app-page.run..prod.js gzip	88.4 kB	88.4 kB	N/A
app-route-ex...dev.js gzip	24.2 kB	24.2 kB	✓
app-route-ex..prod.js gzip	16.8 kB	16.8 kB	✓
app-route-tu..prod.js gzip	16.9 kB	16.9 kB	✓
app-route-tu..prod.js gzip	16.4 kB	16.4 kB	✓
app-route.ru...dev.js gzip	23.6 kB	23.6 kB	✓
app-route.ru..prod.js gzip	16.4 kB	16.4 kB	✓
pages-api-tu..prod.js gzip	9.37 kB	9.37 kB	✓
pages-api.ru...dev.js gzip	9.64 kB	9.64 kB	✓
pages-api.ru..prod.js gzip	9.37 kB	9.37 kB	✓
pages-turbo...prod.js gzip	21.9 kB	21.9 kB	✓
pages.runtim...dev.js gzip	22.6 kB	22.6 kB	✓
pages.runtim..prod.js gzip	21.9 kB	21.9 kB	✓
server.runti..prod.js gzip	49.3 kB	49.3 kB	✓
Overall change	258 kB	258 kB	✓

Diff details

Diff for page.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js

failed to diff

Diff for app-page-exp..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page.runtime.dev.js

Diff too large to display

Diff for app-page.runtime.prod.js

Diff too large to display

Commit: 457de36

[lukasIO]

But some of the packages are not 100% correct format for ES Module.

could you elaborate on this? Happy to make adjustments for our libraries if that's the case.

My finding was (reproduced both in #58592 and #57962) that the bug is triggered when there's a locally scoped reference to module.exports. E.g.

function (module) {
  module.exports = "this should just be a locally scoped var assignment with no side effects"
}

makes the ESM detection fail. It could because of next-swc has some special logic of detecting CJS

[huozhi]

@lukasIO one case was what mentioned in #57962 that the mjs is including both module.exports and export const, I think that's where confused swc to determine the module type. Since the default module type is not set, so swc will determine module type based on the code. It could be detection issue but for app router layers we should explicitly set the module type to ESM

(module) => {
  module.exports = {};
};

export const bar = "baz";

[lukasIO]

got it, thanks for the insight.
I agree that it sounds like the SWC module detection is failing to take the scope into account.