search

nextui-org / nextui

🚀 Beautiful, fast and modern React UI library.
https://nextui.org
MIT License
20.55k stars 1.25k forks source link

[BUG] - Project initialized with `nextui init my-nextui-app` command has broken suspense / query-params behavior on IOS devices #3386

Open bnohad opened 1 week ago

bnohad commented 1 week ago

NextUI Version

2 (using CLI)

Describe the bug

NextUI projects initialized with: nextui init my-nextui-app have bad behavior with suspense / query params.

  1. Suspense / Query params are not working as expected when using IOS devices.
  2. Changing the query params multiple times seems to crash the app randomly regardless of the device (mac / pc / mobile).

i've created 2 repos to demonstrate the problem:

  1. Vanilla NextJS project initialized with the Next.js CLI - this project is NOT AFFECTED by the Suspense / QueryParams issue.
  2. A NextUI project which was initialized with the NextUI CLI - this project IS AFFECTED by the Suspense / QueryParams issue.


NextUI live demo: https://queryparams-notworking.vercel.app/?dothis=ok&whendothis=soonokay&whynotnow=okay

Vanilla Next.js live demo: https://queryparams-notworking-vanila.vercel.app/?dothis=ok&whendothis=soonokay&whynotnow=okay

  1. SUB-ISSUE 1: the NextUI demo works fine on a computer, but doesn't work on IOS mobile devices (verified on Chrome, Safari & Brave).
  2. SUB-ISSUE 2: this one is a little more tricky to reproduce, because it happens randomly without any obvious reason.

Your Example Website or App

https://queryparams-notworking.vercel.app/?dothis=ok&whendothis=soonokay&whynotnow=okay

Steps to Reproduce the Bug or Issue

  1. Initialize a new NextUI project using the command: nextui init my-nextui-app
  2. see the repo for the sample code (app/page.tsx & components/params-handler.tsx)
  3. build and deploy the project to Vercel using npm run build && vercel --prod.
  4. visit the deployed project via an IOS device
  5. Click the "replace query" button - changes to the query params are not picked up by the app outside the <Suspense></Suspense> block.

On the other hand, the exact same logic and structure works fine in all devices when using a Vanilla Next.js project initialized by their CLI.

Expected behavior

The app should pick up on changes of the query params / suspense block when using IOS devices.

Screenshots or Videos

SUB-ISSUE 1: NextUI - NOT WORKING (params are not picked up outside the suspense block) not-working

Next.js - WORKING (params are picked up outside the suspense block) working

Operating System Version

Browser

Safari

linear[bot] commented 1 week ago

ENG-1089 [BUG] - Project initialized with `nextui init my-nextui-app` command has broken suspense / query-params behavior on IOS devices