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 <></>

[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.

[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

[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.

[irangarcia]

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