Publishing package with panda

[kidjp85]

I tried to publish an UI package that use pandacss. When using this package with a nextjs app that already got config with panda, it raised an error below

./node_modules/@asherng/css-ui/lib/index.js:66:17
Module not found: Package path ./css is not exported from package `next-js-pandacss/node_modules/@asherng/styled` (see exports field in `next-js-pandacss/node_modules/@asherng/styled/package.json`)

Here is the panda.config.ts within css-ui package:

import { defineConfig } from '@pandacss/dev';

export default defineConfig({
  include: ['./src/**/*.{ts,tsx}'],
  emitPackage: true,
  outdir: '@asherng/styled',
  jsxFramework: 'react',
});

And here is the panda.config.ts within my nextjs app

export default defineConfig({
  globalCss,
  preflight: true,
  include: [
    './src/components/**/*.{ts,tsx,js,jsx}',
    './src/app/**/*.{ts,tsx,js,jsx}',
    './node_modules/@asherng/css-ui/lib/styled.buildinfo.json'
  ],
  emitPackage: true,
  outdir: '@asherng/styled',
  jsxFramework: 'react',
  hash: true,
});

The css-ui/Button component code here

import { styled } from '@asherng/styled/jsx';
import buttonStyle from './variants';

const Button = styled('div', buttonStyle);

export default Button;

Testing repo here: https://github.com/kidjp85/nextjs-panda-test

I tried to enable outExtension: 'js' but it didn't help. Please help me find if I missed something here. Thank you!

[astahmer]

I'm not sure if we should have this built-in (@segunadebayo) but:

• adding a require condition on all exports of the node_modules/@asherng/styled/package.json

{
  "name": "@asherng/styled",
  "description": "This package is auto-generated by CSS Panda",
  "version": "0.0.0-744.0574159622192",
  "type": "module",
  "exports": {
    "./css": {
      "types": "./css/index.d.ts",
+      "require": "./css/index.mjs",
      "import": "./css/index.mjs"
    },
    "./jsx": {
      "types": "./jsx/index.d.ts",
+      "require": "./jsx/index.mjs",
      "import": "./jsx/index.mjs"
    },
    "./patterns": {
      "types": "./patterns/index.d.ts",
+      "require": "./patterns/index.mjs",
      "import": "./patterns/index.mjs"
    },
    "./recipes": {
      "types": "./recipes/index.d.ts",
+      "require": "./recipes/index.mjs",
      "import": "./recipes/index.mjs"
    },
    "./tokens": {
      "types": "./tokens/index.d.ts",
+      "require": "./tokens/index.mjs",
      "import": "./tokens/index.mjs"
    },
    "./types": {
      "types": "./types/index.d.ts"
    },
    "./styles.css": "./styles.css"
  }
}

• adding `esmExternals: "loose" to the next.config

fixed it

[ashernguyen]

@astahmer Awesome. I will try this. Thank you!