Thanks to visit codestin.com
Credit goes to github.com

Skip to content

[E-commerce Template] Gallery component uses non-standard .toArray() method causing runtime error #14608

@JohanL-78

Description

@JohanL-78

Describe the Bug

The Gallery component in the e-commerce template uses 'searchParams.values().toArray()' which is not a standard JavaScript method. This causes a runtime TypeError when users click on product detail pages.

Error message:
TypeError: searchParams.values().toArray is not a function. (In 'searchParams.values().toArray()', 'searchParams.values().toArray' is undefined)

Location: src/components/product/Gallery.tsx:29

Current problematic code:
const values = searchParams.values().toArray()

Proposed fix:
const values = Array.from(searchParams.values())
The .toArray() method on iterators is not yet standardized in JavaScript. The standard approach is Array.from() or spread operator [...iterator].

Link to the code that reproduces this issue

https://github.com/payloadcms/payload/blob/main/templates/ecommerce/src/components/product/Gallery.tsx#L29

Reproduction Steps

  1. Create a new project: npx create-payload-app@latest my-app -t ecommerce
  2. Install dependencies: cd my-app && pnpm install
  3. Configure database (PostgreSQL) in .env
  4. Run development server: pnpm dev
  5. Access admin panel at http://localhost:3000/admin
  6. Create first admin user
  7. Seed database via POST request to /next/seed (while authenticated)
  8. Navigate to homepage and click on any product
  9. Error occurs: TypeError about .toArray() not being a function

Expected: Product gallery displays images
Actual: Runtime error breaks the page

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

area: templates

Environment Info

Binaries:
  Node: 20.19.5
  npm: 10.8.2
  Yarn: N/A
  pnpm: 10.18.3
Relevant Packages:
  payload: 3.64.0
  next: 15.5.6
  @payloadcms/db-postgres: 3.64.0
  @payloadcms/drizzle: 3.64.0
  @payloadcms/email-nodemailer: 3.64.0
  @payloadcms/graphql: 3.64.0
  @payloadcms/live-preview: 3.64.0
  @payloadcms/live-preview-react: 3.64.0
  @payloadcms/next/utilities: 3.64.0
  @payloadcms/plugin-form-builder: 3.64.0
  @payloadcms/plugin-seo: 3.64.0
  @payloadcms/richtext-lexical: 3.64.0
  @payloadcms/translations: 3.64.0
  @payloadcms/ui/shared: 3.64.0
  react: 19.2.0
  react-dom: 19.2.0
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0: Fri Jul  5 17:55:37 PDT 2024; root:xnu-10063.141.1~2/RELEASE_ARM64_T6030
  Available memory (MB): 18432
  Available CPU cores: 11

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions