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

ctjlewis · 2022-02-16T21:35:47Z

Verify canary release

I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #110-Ubuntu SMP PREEMPT Thu Jan 13 19:01:34 UTC 2022
    Binaries:
      Node: 16.10.0
      npm: 7.24.0
      Yarn: 1.22.17
      pnpm: N/A
    Relevant packages:
      next: 12.0.11-canary.19
      react: 17.0.2
      react-dom: 17.0.2

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Converting Next project to "type": "module", uses Tailwind and PostCSS. next/lib/find-config does not attempt to load via dynamic import and so throws even after converting PostCSS config to ESM:

./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.

Expected Behavior

Should attempt to load configs via ESM-CJS-interoperable default import.

To Reproduce

Convert a Tailwind Next.js project to "type": "module" and run next dev.

The text was updated successfully, but these errors were encountered:

ctjlewis · 2022-02-16T22:15:51Z

Next no longer throws with the changes in #34451, but Tailwind will need to make changes in order for Tailwind to not throw:

../../next.js/packages/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!../../next.js/packages/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/tailwind.config.js from /path/to/my/repo/components/node_modules/tailwindcss/lib/lib/setupTrackingContext.js not supported.
Instead change the require of tailwind.config.js in /path/to/my/repo/components/node_modules/tailwindcss/lib/lib/setupTrackingContext.js to a dynamic import() which is available in all CommonJS modules.

ctjlewis · 2022-02-16T22:19:42Z

Worked around for Tailwind and PostCSS by forcing CJS in the type: module project with .cjs file extension for postcss.config.cjs and tailwind.config.cjs.

BB-19 · 2022-04-15T13:12:53Z

If anyone is struggling with TailwindCSS + "type: module":

Rename the tailwind config file to "tailwind.config.cjs"
Put your config from postcss.config.js as JSON to your package.json: under the key "postcss".
Remove your postcss.config.js file.
Remove the .next folder from your project directory to clear the cache and restart

mdaverde · 2022-04-22T17:53:30Z

Worked around for Tailwind and PostCSS by forcing CJS in the type: module project with .cjs file extension for postcss.config.cjs and tailwind.config.cjs.

@ctjlewis I'm not sure this works? At least from what I can tell from the way findConfig searches for files. For me, the .cjs versions get ignored. See also here.

@BB-19 I'm not sure this can work for filtering plugins against process.env.NODE_ENV such as written about here

vvo · 2022-06-20T08:58:29Z

@BB-19 Thank you 🙏 that's the only way I could make my website work. Why is renaming to postcss.config.cjs not sufficient though?

damianobarbati · 2022-09-08T10:25:01Z

@BB-19 is not working for me, what version of next are you using?

error - ./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
/Users/damians/Desktop/predator/tailwind.config.cjs:29
export {};
^^^^^^

SyntaxError: Unexpected token 'export'
    at compileFunction (<anonymous>)
Ready on http://localhost:80

ctjlewis · 2022-09-09T06:01:51Z

@damianobarbati You can’t use exports keyword in a CJS file. Do module.exports = {…}.

madeleineostoja · 2022-10-27T03:11:58Z

This is a dealbreaker for me, I need my postcss config to be a module because I share an ESM js dependency between config and code (custom media queries), would be great to hear if it's at least on the roadmap to be fixed

ConnorLanglois · 2022-12-12T00:46:51Z

@damianobarbati

@BB-19 is not working for me, what version of next are you using?

error - ./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
/Users/damians/Desktop/predator/tailwind.config.cjs:29
export {};
^^^^^^

SyntaxError: Unexpected token 'export'
    at compileFunction (<anonymous>)
Ready on http://localhost:80

I was receiving the same error myself when using ts-node with a custom Next.js server. To resolve this, I added tailwind.config.cjs to the ignore option of ts-node. You can do this through the --ignore option or ignore field in ts-node config in the tsconfig.json file. For example, I now have:

...,
"ts-node": {
  "esm": true,
  "ignore": ["node_modules", "tailwind.config.cjs"]
}

The reason why "export {}" is added is explained here. Namely that,

the compiler must emit the export statement in order to ensure that the compiled file is also a Module.

This might only be the case if you set "module": "esnext" in your tsconfig file, which compiles TypeScript files to ESM modules. You might also have "type": "module" in your package.json if that's the case, as I do.

My guess for why adding this to ts-node's ignore field is required is that normally with just tsc TypeScript wouldn't compile tailwind.config.cjs, and I'm guessing that postcss/tailwind dynamically requires it (perhaps something like require('tailwind.config.' + extension) or something like that, which TypeScript can't compile since it can't know what the file is at compile-time), so it would just require it normally and work fine. But with ts-node, since it is now compiling at runtime, the dynamic require would now cause tailwind.config.cjs to be compiled and thus have the export {} line added. Adding the file to the ignore field stops it from doing so.

DannyPark1 · 2023-06-08T06:47:59Z

@BB-19 you saved me, but why does this work?

ctjlewis · 2023-06-08T07:35:24Z

@BB-19 you saved me, but why does this work?

PostCSS and Tailwind do not support ESM config files. You must rename them to .cjs.

There's no need to move postcss config to package.json and I don't recommend that.

- Update `.env` file to convert VITE to NEXT_PUBLIC - IMPORTANT: `.env` files will need to be updated to reflect this, please check the .env.example for more information. Referencing variables will not work for anything used in NextJS as it is loaded through `dotenv` (so we can use `.env` in parent directory), which does not seem to work with variable references (such as jddAqAqAq`A=$B`)q - Restructured code to work with NextJS - Fixed bug with tailwind: vercel/next.js#34448 (comment) - Added dependencies (`dotenv`, `eslint-config-next`, `next`)

Triment · 2023-07-07T07:07:40Z

如果有人在使用 TailwindCSS +“type: module”时遇到困难：

将 tailwind 配置文件重命名为“tailwind.config.cjs”

将 postcss.config.js 中的配置以 JSON 形式放入 package.json: 的“postcss”键下。

删除 postcss.config.js 文件。

从项目目录中删除 .next 文件夹以清除缓存并重新启动

It's magical !!!

Mon-ius · 2023-07-24T19:16:51Z

If anyone is struggling with TailwindCSS + "type: module":
1.Rename the tailwind config file to "tailwind.config.cjs"
2.Put your config from postcss.config.js as JSON to your package.json: under the key "postcss".
3.Remove your postcss.config.js file.
4.Remove the .next folder from your project directory to clear the cache and restart

@BB-19, No need to rename tailwind.config.js to tailwind.config.cjs. The problem is postcss.config.js, remove it and add the config to package.json. For example

{
...
  "type": "module",
  "postcss": {
    "plugins": {
      "tailwindcss": {},
      "autoprefixer": {}
    }
  },
...
}

For me, Yarn Berry with PnP Strict, the solution for convert next project from CommonJS to ESModule:

Add or update package.json with "type": "module"
Remove postcss.config.js and apply it to package.json with "postcss" json format, see above example
Update next.config.js and tailwind.config.js to ESM format
Add "pnpEnableEsmLoader: true" to .yarnrc.yml
Clear Cache yarn cache clean && rm -rf yarn.lock && yarn install && yarn build

Hope it help to following guys 🤗

vishnupb123 · 2023-08-13T14:28:37Z

@Mon-lus Thanks a lot. It worked for me. It would be helpful if you could explain why the error happened. Once again thanks a lot

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

PostCSS and Tailwind do not support ESM config files

@ctjlewis This is not true anymore, both support ESM:

Tailwind CSS config files can also be written in ESM syntax with TypeScript - and this already works now with Next.js.

As far as I can tell, this is a problem with Next.js or some other dependency in between.

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

In the meantime, before Next.js supports ESM in PostCSS config files, I've opened the following PR to rename postcss.config.js to postcss.config.cjs in create-next-app, so that there is one fewer problem requiring manual intervention when someone wants to add "type": "module" to their package.json:

Switch to .cjs PostCSS config #58380

karlhorky · 2023-12-08T16:26:55Z

Just upgraded to next@14.0.4 and postcss-load-config@5.0.2 and confirmed that the bug still remains, ESM and TypeScript PostCSS formats are still not supported:

postcss.config.mjs (or postcss.config.js with ESM in "type": "module" projects)
postcss.config.ts TypeScript config also supported by PostCSS

backslash112 · 2023-12-18T01:01:48Z

Hey guys, try this to see if it works:

Remove file postcss.config.js, and add a new file postcss.config.json with the same config in JSON format:

{
  "plugins": {
    "tailwindcss": {},
    "autoprefixer": {}
  }
}

rm -rf .next && npm run dev

will-stone · 2023-12-31T12:15:05Z

@backslash112 I just tried postcss.config.json with tailwind.config.mjs and it worked! 🥳 Thank you.

SalahAdDin · 2024-01-28T01:27:47Z

@backslash112 I just tried postcss.config.json with tailwind.config.mjs and it worked! 🥳 Thank you.

We want to use postcss.config.mjs, is it possible?

It is not working now.

…ESM. vercel/next.js#34448

phanect · 2024-03-10T15:38:00Z

Just opened a PR to fix this issue: #63109

@balazsorban44

### 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](postcss/postcss-load-config#230), Next.js itself does not (because of `next/lib/find-config`): - #34448 ### How? By switching to `.cjs`, the config will stay recognized as CommonJS even after switching to `"type": "module"` in `package.json` cc @balazsorban44 --------- Co-authored-by: Sam Ko <sam@vercel.com>

Fixes #34448 Before this PR, next/lib/find-config fails to load \*.config.mjs files and \*.config.js files when `"type": "module"` is set in package.json. It expects CommonJS files although the \*.config.{js|mjs} files are written in JS modules format (i.e. using `import` and `export`). This PR fixes it so that it can load configs written in JS modules format. --------- Co-authored-by: Jiachi Liu <inbox@huozhi.im>

karlhorky · 2024-03-17T15:41:31Z

Thanks for the PR for ESM support @phanect and for the review and merge @huozhi 🙌

I can confirm that next@14.2.0-canary.25 does have support for the following ESM configurations 🎉

CommonJS project + postcss.config.mjs in ESM format
ESM project + postcss.config.js in ESM format

I left the ReferenceError: module is not defined in ES module scope error in the log output below to show that a postcss.config.mjs file with CommonJS format fails (as expected) 👍

1. CommonJS project + `postcss.config.mjs` in ESM format

➜  p mkdir postcss-esm-and-ts-configs
➜  p cd postcss-esm-and-ts-configs
➜  postcss-esm-and-ts-configs pnpm create next-app@canary . --app --no-eslint --no-src-dir --import-alias @/\* --tailwind --typescript

.../Library/pnpm/store/v3/tmp/dlx-15463  |   +1 +
.../Library/pnpm/store/v3/tmp/dlx-15463  | Progress: resolved 1, reused 0, downloaded 1, added 1, done
Creating a new Next.js app in /Users/k/p/postcss-esm-and-ts-configs.

Using pnpm.

Initializing project with template: app-tw


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- postcss
- tailwindcss

Downloading registry.npmjs.org/next/14.2.0-canary.26: 20.50 MB/20.50 MB, done
Packages: +132
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Downloading registry.npmjs.org/@next/swc-darwin-arm64/14.2.0-canary.26: 36.71 MB/36.71 MB, done
Progress: resolved 140, reused 127, downloaded 5, added 132, done

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

devDependencies:
+ @types/node 20.11.28
+ @types/react 18.2.66
+ @types/react-dom 18.2.22
+ postcss 8.4.35
+ tailwindcss 3.4.1
+ typescript 5.4.2

Done in 4.8s
Initialized a git repository.

Success! Created postcss-esm-and-ts-configs at /Users/k/p/postcss-esm-and-ts-configs

➜  postcss-esm-and-ts-configs git:(main) ls -al
total 136
drwxr-xr-x  15 k  staff    480 Mar 17 16:30 .
drwxr-xr-x  63 k  staff   2016 Mar 17 16:30 ..
drwxr-xr-x  12 k  staff    384 Mar 17 16:30 .git
-rw-r--r--   1 k  staff    391 Mar 17 16:30 .gitignore
-rw-r--r--   1 k  staff   1383 Mar 17 16:30 README.md
drwxr-xr-x   6 k  staff    192 Mar 17 16:30 app
-rw-r--r--   1 k  staff    201 Mar 17 16:30 next-env.d.ts
-rw-r--r--   1 k  staff     92 Mar 17 16:30 next.config.mjs
drwxr-xr-x  12 k  staff    384 Mar 17 16:30 node_modules
-rw-r--r--   1 k  staff    490 Mar 17 16:30 package.json
-rw-r--r--   1 k  staff  34550 Mar 17 16:30 pnpm-lock.yaml
-rw-r--r--   1 k  staff     61 Mar 17 16:30 postcss.config.cjs
drwxr-xr-x   4 k  staff    128 Mar 17 16:30 public
-rw-r--r--   1 k  staff    498 Mar 17 16:30 tailwind.config.ts
-rw-r--r--   1 k  staff    574 Mar 17 16:30 tsconfig.json
➜  postcss-esm-and-ts-configs git:(main) cat postcss.config.cjs
module.exports = {
  plugins: {
    tailwindcss: {},
  },
};
➜  postcss-esm-and-ts-configs git:(main) pnpm dev

> postcss-esm-and-ts-configs@0.1.0 dev /Users/k/p/postcss-esm-and-ts-configs
> next dev

  1 export default {
   ▲ Next.js 14.2.0-canary.26
   - Local:        http://localhost:3000

 ✓ Ready in 2.4s
 ○ Compiling / ...
 ✓ Compiled / in 1889ms (523 modules)
 ✓ Compiled in 122ms (244 modules)
^C
➜  postcss-esm-and-ts-configs git:(main) mv postcss.config.cjs postcss.config.mjs
➜  postcss-esm-and-ts-configs git:(main) ✗ pnpm dev

> postcss-esm-and-ts-configs@0.1.0 dev /Users/k/p/postcss-esm-and-ts-configs
> next dev

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

 ✓ Ready in 2.1s
 ○ Compiling / ...
 ⨯ app/layout.tsx
An error occurred in `next/font`.

ReferenceError: module is not defined in ES module scope
    at file:///Users/k/p/postcss-esm-and-ts-configs/postcss.config.mjs:1:1
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:431:15)
    at async findConfig (/Users/k/p/postcss-esm-and-ts-configs/node_modules/.pnpm/next@14.2.0-canary.26_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/lib/find-config.js:74:21)
    at async getPostCssPlugins (/Users/k/p/postcss-esm-and-ts-configs/node_modules/.pnpm/next@14.2.0-canary.26_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:89:18)
    at async /Users/k/p/postcss-esm-and-ts-configs/node_modules/.pnpm/next@14.2.0-canary.26_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/config/blocks/css/index.js:124:36
    at async /Users/k/p/postcss-esm-and-ts-configs/node_modules/.pnpm/next@14.2.0-canary.26_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js:86:33
    at async Span.traceAsyncFn (/Users/k/p/postcss-esm-and-ts-configs/node_modules/.pnpm/next@14.2.0-canary.26_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/trace/trace.js:151:20)
 ⨯ app/layout.tsx
An error occurred in `next/font`.

ReferenceError: module is not defined in ES module scope
    at file:///Users/k/p/postcss-esm-and-ts-configs/postcss.config.mjs:1:1
    at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:431:15)
    at async findConfig (/Users/k/p/postcss-esm-and-ts-configs/node_modules/.pnpm/next@14.2.0-canary.26_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/lib/find-config.js:74:21)
    at async getPostCssPlugins (/Users/k/p/postcss-esm-and-ts-configs/node_modules/.pnpm/next@14.2.0-canary.26_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:89:18)
    at async /Users/k/p/postcss-esm-and-ts-configs/node_modules/.pnpm/next@14.2.0-canary.26_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/config/blocks/css/index.js:124:36
    at async /Users/k/p/postcss-esm-and-ts-configs/node_modules/.pnpm/next@14.2.0-canary.26_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js:86:33
    at async Span.traceAsyncFn (/Users/k/p/postcss-esm-and-ts-configs/node_modules/.pnpm/next@14.2.0-canary.26_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/trace/trace.js:151:20)
^C
➜  postcss-esm-and-ts-configs git:(main) ✗ vim postcss.config.mjs
➜  postcss-esm-and-ts-configs git:(main) ✗ cat postcss.config.mjs
export default {
  plugins: {
    tailwindcss: {},
  },
};
➜  postcss-esm-and-ts-configs git:(main) ✗ pnpm dev

> postcss-esm-and-ts-configs@0.1.0 dev /Users/k/p/postcss-esm-and-ts-configs
> next dev

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

 ✓ Ready in 1589ms
 ○ Compiling / ...
 ✓ Compiled / in 1931ms (523 modules)
 ✓ Compiled in 168ms (244 modules)
 ○ Compiling /favicon.ico ...
 ✓ Compiled /favicon.ico in 1658ms (530 modules)
^C

2. ESM project + `postcss.config.js` in ESM format

➜  postcss-esm-and-ts-configs git:(main) ✗ vim package.json
➜  postcss-esm-and-ts-configs git:(main) ✗ cat package.json
{
  "name": "postcss-esm-and-ts-configs",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "14.2.0-canary.26"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8",
    "tailwindcss": "^3.4.1"
  }
}
➜  postcss-esm-and-ts-configs git:(main) ✗ mv postcss.config.mjs postcss.config.js
➜  postcss-esm-and-ts-configs git:(main) ✗ pnpm dev

> postcss-esm-and-ts-configs@0.1.0 dev /Users/k/p/postcss-esm-and-ts-configs
> next dev

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

 ✓ Ready in 1679ms
 ○ Compiling / ...
 ✓ Compiled / in 1875ms (523 modules)
 ✓ Compiled in 117ms (244 modules)
 ○ Compiling /favicon.ico ...
 ✓ Compiled /favicon.ico in 1663ms (530 modules)

karlhorky · 2024-03-17T15:45:07Z

One thing that is NOT yet supported is the postcss.config.ts file format supported by postcss-load-config:

➜  postcss-esm-and-ts-configs git:(main) ✗ mv postcss.config.mjs postcss.config.ts
➜  postcss-esm-and-ts-configs git:(main) ✗ pnpm dev

> postcss-esm-and-ts-configs@0.1.0 dev /Users/k/p/postcss-esm-and-ts-configs
> next dev

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

 ✓ Ready in 1666ms
 ○ Compiling / ...
 ✓ Compiled / in 1648ms (523 modules)
 ○ Compiling /favicon.ico ...
 ✓ Compiled /favicon.ico in 793ms (530 modules)
^C

It looks like the compilation works, but this results in an unstyled application.

But since this was not the main request by @ctjlewis in this issue, and appeared later in the issue comments, it's probably best to open a new issue for this.

karlhorky · 2024-03-17T16:16:26Z

One thing that probably could be still improved here is altering create-next-app to create postcss.config.mjs file with ESM format instead of the postcss.config.cjs file that is currently created.

I opened a PR for this here:

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

phanect · 2024-03-17T20:13:50Z

@karlhorky Thanks for testing.
Yes, *.config.ts is out of scope of the PR I created this time and not supported yet, unfortunately.

SalahAdDin · 2024-03-18T13:57:23Z

@karlhorky Thanks for testing. Yes, *.config.ts is out of scope of the PR I created this time and not supported yet, unfortunately.

So, right now we can use postcss.config.mjs, right?

phanect · 2024-03-18T14:00:55Z

@SalahAdDin Yes, the latest canary release should support *.config.mjs now.
I guess the stable version does not support it yet until the next release.

@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 <sam@vercel.com>

github-actions · 2024-04-02T00:04:04Z

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

ctjlewis added the bug Issue was opened via the bug report template. label Feb 16, 2022

ctjlewis changed the title ~~next/lib/find-config.js: add ESM interop support for type: module~~ next/lib/find-config: add ESM interop support for type: module Feb 16, 2022

ctjlewis mentioned this issue Feb 16, 2022

feat: use ESM-CJS interoperable import in find-config #34451

Open

7 tasks

ctjlewis changed the title ~~next/lib/find-config: add ESM interop support for type: module~~ next/lib/find-config does not support ESM config files Feb 16, 2022

1aron mentioned this issue Dec 24, 2022

Support multi-format next.config.{js,cjs,mjs,ts} #44324

Closed

karlhorky mentioned this issue Nov 13, 2023

Switch to .cjs PostCSS config #58380

Merged

karlhorky mentioned this issue Nov 19, 2023

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

Closed

1 task

Dann1y mentioned this issue Nov 22, 2023

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

Closed

Enalmada mentioned this issue Jan 5, 2024

try and fix vercel build issue Enalmada/nextjs-boilerplate#195

Merged

ryoikarashi added a commit to ryoikarashi/ryoikarashi.com that referenced this issue Feb 15, 2024

use commonjs for PostCSS config file because tailwind doesnt support …

838bdf8

…ESM. vercel/next.js#34448

ryoikarashi added a commit to ryoikarashi/ryoikarashi.com that referenced this issue Feb 15, 2024

use commonjs for PostCSS config file because tailwind doesnt support …

d2ab0b8

…ESM. vercel/next.js#34448

BB-19 mentioned this issue Mar 5, 2024

postcss configuration in package.json is not respected in Turbopack #62805

Closed

phanect mentioned this issue Mar 10, 2024

Add JSM (ESM) support for next/lib/find-config #63109

Merged

huozhi closed this as completed in #63109 Mar 16, 2024

karlhorky mentioned this issue Mar 17, 2024

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

Merged

r34son mentioned this issue Mar 31, 2024

[Bug]: Unable to use esm postcss.config.js storybookjs/storybook#26702

Closed

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

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

ctjlewis commented Feb 16, 2022 •

edited

Loading

ctjlewis commented Feb 16, 2022

ctjlewis commented Feb 16, 2022

BB-19 commented Apr 15, 2022

mdaverde commented Apr 22, 2022

vvo commented Jun 20, 2022 •

edited

Loading

damianobarbati commented Sep 8, 2022

ctjlewis commented Sep 9, 2022

madeleineostoja commented Oct 27, 2022

ConnorLanglois commented Dec 12, 2022 •

edited

Loading

DannyPark1 commented Jun 8, 2023

ctjlewis commented Jun 8, 2023

Triment commented Jul 7, 2023

Mon-ius commented Jul 24, 2023 •

edited

Loading

vishnupb123 commented Aug 13, 2023

karlhorky commented Nov 13, 2023 •

edited

Loading

karlhorky commented Nov 13, 2023 •

edited

Loading

karlhorky commented Dec 8, 2023 •

edited

Loading

backslash112 commented Dec 18, 2023 •

edited

Loading

will-stone commented Dec 31, 2023

SalahAdDin commented Jan 28, 2024 •

edited

Loading

phanect commented Mar 10, 2024

karlhorky commented Mar 17, 2024

karlhorky commented Mar 17, 2024

karlhorky commented Mar 17, 2024

phanect commented Mar 17, 2024 •

edited

Loading

SalahAdDin commented Mar 18, 2024

phanect commented Mar 18, 2024 •

edited

Loading

github-actions bot commented Apr 2, 2024

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

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

Comments

ctjlewis commented Feb 16, 2022 • edited Loading

Verify canary release

Provide environment information

What browser are you using? (if relevant)

How are you deploying your application? (if relevant)

Describe the Bug

Expected Behavior

To Reproduce

ctjlewis commented Feb 16, 2022

ctjlewis commented Feb 16, 2022

BB-19 commented Apr 15, 2022

mdaverde commented Apr 22, 2022

vvo commented Jun 20, 2022 • edited Loading

damianobarbati commented Sep 8, 2022

ctjlewis commented Sep 9, 2022

madeleineostoja commented Oct 27, 2022

ConnorLanglois commented Dec 12, 2022 • edited Loading

DannyPark1 commented Jun 8, 2023

ctjlewis commented Jun 8, 2023

Triment commented Jul 7, 2023

Mon-ius commented Jul 24, 2023 • edited Loading

vishnupb123 commented Aug 13, 2023

karlhorky commented Nov 13, 2023 • edited Loading

karlhorky commented Nov 13, 2023 • edited Loading

karlhorky commented Dec 8, 2023 • edited Loading

backslash112 commented Dec 18, 2023 • edited Loading

will-stone commented Dec 31, 2023

SalahAdDin commented Jan 28, 2024 • edited Loading

phanect commented Mar 10, 2024

karlhorky commented Mar 17, 2024

1. CommonJS project + postcss.config.mjs in ESM format

2. ESM project + postcss.config.js in ESM format

karlhorky commented Mar 17, 2024

karlhorky commented Mar 17, 2024

phanect commented Mar 17, 2024 • edited Loading

SalahAdDin commented Mar 18, 2024

phanect commented Mar 18, 2024 • edited Loading

github-actions bot commented Apr 2, 2024

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

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

ctjlewis commented Feb 16, 2022 •

edited

Loading

vvo commented Jun 20, 2022 •

edited

Loading

ConnorLanglois commented Dec 12, 2022 •

edited

Loading

Mon-ius commented Jul 24, 2023 •

edited

Loading

karlhorky commented Nov 13, 2023 •

edited

Loading

karlhorky commented Nov 13, 2023 •

edited

Loading

karlhorky commented Dec 8, 2023 •

edited

Loading

backslash112 commented Dec 18, 2023 •

edited

Loading

SalahAdDin commented Jan 28, 2024 •

edited

Loading

1. CommonJS project + `postcss.config.mjs` in ESM format

2. ESM project + `postcss.config.js` in ESM format

phanect commented Mar 17, 2024 •

edited

Loading

phanect commented Mar 18, 2024 •

edited

Loading