Type 'bigint' is not assignable to ReactNode - help

[waikoo]

Summary

I had an error recently that I have no clue about how to solve. I'm not working with bigints at all. It's in my Portal component. I didn't have this error before updating to nextjs 14.2.2.

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
Failed to compile.
./app/components/generic/Portal.tsx:23:23
Type error: Argument of type 'React.ReactNode' is not assignable to parameter of type 'import("/vercel/path0/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode'.
  Type 'bigint' is not assignable to type 'ReactNode'.
  21 |   }
  22 |
> 23 |   return createPortal(children, modalElem);
     |                       ^
  24 | }
  25 |
error: script "build" exited with code 1
Error: Command "bun run build" exited with 1

How to solve this?

Additional information

This is the component:


"use client"

import { createPortal } from 'react-dom';
import { ReactNode, useEffect, useState } from 'react';

type PortalProps = {
  children: ReactNode;
};

export default function Portal({ children }: PortalProps) {
  const [modalElem, setModalElem] = useState<Element | null>(
    typeof document !== 'undefined' ? document.querySelector('#popup-root') : null
  );

  useEffect(() => {
    setModalElem(document.querySelector('#popup-root'));
  }, []);

  if (!modalElem) {
    return null;
  }

  return createPortal(children, modalElem);
}



Lsp:

Diagnostics:

1. Argument of type 'React.ReactNode' is not assignable to parameter of type 'import("/home/wixur/Projects/thrifty/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode'.
   Type 'bigint' is not assignable to type 'ReactNode'. [2345]

Example

https://github.com/waikoo/thrifty

[waikoo]

managed to solve it by changing the last line to:

  return createPortal(React.createElement('div', null, children), modalElem)

[vilindberg]

I had the same issue and solved the type issues using:
return <>{createPortal(<>{children}</>, modalElem)}</>

[fltzr]

Why is this closed?

[tonydattolo]

same issue on tons of shadcn components

[JamesSingleton]

I ended up having to surround {children} with <></>

[christ20351]

i solved my problem by this solution

[JamesSingleton]

I just ran into this issue upgrading @types/react... Kind of annoying to have to wrap anywhere you pass {children} with <>{children}</>. And what is odd , at least for my Project Aqua repo is that running pnpm build locally builds just fine... And running pnpm lint also works. However, when it tries to build it fails on Vercel... So I have to go hunt down all of the areas where {children} is passed.

[NavOrange]

In my case:

1. check parent component props children type use PropsWithChildren
   replace PropsWithChildren to { children?: React.ReactNode }

2. if use monorepo make sure @types/react @types/react-dom version same

[batuhanbilginn]

Number two fixes.

[donleqt]

Thank you! You made a great suggestion.

"if use monorepo make sure @types/react @types/react-dom version same" Fixed my problem.

[RashJrEdmund]

exactly. I recently upgraded from Next 14 to 15 (with tailwind v4) and a bunch of Shadcn components and my personal components give this error. Strangely, changing from using PropsWithChildren to explicitly define { children: ReactNode } fixes it.

Could there be some kind of problem with the previous PropsWithChildren type ?

[Ekernik]

Faced same problem after updating dependencies.
Deleting and reinstalling node_modules helped.

rm -rf node_modules
bun install 

[bernaferrari]

This seems to be caused by @types/react 13.3.4 or 13.3.5. I think they added a secret "experimental" key that is a bigint and it rippled in bad ways. DefinitelyTyped/DefinitelyTyped@44c0d65

See discussion here: facebook/react#24580

[hanna244-dev]

Thank u!☺️

[eps1lon]

This looks like duplicate versions for @types/react. Does npm ls @types/react list a single version or multiple? https://solverfox.dev/writing/duplicate-types-react may also be of help to fix this issue.

[kavindajayakody]

This was the issue in my case. Using yarn dedupe @types/react and yarn dedupe @types/react-dom worked 🙏

[illepic]

This was my issue, and I had to edit package-lock.json to remove a version of React that was colliding.

[irangarcia]

Same issue here. Deleting node_modules and executing yarn dedupe didn't help

[qaws7791]

I encountered this issue while creating shadcn ui package and next app based on turborepo tailwind template. Following NavOrange's advice, I solved this issue by matching the types/react, types/react-dom versions of the monorepo

[CooperHash]

in turborepo should keep root package.json and packages/package.json @types/react version same

[shahil-yadav]

I solved it by downgrading the types to

"@types/react": "18.3.0",
"@types/react-dom": "18.3.1"

[sajid006]

I was getting the same error while using react table v7 with react v18. Replacing "react-table": "^7.8.0" with @tanstack/react-table": "^8.20.6 solved my issue

[wmonecke]

this is completely breaking shadcn with React 19+NextJs 15. None of the solutions above worked for me. I still see the following type error:

web:check-types: ../../packages/ui/src/components/shadcn/dropdown-menu.tsx(22,20): error TS2344: Type 'ForwardRefExoticComponent<DropdownMenuSubTriggerProps & RefAttributes<HTMLDivElement>>' does not satisfy the constraint 'keyof IntrinsicElements | ForwardRefExoticComponent<any> | (new (props: any) => Component<any, {}, any>) | ((props: any, deprecatedLegacyContext?: any) => ReactNode)'.
web:check-types:   Type 'ForwardRefExoticComponent<DropdownMenuSubTriggerProps & RefAttributes<HTMLDivElement>>' is not assignable to type 'ForwardRefExoticComponent<any>'.
web:check-types:     Type 'import("/Users/waltermonecke/Documents/Code/app-monorepo/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
web:check-types:       Type 'bigint' is not assignable to type 'ReactNode'.

[topolanekmartin]

Did you check if the @types/react version in packages/ui/package.json is the same as in your Next.js project? That helped me 🙂

[SuperOleg39]

Looks like problem exists when:

• library component is compiled with one React typings version (e.g. 19)
• application use other React typings version (e.g. 18)

For example, .d.ts output for class component render method with @types/react@19:

render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;

And with @types/react@18:

render(): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;

So, the first one is incompatible with applications where React 18 and the same typings version is used.
And it is not possible for now to create a package with both 18 and 19 React typings support.

[Johnyworld]

Using Turborepo, React, and shadcn, the issue was resolved by aligning the versions across all apps and packages.

• "@types/react": "^19.1.8",
• "@types/react-dom": "^19.1.6",