next.js: `next/lib/find-config` does not support ESM config files

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

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:

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

Hope it help to following guys 🤗

Hey guys, try this to see if it works:

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

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

1. rm -rf .next && npm run dev

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.

Just opened a PR to fix this issue: #63109

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

@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?

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

PostCSS and Tailwind do not support ESM config files

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

• https://github.com/postcss/postcss-load-config/issues/230
• https://github.com/postcss/postcss-cli/issues/387
• https://tailwindcss.com/docs/configuration#using-esm-or-type-script

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.

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