Add support for "type": "module" in package.json

[timneutkens]

• Add failing test for development / production
• Add failing test for client-side JavaScript
• Write .next/package.json with `"type": "commonjs"
• Fix issue with client-side JavaScript showing module is not defined

Production works after these changes. Development breaks on module not existing because of the Fast Refresh loader. Working with @sokra to add alternatives to what is being used in the loader to webpack so that it can be updated.

Fixes #23029, Fixes #24334

Bug

• Related issues linked using fixes #number
• Integration tests added
• Errors have helpful link attached, see contributing.md

Feature

• Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
• Related issues linked using fixes #number
• Integration tests added
• Documentation added
• Telemetry added. In case of a feature if it's used or not.
• Errors have helpful link attached, see contributing.md

Documentation / Examples

• Make sure the linting passes by running yarn lint

[kachkaev]

Happy to test this change when a new canary release is out 😍 Using #32220 (comment) as a hack in the meantime.

[timneutkens]

Production works after these changes. Development breaks on module not existing because of the Fast Refresh loader. Working with @sokra to add alternatives to what is being used in the loader to webpack so that it can be updated.

[ijjk]

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	timneutkens/next.js add/type-module-support	Change
buildDuration	18.1s	18s	-162ms
buildDurationCached	7.2s	7s	-208ms
nodeModulesSize	359 MB	359 MB	⚠️ +1.9 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	timneutkens/next.js add/type-module-support	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.883	3.8	-0.08
/ avg req/sec	643.87	657.84	+13.97
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.696	1.604	-0.09
/error-in-render avg req/sec	1473.96	1558.86	+84.9

Client Bundles (main, webpack, commons)

	vercel/next.js canary	timneutkens/next.js add/type-module-support	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	27.9 kB	27.9 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71.5 kB	71.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	timneutkens/next.js add/type-module-support	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	timneutkens/next.js add/type-module-support	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	326 B	326 B	✓
dynamic-HASH.js gzip	2.57 kB	2.57 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	919 B	919 B	✓
image-HASH.js gzip	5.01 kB	5.01 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.26 kB	2.26 kB	✓
routerDirect..HASH.js gzip	321 B	321 B	✓
script-HASH.js gzip	383 B	383 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.7 kB	14.7 kB	✓

Client Build Manifests

	vercel/next.js canary	timneutkens/next.js add/type-module-support	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes

	vercel/next.js canary	timneutkens/next.js add/type-module-support	Change
index.html gzip	532 B	532 B	✓
link.html gzip	545 B	545 B	✓
withRouter.html gzip	526 B	526 B	✓
Overall change	1.6 kB	1.6 kB	✓

---

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	timneutkens/next.js add/type-module-support	Change
buildDuration	22.2s	22s	-245ms
buildDurationCached	7.1s	7.3s	⚠️ +136ms
nodeModulesSize	359 MB	359 MB	⚠️ +1.9 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	timneutkens/next.js add/type-module-support	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.878	3.781	-0.1
/ avg req/sec	644.68	661.23	+16.55
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.664	1.591	-0.07
/error-in-render avg req/sec	1502.16	1571.53	+69.37

Client Bundles (main, webpack, commons)

	vercel/next.js canary	timneutkens/next.js add/type-module-support	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.1 kB	42.1 kB	✓
main-HASH.js gzip	27.9 kB	27.9 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	71.6 kB	71.6 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	timneutkens/next.js add/type-module-support	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	timneutkens/next.js add/type-module-support	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	305 B	305 B	✓
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.56 kB	2.56 kB	✓
head-HASH.js gzip	342 B	342 B	✓
hooks-HASH.js gzip	911 B	911 B	✓
image-HASH.js gzip	5.05 kB	5.05 kB	✓
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	2.28 kB	2.28 kB	✓
routerDirect..HASH.js gzip	314 B	314 B	✓
script-HASH.js gzip	375 B	375 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	14.7 kB	14.7 kB	✓

Client Build Manifests

	vercel/next.js canary	timneutkens/next.js add/type-module-support	Change
_buildManifest.js gzip	458 B	458 B	✓
Overall change	458 B	458 B	✓

Rendered Page Sizes

	vercel/next.js canary	timneutkens/next.js add/type-module-support	Change
index.html gzip	533 B	533 B	✓
link.html gzip	546 B	546 B	✓
withRouter.html gzip	527 B	527 B	✓
Overall change	1.61 kB	1.61 kB	✓

Commit: 99dceb6

[ctjlewis]

Excellent work @timneutkens @sokra.

Very cool approach emitting {distDir}/package.json to with { type: ... } to force ESM/CJS resolution, used that approach myself recently and doesn't feel so hacky now.

[kachkaev]

Works on my machine™ 👏👏👏

[rafipiccolo]

hello,
i am having errors when running the default app.

node: v17.5.0
nextjs: v12.1.0

1. install default app :

$> npx create-next-app@latest

2. edit package.json to add "type": "module" :
   i check nextjs version : 12.1.0 (which should be nice)

3. change next.config.js to be in esm format

/** @type {import('next').NextConfig} */
export default {
    reactStrictMode: true,
}

start it

$> npm run dev

> cv2@0.1.0 dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 2.1s (123 modules)
wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 200 ms (124 modules)
wait  - compiling / (client and server)...
event - compiled client and server successfully in 447 ms (140 modules)
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check your code at index.js:8.
    at Home
    at MyApp (webpack-internal:///./pages/_app.js:9:18)
    at StyleRegistry (/root/docker/cv2/node_modules/styled-jsx/dist/index/index.js:671:34)
    at AppContainer (/root/docker/cv2/node_modules/next/dist/server/render.js:415:29)
    at AppContainerWithIsomorphicFiberStructure (/root/docker/cv2/node_modules/next/dist/server/render.js:447:57)
    at div
    at Body (/root/docker/cv2/node_modules/next/dist/server/render.js:715:21)
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check your code at index.js:63.
    at Home
    at MyApp (webpack-internal:///./pages/_app.js:9:18)
    at StyleRegistry (/root/docker/cv2/node_modules/styled-jsx/dist/index/index.js:671:34)
    at AppContainer (/root/docker/cv2/node_modules/next/dist/server/render.js:415:29)
    at AppContainerWithIsomorphicFiberStructure (/root/docker/cv2/node_modules/next/dist/server/render.js:447:57)
    at div
    at Body (/root/docker/cv2/node_modules/next/dist/server/render.js:715:21)
error - Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

am i missing a step ? or is there still some work to do to have the default app running is esm style ?

EDIT: i have to admit that when i remove all inside pages directory to let only this file it now works.

// pages/index.js
export default function Home() {
    return (
        <div>
            Hello
        </div>
    )
}

[timneutkens]

This is likely because you're importing libraries that don't expose ESM yet: #34412