Autocomplete in vscode with emitPackage: true in pnpm workspace

[totomakers]

Hey everyone,

Problem

I try to have autocomplete support in a pnpm workspace monorepo with vscode in a workspace.

Current config

• @acme/design-system

import { defineConfig } from '@pandacss/dev'

import { preset } from './src/preset'

export default defineConfig({
  emitPackage: true,
  exclude: [],
  include: ['./src/**/*.{js,jsx,ts,tsx}'],
  jsxFramework: 'react',
  outdir: '@acme/styled-system',
  preflight: true,
  presets: ['@pandacss/dev/presets', preset],
})

• @acme/frontend

import { defineConfig } from '@pandacss/dev'
import { acmePreset } from '@acme/design-system'

export default defineConfig({
  emitPackage: true,
  exclude: [],
  include: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/@acme/design-system/src/**/*.tsx',
  ],
  jsxFramework: 'react',
  outdir: '@acme/styled-system',
  preflight: true,
  presets: ['@pandacss/dev/presets', acmePreset],
  theme: {
    extend: {},
  },
})

What i have try

I have tried what provide the documentation:

https://panda-css.com/docs/installation/nextjs#i-dont-see-any-import-autocomplete-in-my-ide

But it's only work if you don't have emitPackage: true, include in tsConfig seem ignore if it's inside node_modules.

Workaround

All my package generate something in @acme/styled-system with pnpm monorepo you can do this workaround:

• Adding "@acme/styled-system": "*" in depencies / devDepencies
• Using .pnpmfile.cjs at the root and doing this:

module.exports = {
  hooks: {
    readPackage: (pkg) => {
      delete pkg.dependencies["@acme/styled-system"]; // remove  it - it's not a real one package, it generated at build time not at install
      return pkg;
    },
  },
};

This way i manage to have autocomplete - the CI seem pass and DX is good (well when frontend is start, and ts reloaded i have my autocomplete support)

Seem a way to do it, but don't know if you know another way to achieve this

[astahmer]

using importMap will give you suggestions, I couldn't find a way to get suggestions working with emitPackage
there's an example here
https://github.com/astahmer/panda-monorepo-setup/blob/main/module-resolution/with-import-map-package/app/panda.config.ts

[sQVe]

This is a bit of a shame, since the whole reason of wanting to use emitPackage is to remove noise from the project structure. Using importMap doesn't change this, since it still adds to things you would want to gitignore.

Should one consider the emitPackage option broken, since it breaks all autocompletion/autoimport? If not, what's the purpose of the option?

[astahmer]

it seems to break autoimport yes, but not all autocompletion

I think the autoimport could work with some tsconfig path aliases

[novascreen]

@astahmer huuuge thank you for putting together that monorepo 🤩
I had a few more bumps with all my packages being type: 'module' and using straight up tsc instead of tsup, but i got things working mainly thanks to your work 🙇🏻‍♂️