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

timneutkens · 2022-01-25T13:32:45Z

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 · 2022-01-25T16:06:32Z

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.

…le-support

ijjk · 2022-02-15T16:08:02Z

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 · 2022-02-15T17:40:52Z

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.

see: vercel/next.js#33637 https://github.com/timneutkens/next.js/blob/99dceb60faae6b00faed75db795ef24107934227/packages/next/build/index.ts#L537-L540

This allows to remove the hack for `"type": "module"` in `package.json`. Ref: vercel/next.js#33637

kachkaev · 2022-02-15T20:12:39Z

Works on my machine™ 👏👏👏

rafipiccolo · 2022-02-18T13:01:50Z

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

node: v17.5.0
nextjs: v12.1.0

install default app :

$> npx create-next-app@latest

edit package.json to add "type": "module" :
i check nextjs version : 12.1.0 (which should be nice)
change next.config.js to be in esm format

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

start it

$> npm run dev

> [email protected] 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 · 2022-02-18T13:33:25Z

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

Add failing test for package.json holding "type": "module"

6a10972

ijjk added the created-by: Next.js team PRs by the Next.js team. label Jan 25, 2022

This comment has been minimized.

Sign in to view

timneutkens added 2 commits January 25, 2022 15:06

Write "type": "commonjs" package.json to .next

cb2a449

Add failing test for client-side development

7b11582

ijjk added the type: next label Jan 25, 2022

This comment has been minimized.

Sign in to view

kachkaev mentioned this pull request Jan 25, 2022

Issue with backend-side ES6 imports with "type":"module" with an express/nextjs setup #24334

Closed

timneutkens commented Jan 25, 2022

View reviewed changes

JacobLey mentioned this pull request Jan 28, 2022

Webpack 5 does not correctly transpile .js file with "type":"module" #23029

Closed

kachkaev mentioned this pull request Feb 4, 2022

Compose some site scripts to reduce complexity of package.json blockprotocol/blockprotocol#189

Merged

timneutkens added 2 commits February 14, 2022 10:48

Merge branch 'canary' of github.com:vercel/next.js into add/type-modu…

770d29c

…le-support

Update react-refresh runtime to be compatible with esmodules in webpack

7e17e17

This comment has been minimized.

Sign in to view

Use right path for distDir

ef38e24

This comment has been minimized.

Sign in to view

Fix hot accept

fcf8b34

This comment has been minimized.

Sign in to view

Revert changes to webpack-config

9da70cf

This comment was marked as outdated.

Sign in to view

This comment has been minimized.

Sign in to view

Fix issue with .cjs files not having import.meta

3c000c7

timneutkens marked this pull request as ready for review February 15, 2022 14:47

timneutkens requested review from ijjk and shuding as code owners February 15, 2022 14:47

timneutkens requested review from padmaia and huozhi as code owners February 15, 2022 14:47

This comment has been minimized.

Sign in to view

huozhi approved these changes Feb 15, 2022

View reviewed changes

Merge branch 'canary' into add/type-module-support

99dceb6

ijjk approved these changes Feb 15, 2022

View reviewed changes

kodiakhq bot merged commit 62b1704 into vercel:canary Feb 15, 2022

timneutkens deleted the add/type-module-support branch February 15, 2022 18:15

kachkaev added a commit to kachkaev/tooling-for-how-old-is-this-house that referenced this pull request Feb 15, 2022

Upgrade Next.js to 12.0.11-canary.16

2b27ad4

This allows to remove the hack for `"type": "module"` in `package.json`. Ref: vercel/next.js#33637

shishkin mentioned this pull request Feb 24, 2022

Lambda@Edge Builder fails on ESM modules serverless-nextjs/serverless-next.js#2391

Open

3 tasks

sangotaro mentioned this pull request Feb 25, 2022

[NEXT-781] strict mode error for projects that do not specify "type": "module" #34796

Open

1 task

keepeek-rd mentioned this pull request Mar 8, 2022

The development mode no longer works with a library imported via Yalc #35110

Open

1 task

github-actions bot locked as resolved and limited conversation to collaborators Mar 21, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

timneutkens commented Jan 25, 2022 •

edited

Loading

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

kachkaev commented Jan 25, 2022 •

edited

Loading

timneutkens left a comment

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment was marked as outdated.

This comment has been minimized.

This comment has been minimized.

ijjk commented Feb 15, 2022

ctjlewis commented Feb 15, 2022

kachkaev commented Feb 15, 2022

rafipiccolo commented Feb 18, 2022 •

edited

Loading

timneutkens commented Feb 18, 2022

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

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

Conversation

timneutkens commented Jan 25, 2022 • edited Loading

Bug

Feature

Documentation / Examples

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

kachkaev commented Jan 25, 2022 • edited Loading

timneutkens left a comment

Choose a reason for hiding this comment

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment was marked as outdated.

This comment has been minimized.

This comment has been minimized.

ijjk commented Feb 15, 2022

Stats from current PR

ctjlewis commented Feb 15, 2022

kachkaev commented Feb 15, 2022

rafipiccolo commented Feb 18, 2022 • edited Loading

timneutkens commented Feb 18, 2022

timneutkens commented Jan 25, 2022 •

edited

Loading

kachkaev commented Jan 25, 2022 •

edited

Loading

rafipiccolo commented Feb 18, 2022 •

edited

Loading