"pnpm panda init --postcss" fails with "Could not resolve "@pandacss/dev""

[noahlt]

Description

I created a fresh NextJS app with pnpm and create-next-app, and got an inscrutible module bundling error: Could not resolve "@pandacss/dev".

(After #2592, I tried using pnpm rather than npm. I got a different error, so I'm filing a separate bug.)

Link to Reproduction

n/a

Steps to reproduce

1. pnpm dlx create-next-app@latest --use-pnpm
2. cd test-pnpm-panda
3. pnpm install -D @pandacss/dev
4. pnpm panda init --postcss

Shell transcript follows:

noah@Noahs-Laptop ~ % pnpm dlx create-next-app@latest --use-pnpm
✔ What is your project named? … test-pnpm-panda
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/noah/test-pnpm-panda.

Using pnpm.

Initializing project with template: app 


Installing dependencies:
- react
- react-dom
- next

Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- eslint
- eslint-config-next

Packages: +304
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 312, reused 304, downloaded 0, added 304, done

dependencies:
+ next 14.2.3
+ react 18.3.1
+ react-dom 18.3.1

devDependencies:
+ @types/node 20.12.11
+ @types/react 18.3.2
+ @types/react-dom 18.3.0
+ eslint 8.57.0 (9.2.0 is available)
+ eslint-config-next 14.2.3
+ typescript 5.4.5

Done in 2.2s
Initialized a git repository.

Success! Created test-pnpm-panda at /Users/noah/test-pnpm-panda

noah@Noahs-Laptop ~ % cd test-pnpm-panda 
noah@Noahs-Laptop test-pnpm-panda % pnpm install -D @pandacss/dev

Packages: +120
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 462, reused 424, downloaded 0, added 120, done

devDependencies:
+ @pandacss/dev 0.39.1

Done in 1.2s
noah@Noahs-Laptop test-pnpm-panda % pnpm panda init --postcss


🐼 info [cli] Panda v0.39.1

🐼 info [init:postcss] creating postcss config file: `postcss.config.cjs`
🐼 info [init:config] creating panda config file: `panda.config.ts`
🐼 warn [init:config] 

It looks like you already have panda created`.

You can now run `pnpm panda --watch`.

✘ [ERROR] Could not resolve "@pandacss/dev"

    ../panda.config.mjs:1:29:
      1 │ import { defineConfig } from "@pandacss/dev";
        ╵                              ~~~~~~~~~~~~~~~

  You can mark the path "@pandacss/dev" as external to exclude it from the
  bundle, which will remove this error and leave the unresolved path in the
  bundle.

🐼 error [cli] Error: Build failed with 1 error:
../panda.config.mjs:1:29: ERROR: Could not resolve "@pandacss/dev"
    at failureErrorWithLog (/Users/noah/test-pnpm-panda/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1651:15)
    at /Users/noah/test-pnpm-panda/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1059:25
    at /Users/noah/test-pnpm-panda/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1004:52
    at buildResponseToResult (/Users/noah/test-pnpm-panda/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1057:7)
    at /Users/noah/test-pnpm-panda/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1086:16
    at responseCallbacks.<computed> (/Users/noah/test-pnpm-panda/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:704:9)
    at handleIncomingPacket (/Users/noah/test-pnpm-panda/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:764:9)
    at Socket.readFromStdout (/Users/noah/test-pnpm-panda/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:680:7)
    at Socket.emit (node:events:518:28)
    at addChunk (node:internal/streams/readable:559:12)
noah@Noahs-Laptop test-pnpm-panda % ls panda.config.ts 
ls: panda.config.ts: No such file or directory

Notes:

• there's a strange warning: "It looks like you already have panda created`"
• panda.config.ts has been deleted

Here's the versions for things:

noah@Noahs-Laptop test-pnpm-panda % cat package.json
{
  "name": "test-pnpm-panda",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "14.2.3",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@pandacss/dev": "^0.39.1",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.3",
    "typescript": "^5"
  }
}
noah@Noahs-Laptop test-pnpm-panda % pnpm --version
9.1.1

JS Framework

NextJS (TS)

Panda CSS Version

0.39.1

Browser

n/a

Operating System

• macOS
• Windows
• Linux

Additional Information

I hope this isn't a dupe of #2592. Again, I really love the direction of this project (I even tried pnpm just to see if it would work!) so, let me know if I can provide any additional information.

[segunadebayo]

I can't seem to reproduce this @noahlt.

I just tried these steps and it works

• pnpx create-next-app
• pnpm add -D @pandacss/dev
• pnpm panda init --postcss

[noahlt]

My bad, so sorry for wasting your time.

I had previously accidentally installed @pandacss/dev while in my homedir, so my homedir had a panda.config.mjs, and I guess that was being picked up by the panda init script.