NPM - packages not installed / because drizzle fails to without --legacy-peer-deps

[lexstefan]

Config File

{
  "hasSrc": true,
  "packages": [
    "shadcn-ui",
    "drizzle",
    "next-auth"
  ],
  "preferredPackageManager": "npm",
  "t3": false,
  "alias": "@",
  "analytics": true,
  "rootPath": "src/",
  "componentLib": "shadcn-ui",
  "driver": "pg",
  "provider": "postgresjs",
  "orm": "drizzle",
  "auth": "next-auth"
}

Describe the bug
npx create-next-app@latest then follow the bellow steps

To Reproduce
Steps to reproduce the behavior:

1. kirimase init - npm / shadcn ui / Drizzle / Postgres / Postgres.JS / Auth.js (NextAuth) / github
2. kirimase starts boilerplating & tries to install packages

ℹ Installing Dependencies                                                                                                                                       7:20:39 PM
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: skylark@0.1.0
npm ERR! Found: react@18.3.1
npm ERR! node_modules/react
npm ERR!   peer react@"^18.2.0" from next@14.2.3
npm ERR!   node_modules/next
npm ERR!     next@"14.2.3" from the root project
npm ERR!   peer react@"^18.3.1" from react-dom@18.3.1
npm ERR!   node_modules/react-dom
npm ERR!     peer react-dom@"^18.2.0" from next@14.2.3
npm ERR!     node_modules/next
npm ERR!       next@"14.2.3" from the root project
npm ERR!     react-dom@"^18" from the root project
npm ERR!   2 more (styled-jsx, the root project)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! drizzle-orm@"*" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react@18.2.0
npm ERR! node_modules/react
npm ERR!   peer react@"18.2.0" from react-native@0.74.1
npm ERR!   node_modules/react-native
npm ERR!     peer react-native@">0.73.0" from @op-engineering/op-sqlite@5.0.6
npm ERR!     node_modules/@op-engineering/op-sqlite
npm ERR!       peerOptional @op-engineering/op-sqlite@">=2" from drizzle-orm@0.30.10
npm ERR!       node_modules/drizzle-orm
npm ERR!         drizzle-orm@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /home/lexstefan/.npm/_logs/2024-05-08T16_20_39_841Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /home/lexstefan/.npm/_logs/2024-05-08T16_20_39_841Z-debug-0.log
An error occurred: command "npm install tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react next-themes drizzle-orm drizzle-zod @t3-oss/env-nextjs zod nanoid postgres @auth/core next-auth @auth/drizzle-adapter" exited with code undefined
ℹ Installing ShadcnUI Components                                                                                                                                7:21:11 PM
✔ Done.

 ╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
 │                                                                                                  │
 │  🚀 Thanks for using Kirimase to kickstart your Next.js app!                                     │
 │                                                                                                  │
 │  The following packages are now installed and configured:                                        │
 │  - ORM: Drizzle (using postgresjs)                                                               │
 │  - Authentication: Auth.js (with github providers)                                               │
 │  - Component Library: ShadcnUI                                                                   │
 │                                                                                                  │
 │  [installed and configured in just 50.287 seconds]                                               │
 │                                                                                                  │
 │  Next Steps                                                                                      │
 │  1. Add Environment Variables to your .env                                                       │
 │  2. Run npm run db:generate                                                                      │
 │  3. Run npm run db:migrate                                                                       │
 │  4. Run npm run dev                                                                              │
 │  5. Open http://localhost:3000 in your browser                                                   │
 │  6. Build something awesome!                                                                     │
 │                                                                                                  │
 │  Notes                                                                                           │
 │  - github auth: create credentials at https://github.com/settings/apps                           │
 │    (redirect URI: /api/auth/callback/github)                                                     │
 │  - If you have any issues, please open an issue on GitHub                                        │
 │    (https://github.com/nicoalbanese/kirimase/issues)                                             │
 │                                                                                                  │
 │  Hint: use kirimase generate to quickly scaffold entire entities for your application            │
 │                                                                                                  │
 ╰──────────────────────────────────────────────────────────────────────────────────────────────────╯

However, the package.json is:

{
  "name": "skylark",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "db:generate": "drizzle-kit generate:pg",
    "db:migrate": "tsx src/lib/db/migrate.ts",
    "db:drop": "drizzle-kit drop",
    "db:pull": "drizzle-kit introspect:pg",
    "db:studio": "drizzle-kit studio",
    "db:check": "drizzle-kit check:pg"
  },
  "dependencies": {
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-slot": "^1.0.2",
    "next": "14.2.3",
    "next-themes": "^0.3.0",
    "react": "^18",
    "react-dom": "^18",
    "sonner": "^1.4.41"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.3",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

Expected behavior
For the install after selecting settings to work.

Screenshots
Not Applicable

Desktop (please complete the following information):

• OS: Windows 11 / WSL / Ubuntu 20.xx
• Browser Firefox
• Version Latest

Additional context
Works fine with bun.

[DanielBaulig]

Running into the exact same issue independent of kirimase, just by running npm update (found this while googling for the error). If I understand the output correctly, then react-native depends on exactly version 18.2.0 of react. Not sure if that is the problem or if the problem is op-sqlite@5.0.6 pulling in react-native in the first place. It seems out of place in a web project.

[somidad]

Same for me. But I guess it is upstream issue because Drizzle ORM installation fails even without kirimase.

[Mahir1902]

Just used the standard create-next-app@latest and got the same error when installing drizzle.

npm update --save
npm update --save-dev
npm I --save drizzle-orm

This worked for me. I think its probably because both the react-dom and react dependency is ^18 and not ^18.3.1? Hope it helps!