Switch to .cjs PostCSS config #58380

karlhorky · 2023-11-13T13:08:18Z

What?

Prevent confusing error messages when changing to "type": "module" in package.json

./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!./src/styles/index.css
Error [ERR_REQUIRE_ESM]: require() of ES Module /path/to/my/repo/components/postcss.config.js from /path/to/my/repo/components/node_modules/next/dist/lib/find-config.js not supported.
Instead change the require of postcss.config.js in /path/to/my/repo/components/node_modules/next/dist/lib/find-config.js to a dynamic import() which is available in all CommonJS modules.

Why?

Even though PostCSS itself supports ESM and TypeScript configuration files, Next.js itself does not (because of next/lib/find-config):

next/lib/find-config does not support ESM config files #34448

How?

By switching to .cjs, the config will stay recognized as CommonJS even after switching to "type": "module" in package.json

cc @balazsorban44

ijjk · 2023-11-13T13:08:48Z

Allow CI Workflow Run

approve CI run for commit: d590e3f

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

ijjk · 2023-11-13T13:08:48Z

Allow CI Workflow Run

approve CI run for commit: d590e3f

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

ijjk · 2023-11-13T13:08:48Z

Allow CI Workflow Run

approve CI run for commit: 4a3723b

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

samcx

Thank you for submitting a :pr: !

:lgtm:

samcx · 2024-03-08T23:36:32Z

@karlhorky I think we just need to handle the conflicts and we'll good to :merged:

karlhorky · 2024-03-09T09:28:19Z

@samcx thanks for the review and approval! Just merged in canary, it should be ready for merging now.

ijjk · 2024-03-09T18:36:23Z

Tests Passed

ijjk · 2024-03-09T18:39:02Z

Stats from current PR

Default Build (Increase detected ⚠️)

General

	vercel/next.js canary	karlhorky/next.js patch-6	Change
buildDuration	14s	14.1s	N/A
buildDurationCached	7.5s	6.2s	N/A
nodeModulesSize	198 MB	198 MB	✓
nextStartRea..uration (ms)	435ms	434ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	karlhorky/next.js patch-6	Change
2453-HASH.js gzip	30.5 kB	30.5 kB	N/A
3304.HASH.js gzip	181 B	181 B	✓
3f784ff6-HASH.js gzip	53.7 kB	53.7 kB	N/A
8299-HASH.js gzip	5.04 kB	5.04 kB	N/A
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	241 B	243 B	N/A
main-HASH.js gzip	32.2 kB	32.2 kB	N/A
webpack-HASH.js gzip	1.68 kB	1.68 kB	N/A
Overall change	45.4 kB	45.4 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	karlhorky/next.js patch-6	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	karlhorky/next.js patch-6	Change
_app-HASH.js gzip	196 B	197 B	N/A
_error-HASH.js gzip	184 B	184 B	✓
amp-HASH.js gzip	505 B	505 B	✓
css-HASH.js gzip	324 B	325 B	N/A
dynamic-HASH.js gzip	2.5 kB	2.5 kB	N/A
edge-ssr-HASH.js gzip	258 B	258 B	✓
head-HASH.js gzip	352 B	352 B	✓
hooks-HASH.js gzip	370 B	371 B	N/A
image-HASH.js gzip	4.21 kB	4.21 kB	✓
index-HASH.js gzip	259 B	259 B	✓
link-HASH.js gzip	2.67 kB	2.67 kB	N/A
routerDirect..HASH.js gzip	314 B	312 B	N/A
script-HASH.js gzip	386 B	386 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	6.57 kB	6.57 kB	✓

Client Build Manifests

	vercel/next.js canary	karlhorky/next.js patch-6	Change
_buildManifest.js gzip	481 B	484 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	karlhorky/next.js patch-6	Change
index.html gzip	530 B	528 B	N/A
link.html gzip	540 B	540 B	✓
withRouter.html gzip	524 B	522 B	N/A
Overall change	540 B	540 B	✓

Edge SSR bundle Size

	vercel/next.js canary	karlhorky/next.js patch-6	Change
edge-ssr.js gzip	95.1 kB	95.1 kB	N/A
page.js gzip	3.07 kB	3.07 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	karlhorky/next.js patch-6	Change
middleware-b..fest.js gzip	625 B	624 B	N/A
middleware-r..fest.js gzip	151 B	151 B	✓
middleware.js gzip	25.5 kB	25.5 kB	N/A
edge-runtime..pack.js gzip	839 B	839 B	✓
Overall change	990 B	990 B	✓

Next Runtimes

	vercel/next.js canary	karlhorky/next.js patch-6	Change
app-page-exp...dev.js gzip	171 kB	171 kB	✓
app-page-exp..prod.js gzip	96.5 kB	96.5 kB	✓
app-page-tur..prod.js gzip	98.3 kB	98.3 kB	✓
app-page-tur..prod.js gzip	92.7 kB	92.7 kB	✓
app-page.run...dev.js gzip	149 kB	149 kB	✓
app-page.run..prod.js gzip	91.2 kB	91.2 kB	✓
app-route-ex...dev.js gzip	21.3 kB	21.3 kB	✓
app-route-ex..prod.js gzip	15 kB	15 kB	✓
app-route-tu..prod.js gzip	15 kB	15 kB	✓
app-route-tu..prod.js gzip	14.8 kB	14.8 kB	✓
app-route.ru...dev.js gzip	21 kB	21 kB	✓
app-route.ru..prod.js gzip	14.8 kB	14.8 kB	✓
pages-api-tu..prod.js gzip	9.52 kB	9.52 kB	✓
pages-api.ru...dev.js gzip	9.8 kB	9.8 kB	✓
pages-api.ru..prod.js gzip	9.52 kB	9.52 kB	✓
pages-turbo...prod.js gzip	22.3 kB	22.3 kB	✓
pages.runtim...dev.js gzip	22.9 kB	22.9 kB	✓
pages.runtim..prod.js gzip	22.3 kB	22.3 kB	✓
server.runti..prod.js gzip	50.5 kB	50.5 kB	✓
Overall change	948 kB	948 kB	✓

build cache Overall increase ⚠️

	vercel/next.js canary	karlhorky/next.js patch-6	Change
0.pack gzip	1.56 MB	1.56 MB	⚠️ +1.22 kB
index.pack gzip	105 kB	105 kB	N/A
Overall change	1.56 MB	1.56 MB	⚠️ +1.22 kB

Diff details

Diff for middleware.js

Diff too large to display

Commit: a734a34

karlhorky · 2024-03-10T07:04:10Z

@samcx seems like one test is timing out here, is it easy to re-run it?

Or if it's an unrelated test failure, should it just be ignored and the PR merged as-is?

samcx · 2024-03-11T18:15:18Z

@karlhorky I was looking into the test—could just be a flaky cache issue, so I was looking into it. No worries about merging the latest canary—I'm still taking a look!

…atch-6

karlhorky · 2024-03-15T10:47:48Z

@samcx thanks for the review and merge!

I can confirm that this is working with create-next-app@canary 🎉 (see below)

I'm assuming that this will be released in [email protected] or [email protected]

➜  p mkdir aa
➜  p cd aa
➜  aa pnpm create next-app@canary . --app --no-eslint --no-src-dir --import-alias @/\* --tailwind

.../Library/pnpm/store/v3/tmp/dlx-77997  |   +1 +
.../Library/pnpm/store/v3/tmp/dlx-77997  | Progress: resolved 1, reused 0, downloaded 1, added 1, done
✔ Would you like to use TypeScript? … No / Yes
Creating a new Next.js app in /Users/k/p/aa.

Using pnpm.

Initializing project with template: app-tw


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- postcss
- tailwindcss

Progress: resolved 85, reused 74, downloaded 0, added 0
Downloading registry.npmjs.org/next/14.2.0-canary.23: 20.49 MB/20.49 MB, done
Packages: +124
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Downloading registry.npmjs.org/@next/swc-darwin-arm64/14.2.0-canary.23: 36.71 MB/36.71 MB, done
Progress: resolved 132, reused 121, downloaded 3, added 124, done

dependencies:
+ next 14.2.0-canary.23
+ react 18.2.0
+ react-dom 18.2.0

devDependencies:
+ postcss 8.4.35
+ tailwindcss 3.4.1

Done in 7.5s
Initialized a git repository.

Success! Created aa at /Users/k/p/aa

➜  aa git:(main) ls -al
total 120
drwxr-xr-x  14 k  staff    448 Mar 15 11:02 .
drwxr-xr-x  63 k  staff   2016 Mar 15 11:02 ..
drwxr-xr-x  12 k  staff    384 Mar 15 11:02 .git
-rw-r--r--   1 k  staff    391 Mar 15 11:02 .gitignore
-rw-r--r--   1 k  staff   1382 Mar 15 11:02 README.md
drwxr-xr-x   6 k  staff    192 Mar 15 11:02 app
-rw-r--r--   1 k  staff     73 Mar 15 11:02 jsconfig.json
-rw-r--r--   1 k  staff     92 Mar 15 11:02 next.config.mjs
drwxr-xr-x  10 k  staff    320 Mar 15 11:02 node_modules
-rw-r--r--   1 k  staff    358 Mar 15 11:02 package.json
-rw-r--r--   1 k  staff  32753 Mar 15 11:02 pnpm-lock.yaml
-rw-r--r--   1 k  staff     61 Mar 15 11:02 postcss.config.cjs
drwxr-xr-x   4 k  staff    128 Mar 15 11:02 public
-rw-r--r--   1 k  staff    469 Mar 15 11:02 tailwind.config.js

➜  aa git:(main) pnpm dev

> [email protected] dev /Users/k/p/aa
> next dev

   ▲ Next.js 14.2.0-canary.23
   - Local:        http:https://localhost:3000

 ✓ Ready in 2.4s
 ○ Compiling / ...
 ✓ Compiled / in 3.2s (523 modules)

samcx · 2024-03-15T21:16:37Z

@karlhorky It would in the next stable patch release → 14.1.4!

karlhorky · 2024-03-17T16:14:58Z

Nice, thanks!

Now that @phanect added ESM support in #63109, I have opened another PR with almost identical changes to switch to an ESM config with .mjs extension (maintaining compatibility with both CommonJS and ESM projects):

Switch to postcss.config.mjs, add type #63380

This makes the postcss.config.mjs file symmetrical to the next.config.mjs file and eliminates one more file using CommonJS format.

@phanect

### What? Now that @phanect added support for ESM PostCSS config files in PR #63109 (original issue #34448), PostCSS can use ESM config by default. It needs to use an `.mjs` extension by default because `create-next-app` scaffolds CommonJS apps by default. This will also work with ESM projects which have added `"type": "module"` in their `package.json` ### Why? 1. To convert one more file to ESM 2. To use the modern format 3. To follow other similar migrations that have taken place in the Next.js codebase (eg. `next.config.mjs`) ### How? - Change file extensions from `.cjs` to `.mjs` (change similar to PR #58380) - Change module format from CommonJS to ESM - Add type for the config, for users who enable `checkJs: true` in `tsconfig.json` Co-authored-by: Sam Ko <[email protected]>

Switch to .cjs PostCSS config

d590e3f

karlhorky requested a review from a team as a code owner November 13, 2023 13:08

ijjk added the create-next-app Related to our CLI tool for quickly starting a new Next.js application. label Nov 13, 2023

This was referenced Nov 13, 2023

next/lib/find-config does not support ESM config files #34448

Closed

next/image not working when using in esm projects #54777

Closed

Dann1y mentioned this pull request Nov 22, 2023

Next > ESM not fully support yet Dann1y/essential-blog#1

Closed

samcx approved these changes Mar 8, 2024

View reviewed changes

Merge branch 'canary' of github.com:vercel/next.js into patch-6

4a3723b

samcx added the CI approved Approve running CI for fork label Mar 9, 2024

samcx enabled auto-merge (squash) March 9, 2024 18:33

samcx removed the CI approved Approve running CI for fork label Mar 9, 2024

samcx added 2 commits March 11, 2024 12:55

Merge branch 'canary' into patch-6

76b7243

tests(integration-cna): fix test

a05b8dc

karlhorky requested review from timneutkens, ijjk, shuding, huozhi, feedthejim, ztanner and wyattjoh as code owners March 11, 2024 20:34

ijjk added the area: tests label Mar 11, 2024

samcx disabled auto-merge March 11, 2024 20:40

samcx added 3 commits March 11, 2024 13:42

Merge branch 'canary' into patch-6

df31456

fix: update more instances of postcss.config.js to .cjs

8cc9797

Merge branch 'patch-6' of https://github.com/karlhorky/next.js into p…

a734a34

…atch-6

samcx merged commit dd536a5 into vercel:canary Mar 11, 2024
61 checks passed

karlhorky mentioned this pull request Mar 17, 2024

Switch to postcss.config.mjs, add type #63380

Merged

github-actions bot added the locked label Apr 1, 2024

github-actions bot locked as resolved and limited conversation to collaborators Apr 1, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Switch to .cjs PostCSS config #58380

Switch to .cjs PostCSS config #58380

karlhorky commented Nov 13, 2023 •

edited

Loading

ijjk commented Nov 13, 2023 •

edited by samcx

Loading

ijjk commented Nov 13, 2023 •

edited by samcx

Loading

ijjk commented Nov 13, 2023 •

edited by samcx

Loading

samcx left a comment

samcx commented Mar 8, 2024

karlhorky commented Mar 9, 2024

ijjk commented Mar 9, 2024 •

edited

Loading

ijjk commented Mar 9, 2024 •

edited

Loading

karlhorky commented Mar 10, 2024 •

edited

Loading

samcx commented Mar 11, 2024

karlhorky commented Mar 15, 2024 •

edited

Loading

samcx commented Mar 15, 2024

karlhorky commented Mar 17, 2024 •

edited

Loading

Switch to .cjs PostCSS config #58380

Switch to .cjs PostCSS config #58380

Conversation

karlhorky commented Nov 13, 2023 • edited Loading

What?

Why?

How?

ijjk commented Nov 13, 2023 • edited by samcx Loading

ijjk commented Nov 13, 2023 • edited by samcx Loading

ijjk commented Nov 13, 2023 • edited by samcx Loading

samcx left a comment

Choose a reason for hiding this comment

samcx commented Mar 8, 2024

karlhorky commented Mar 9, 2024

ijjk commented Mar 9, 2024 • edited Loading

Tests Passed

ijjk commented Mar 9, 2024 • edited Loading

Stats from current PR

karlhorky commented Mar 10, 2024 • edited Loading

samcx commented Mar 11, 2024

karlhorky commented Mar 15, 2024 • edited Loading

samcx commented Mar 15, 2024

karlhorky commented Mar 17, 2024 • edited Loading

karlhorky commented Nov 13, 2023 •

edited

Loading

ijjk commented Nov 13, 2023 •

edited by samcx

Loading

ijjk commented Nov 13, 2023 •

edited by samcx

Loading

ijjk commented Nov 13, 2023 •

edited by samcx

Loading

ijjk commented Mar 9, 2024 •

edited

Loading

ijjk commented Mar 9, 2024 •

edited

Loading

karlhorky commented Mar 10, 2024 •

edited

Loading

karlhorky commented Mar 15, 2024 •

edited

Loading

karlhorky commented Mar 17, 2024 •

edited

Loading