"panda init -p" fails with "Missing script: "panda"" on fresh npx create-next-app

[noahlt]

Description

Following the instructions on the https://panda-css.com/ homepage, I installed Panda on a fresh Nextjs app and ran npm run panda init -p. I got Missing script: "panda".

Link to Reproduction

https://stackblitz.com/edit/vitejs-vite-8uhbie?file=package.json

Steps to reproduce

1. npx create-next-app@latest
2. npm i -D @pandacss/dev
3. npm run panda init -p

Shell transcript follows:

noah@Noahs-Laptop ~ % npx create-next-app@latest
✔ What is your project named? … repro-panda-script-error
✔ 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/repro-panda-script-error.

Using npm.

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


added 315 packages, and audited 316 packages in 5s

125 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Initialized a git repository.

Success! Created repro-panda-script-error at /Users/noah/repro-panda-script-error

noah@Noahs-Laptop ~ % cd repro-panda-script-error 
noah@Noahs-Laptop repro-panda-script-error % npm i -D @pandacss/dev

added 123 packages, and audited 440 packages in 3s

144 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
noah@Noahs-Laptop repro-panda-script-error % npm run panda init -p
npm ERR! Missing script: "panda"
npm ERR! 
npm ERR! To see a list of scripts, run:
npm ERR!   npm run

npm ERR! A complete log of this run can be found in: /Users/noah/.npm/_logs/2024-05-13T23_33_07_189Z-debug-0.log
noah@Noahs-Laptop repro-panda-script-error %

Here's the versions for everything:

noah@Noahs-Laptop repro-panda-script-error % cat package.json 
{
  "name": "repro-panda-script-error",
  "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 repro-panda-script-error % npm --version
10.2.4

JS Framework

React/NextJS with TS

Panda CSS Version

0.39.1

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

Happy to provide any extra information if it helps. BTW I'm really looking forward to using Panda, it looks great.

[anubra266]

@noahlt npm run panda init -p means run a script in package.json called panda. Npm executables are run with npx