`panda` emitted package poses importing issues

[AlphaNecron]

Description

LSP throws importing error with emitPackage: true in panda.config.ts and CommonJS project. However, removing "type": "module" in node_modules/panda/package.json, which is set by default by the generator, does the trick. Better mark type: module as optional by adding a field in config when generating artifact package may address this issue.

Link to Reproduction

none

Steps to reproduce

1. Add "type": "CommonJS" to project's package.json
2. Set emitPackage to true in panda.config.ts
3. Do panda codegen
4. Wait for TypeScript to index newly generated package

This issue is rather odd (at least for me) so I can't create a reproduction project. Probably related to WebStorm or NextJS though.

JS Framework

React TS

Panda CSS Version

0.29.1

Browser

No response

Operating System

• [X] macOS
• [ ] Windows
• [ ] Linux

Additional Information

TypeScript version: 5.3.3

Here's my panda.config.ts, trimmed redundant fields btw:

  prefix: 'arctic',
  jsxFactory: 'arctic',
  logLevel: 'debug',
  optimize: false,
  strictTokens: true,
  strictPropertyValues: true,
  outExtension: 'js',
  forceConsistentTypeExtension: true,
  clean: true,
  emitPackage: true,
  watch: true,
  presets: [
    '@pandacss/preset-base'
  ],
  dependencies: ['src/lib/themes/panda/**.ts'],
  include: ['src/**/*.{ts,tsx}'],
  exclude: ['**/._*'],
  jsxFramework: 'react'

My tsconfig.json as well:

{
  "compilerOptions": {
    "target": "esnext",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext",
      "esnext.string"
    ],
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "outDir": "dist",
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "noEmit": true,
    "baseUrl": "src",
    "paths": {
      "modals/*": [
        "components/modals/*"
      ],
      "hooks/*": [
        "lib/hooks/*"
      ],
      "components/*": [
        "components/*",
        "components/ui/*"
      ]
    },
    "allowJs": true,
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ]
  },
  "include": [
    "next-env.d.ts",
    "avalanche.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/*.mts"
  ],
  "exclude": [
    "public",
    "._*",
    "**/._*"
  ]
}

[AlphaNecron]

Using "type": "module" in the root project will break TypeScript path mapping, so manually removing "type": "module" in panda/package.json is the last resort. However, this hack is transient and will be overwritten when doing panda codegen again.

[segunadebayo]

Hi @AlphaNecron,

You can solve this with the codegen:done hook we expose, so it's always correct.

import { defineConfig } from '@pandacss/dev'
import { writeFileSync } from 'fs'

export default defineConfig({
  // ...
  emitPackage: true,
  hooks: {
    'codegen:done'() {
      const pkgPath = './node_modules/styled-system/package.json'
      const pkgJson = require(pkgPath)
      delete pkgJson.type
      writeFileSync(pkgPath, JSON.stringify(pkgJson, null, 2), 'utf-8')
    },
  },
})

[AlphaNecron]

Thanks! Didn't even know this does exist.