Skip to content

[v11] Tabs: Error when SSRing in Next.js #8387

@callumgare

Description

@callumgare

Describe the bug

Love the project! Very helpful :)

With v11 alpha.7 (I'm guessing earlier versions too, that's just the only one I tested) you get an error in the browser when trying to use the Tabs component in a page that is SSR.

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I followed this guide to setup up ReactPrime in my project: https://v11.primereact.org/docs/installation/nextjs

This might apply to other components too. I haven't tried many yet.

Reproducer

https://stackblitz.com/edit/stackblitz-starters-7lommp8z

System Information

System:
    OS: macOS 15.6.1
    CPU: (10) arm64 Apple M2 Pro
    Memory: 1.03 GB / 32.00 GB
    Shell: 4.0.2 - /opt/homebrew/bin/fish
  Binaries:
    Node: 20.19.4 - /opt/homebrew/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.8.2 - /opt/homebrew/bin/npm
    Deno: 2.4.5 - /opt/homebrew/bin/deno
  Browsers:
    Chrome: 142.0.7444.135
    Edge: 142.0.3595.65
    Firefox: 145.0
    Safari: 26.1
  npmPackages:
    primereact: ^11.0.0-alpha.7 => 11.0.0-alpha.7 
    react: 19.2.0 => 19.2.0 
    tailwindcss: ^4 => 4.1.17

Steps to reproduce the behavior

  1. Download and run the stackblitz project. I couldn't get it to actually run in stackbliz in the browser due to issues with next.js's turbopack and wasm but if you download the project and run it locally it should work. The project is just https://github.com/primefaces/primereact-examples/tree/main/nextjs-quickstart-nextgen that is linked to from https://v11.primereact.org/docs/installation/nextjs and has been updated to the latest version of prime react v11 and nextjs + the Tabs component added and "use client;" commented out.

  2. Observe the error

  3. Uncomment "use client;" in app/page.tsx

  4. Observe that the error goes away.

Expected behavior

No error to occur.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions