Next.js Discord

Discord Forum

How to solve this build error?

Answered
Asian black bear posted this in #help-forum
Open in Discord
Asian black bearOP
As far as I can tell before I updated to the latest next (14.2.2) this didn't throw an error.

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

Here's my Portal.
"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);
}


I have no idea how to solve this.
Answered by Asian black bear
Changing the last line to:
tsx  
return createPortal(React.createElement('div', null, children), modalElem)

solved it
View full answer

1 Reply

Asian black bearOP
Changing the last line to:
tsx  
return createPortal(React.createElement('div', null, children), modalElem)

solved it
Answer