postcss.config.js not work with type module

Why this is a good first issue

PostCSS configuration fails when using ESM modules in Next.js.

AI Summary

The issue involves PostCSS configuration not working with ESM modules in Next.js, specifically when 'type: module' is set in package.json. The problem is reproducible and has been fixed in a later version (Next.js 16.1.6). The fix likely involves ensuring PostCSS config loading respects ESM modules.

Issue Description

Link to the code that reproduces this issue

https://github.com/alkorlos/nextjs-issue-bug-postcssconfig

To Reproduce

Start the application in development (next dev)
Error in console and browser

Current vs. Expected behavior

I expected postcss.config.js work with type module to happen, but I observed error.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Enterprise
  Available memory (MB): 16228
  Available CPU cores: 4
Binaries:
  Node: 20.10.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.0.0-canary.115 // Latest available version is detected (15.0.0-canary.115).
  eslint-config-next: N/A
  react: 19.0.0-rc-187dd6a7-20240806
  react-dom: 19.0.0-rc-187dd6a7-20240806
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Instrumentation

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local)

Additional context

Next.js 14.2.5 also have this issue.

In reproduce new project with type module in package.json and postcss.config.js:

import postcssPresetEnv from 'postcss-preset-env';

const config = {
	plugins: [
		postcssPresetEnv({
			stage: 2,
			features: {
				'nesting-rules': false
			}
		})
	]
};

export default config;

When starting the project, there is an error in the console:

 ○ Compiling /_not-found ...                                                                                                                                                                      
Error: An unknown PostCSS plugin was provided ([object Object]).                                                                                                                                  
Read more: https://nextjs.org/docs/messages/postcss-shape

GitHub Labels

bug