[Bug]: Unable to use esm postcss.config.js

[r34son]

Describe the bug

Using @storybook/nextjs
Here's where the bug fixed webpack-contrib/postcss-loader#684
Fix released in 8.1.1 https://github.com/webpack-contrib/postcss-loader/releases/tag/v8.1.1

To Reproduce

esm version of postcss.config.js

System

System:
    OS: macOS 14.3
    CPU: (10) arm64 Apple M1 Pro
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 20.12.0 - ~/.nvm/versions/node/v20.12.0/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.0/bin/npm
    pnpm: 8.15.5 - ~/.nvm/versions/node/v20.12.0/bin/pnpm <----- active
  Browsers:
    Safari: 17.3
  npmPackages:
    @storybook/addon-essentials: ^8.0.5 => 8.0.5 
    @storybook/addon-interactions: ^8.0.5 => 8.0.5 
    @storybook/addon-links: ^8.0.5 => 8.0.5 
    @storybook/addon-themes: ^8.0.5 => 8.0.5 
    @storybook/blocks: ^8.0.5 => 8.0.5 
    @storybook/nextjs: ^8.0.5 => 8.0.5 
    @storybook/react: ^8.0.5 => 8.0.5 
    @storybook/test: ^8.0.5 => 8.0.5 
    chromatic: ^11.3.0 => 11.3.0 
    eslint-plugin-storybook: ^0.8.0 => 0.8.0 
    storybook: ^8.0.5 => 8.0.5

Additional context

Please update postcss-loader

[r34son]

as workaround used pnpm.overrides feature:

  "pnpm": {
    "overrides": {
      "@storybook/nextjs>postcss-loader": "8.1.1"
    }
  },

[r34son]

Next.js also has esm support for config, but on canary rn:
vercel/next.js#34448 (comment)