search

payloadcms / payload

Payload is the open-source, fullstack Next.js framework, giving you instant backend superpowers. Get a full TypeScript backend and admin panel instantly. Use Payload as a headless CMS or for building powerful applications.
https://payloadcms.com
MIT License
27.65k stars 1.72k forks source link

Payload is unable to resolve `@floating-ui/react` and `react-onclickoutside` packages. #9401

Closed shawqicauses closed 22 hours ago

shawqicauses commented 1 day ago

Describe the Bug

Salam everyone.

I have created a Next.JS application using npx create-next-app@latest then initialised Payload using npx create-payload-app.

When I navigated to /admin an error occurred saying something like Unable to resolve @floating-ui/react.

When I have downloaded @floating-ui/react and react-onclickoutside package, everything worked just fine.

This is the commit for what I have done to fix it in my repository: https://github.com/shawqicauses/shawqi-stack/commit/8140c6cd0d9bbfc54f8be0f6dc28d1fd8aad0cf0

Thanks.

Link to the code that reproduces this issue

https://github.com/shawqicauses/shawqi-stack

Reproduction Steps

  1. Creating Next.JS application using npx create-next-app@latest
  2. Initialising Payload CMS application using npx create-payload-app

Which area(s) are affected? (Select all that apply)

area: core

Environment Info

Next.JS version 15
denolfe commented 23 hours ago

What package manager? There is not a lockfile checked into your reproduction. Also please provide the output of payload info.

denolfe commented 22 hours ago

Also, either you're using an outdated create-payload-app, or create-payload-app wasn't used in creating your reproduction.

Whenever a project is made using cpa, an .npmrc file is written that contains legacy-peer-deps=true in it, which will handle automatically installing peer dependencies.

This is the file tree for blank

.
├── .env.example
├── .eslintrc.cjs
├── .gitignore
├── .npmrc
├── .prettierrc.json
├── .yarnrc
├── Dockerfile
├── README.md
├── docker-compose.yml
├── next.config.mjs
├── package-lock.json
├── package.json
├── src
│   ├── app
│   ├── collections
│   ├── payload-types.ts
│   └── payload.config.ts
└── tsconfig.json
SaidBahaDev commented 17 hours ago

i am having same issue , installed nextjs , run npx create-payload-app

shawqicauses commented 16 hours ago

i am having same issue , installed nextjs , run npx create-payload-app

Hey @SaidBahaDev

Run npm install @floating-ui/react react-onclickoutside and it should work.

SaidBahaDev commented 15 hours ago

i am having same issue , installed nextjs , run npx create-payload-app

Hey @SaidBahaDev

Run npm install @floating-ui/react react-onclickoutside and it should work.

thnks i installed both with --legacy-peer-deps and it works, i tested new nextjs and payload with pnpm and i didnt get the same error for @floating-ui/react, react-onclickoutside but i had it for sharp, installed it and its fixed.