Doesn't work in next.js project: Uncaught Error: Objects are not valid as a React child

[itsmepetrov]

I have the following setup:

// pages/system/queue/[[...slug]].tsx

import { QueueDashApp } from "@queuedash/ui";

function QueueDashPages() {
  return (
    <QueueDashApp
      apiUrl="/api/system/queue"
      basename="/system/queue"
    />
  );
};

export default QueueDashPages;

// pages/api/system/queue/[trpc].ts

import { Queue } from "bullmq";
import * as trpcNext from "@trpc/server/adapters/next";
import { appRouter } from "@queuedash/api";
import RedisService from "server/services/redis";

const connection = RedisService.createClient({
  maxRetriesPerRequest: null,
});

const queue = new Queue("main", {
  connection,
});

export default trpcNext.createNextApiHandler({
  router: appRouter,
  batching: {
    enabled: true,
  },
  createContext: () => ({
    queues: [
      {
        queue,
        displayName: "Main",
        type: "bullmq" as const,
      },
    ],
  }),
});

When I try to load the page it throws an error:

helpers.js:121 Uncaught Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props}). If you meant to render a collection of children, use an array instead.

client.js:2 The above error occurred in the <US> component:
    at US (webpack-internal:///./node_modules/@queuedash/ui/dist/main.mjs:20598:13)
    at QueueDashPages
    at WithSuperJSON (webpack-internal:///./node_modules/babel-plugin-superjson-next/dist/tools.js:115:55)
...

Next.js: 13.5.6
Queuedash: 3.2.0

[alexbudure]

Try 3.3.0 and lmk 🤞

[itsmepetrov]

@alexbudure unfortunately, it didn't help

I'm using:

"react": "^18.2.0",
"react-dom": "^18.2.0",

[montocoder]

Is there any update on this issue?

[GuillaumeMunsch]

Up
I also have this issue. Tried several versions of the ui project and it remains

[alexbudure]

What Next.js version are you guys on?

[demochasr]

@alexbudure Next.js 15.3.2, same

[na-ji]

Hello!

The issue is that the UI package has been built using React 19, which is not compatible with React 18. I noticed by debugging on the error, and I've seen that the element that was getting rendered had the type react.transitional.element.

The thing is, React 19 renamed react.element to react.transitional.element. Hence, why when rendering the UI on a project using React 18, this error is happening.

Some people complained about this issue on Astro: withastro/astro#12684
But it probably applies to any React project.

So the solution is to build the project using React 18 to prevent this error from happening. Another way would be to not build the library at all. This would also allow better debugging from NextJS.

A middle ground solution would also to mark react and react-dom dependencies as external in the Vite build configuration. I've just checked, and they are already set as externals... Which is weird because they are still bundled.

EDIT: I've just found this Vite discussions mentioning that external isn't respected for devDependencies 🤦

[yourtallness]

Confirmed that it works for me after upgrading my vite app from React 18 to 19.