Error during Panda CSS codegen and PostCSS extraction (CJS ↔ ESM dependency load)

[kris-ellery]

Description

I’m running into a runtime error when using Panda CSS that affects both panda codegen and style extraction through the PostCSS plugin.

The failure happens because Panda, through its own internal dependencies, tries to load an ESM-only module using require() from a CommonJS context. The module in question is package-manager-detector.

Error output

Panda codegen

🐼 error [❌] Error [ERR_REQUIRE_ESM]: require() of ES Module
/Users/koellery/panda-app/node_modules/package-manager-detector/dist/index.mjs not supported.

Instead change the require of
/Users/koellery/panda-app/node_modules/package-manager-detector/dist/index.mjs
to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/koellery/panda-app/node_modules/@pandacss/node/dist/index.js:2760:39)

PostCSS / style extraction

ERROR in ./src/styles/index.css
Module Error (from ../../node_modules/postcss-loader/dist/cjs.js):
Loading PostCSS "@pandacss/dev/postcss" plugin failed: require() of ES Module
/Users/koellery/panda-app/node_modules/package-manager-detector/dist/index.mjs not supported.
Instead change the require of
/Users/koellery/panda-app/node_modules/package-manager-detector/dist/index.mjs
to a dynamic import() which is available in all CommonJS modules.

(@/Users/koellery/panda-app/src/styles/index.css)
Error: Loading PostCSS "@pandacss/dev/postcss" plugin failed: require() of ES Module
/Users/koellery/panda-app/node_modules/package-manager-detector/dist/index.mjs not supported.
Instead change the require of
/Users/koellery/panda-app/node_modules/package-manager-detector/dist/index.mjs
to a dynamic import() which is available in all CommonJS modules.

    at loadPlugin (/Users/koellery/panda-app/node_modules/postcss-loader/dist/utils.js:167:11)
    at /Users/koellery/panda-app/node_modules/postcss-loader/dist/utils.js:245:16
    at Array.map (<anonymous>)
    at getPostcssOptions (/Users/koellery/panda-app/node_modules/postcss-loader/dist/utils.js:242:30)
    at Object.loader (/Users/koellery/panda-app/node_modules/postcss-loader/dist/index.js:54:42)

What I expected

• panda codegen runs without errors
• The @pandacss/dev/postcss plugin loads and processes styles correctly

What actually happens

Both codegen and PostCSS processing fail at runtime with ERR_REQUIRE_ESM.

Environment

• Panda CSS: 1.7.1
• Node.js: v20
• Build tooling: Webpack + postcss-loader
• Module system: Mixed CJS / ESM

Related issues

• Bug: @pandacss/config CJS entrypoint is broken #3438

Steps to reproduce

Execute @pandacss/node/dist/index.js

Panda CSS Version

1.7.1

Operating System

• macOS
• Windows
• Linux

[mabernethy]

Would it be possible to merge this fix as soon as it's fixed instead of waiting until Monday? Last week this project wouldn't work as well because of a similar ESM issue in another dependency.

[kris-ellery]

Here is a workaround:

{
  "devDependencies": {
    "@pandacss/dev": "1.7.1",
  },
  "overrides": {
    "@pandacss/node": {
      "package-manager-detector": "^0.2.11",
      "quansync": "^0.2.11"
    },
    "package-manager-detector": "^0.2.11"
  },
}

[mabernethy]

Thanks @kris-ellery . For others using pnpm, this format worked:

"pnpm": {
    "overrides": {
      "@pandacss/node>package-manager-detector": "^0.2.11",
      "@pandacss/node>quansync": "^0.2.11",
      "package-manager-detector": "^0.2.11"
    },