Next.js Discord

Discord Forum

next 13.5.2 -> Type 'Element' is not assignable to type 'ReactNode'. Property 'children' is missing

Unanswered
Lionhead posted this in #help-forum
Open in Discord
LionheadOP
Anyone who can help with my type conversion problem? Explicitly casting all elements as ReactNode makes my code compilable. Wondering what could be the cause why the latest next can't cast Element to ReactNode.

See below how I made it work. 

export default async function CollectionsAddPage({ }: RedeemPageProps) {

  const breadcrumbs: Breadcrumb[] = [{ name: "Admin" }, { name: "Collections" }, { name: "Add"}];
  const breadcrumbsBar = (<BreadcrumbsBar items={breadcrumbs} ></BreadcrumbsBar>) as ReactNode;
  const infoLine = (<ThemedP styleName="p2" colorName="default">Add a new collection to the database</ThemedP>) as ReactNode;
  const end = (<ThemedP styleName="p1" colorName="default"></ThemedP>) as ReactNode;

  return (
    <ThemedPrimaryContainer styleName="default">
        {( <SubheaderContainer breadcrumbsBar={breadcrumbsBar} infoLine={infoLine} end={end} /> ) as ReactNode}
        
        {(<ThemedMaxWidthContainer styleName="default">
          {(<ThemedContentContainer styleName="default"> 

            {( <AddForm /> ) as ReactNode}

          </ThemedContentContainer>) as ReactNode }
        </ThemedMaxWidthContainer> ) as ReactNode}
    </ThemedPrimaryContainer>
  )

39 Replies

LionheadOP
I am very much aware of that 😉
aardani
if you have a prop that accepts React.ReactNode you can just pass reactnode directly to the prop like
breadcrumbsBar={<BreadcrumbsBar items={breadcrumbs} ></BreadcrumbsBar>}

this is much mroe preferred since you can't pass funciton in rsc
LionheadOP
We are using turborepo, nextjs, in a rather large code base. Something happened while upgrading today and reinstalling the depencies
if you have a prop that accepts React.ReactNode you can just pass reactnode directly to the prop like
breadcrumbsBar={<BreadCrumbsBar>}


We could do that since this morning...
aardani
yeah you could do that. have you tried it?
oh its turborepo
LionheadOP
And yes, our whole code base is standard next.js 13.4. It worked like a charm till this mornign.
aardani
Im not sure how the behaviors differs from turborepo but i can tell form a glance that it doesn't need all that type casting
LionheadOP
Again, we don't use typecasting like this. It's only to show where the problem is
aardani
I fail to see where the problem is
you should provide the error code without the typecasts
LionheadOP
There is no error when typecasted. That works. Without the typecase we get the following error;

Type error: Type 'Element' is not assignable to type 'ReactNode'.
  Property 'children' is missing in type 'Element' but required in type 'ReactPortal'.

  28 |   return (
  29 |     <ThemedPrimaryContainer styleName="default">
> 30 |       <SubheaderContainer breadcrumbsBar={breadcrumbsBar} infoLine={infoLine} end={end} />
     |       ^
  31 |       
  32 |       <ThemedMaxWidthContainer styleName="default">
  33 |         <ThemedContentContainer styleName="default">
   Linting and checking validity of types .npm ERR! Lifecycle script `build` failed with error: 
export default async function CollectionsAddPage({ }: RedeemPageProps) {

  const breadcrumbs: Breadcrumb[] = [{ name: "Admin" }, { name: "Collections" }, { name: "Add"}];
  const breadcrumbsBar = (<BreadcrumbsBar items={breadcrumbs} ></BreadcrumbsBar>);
  const infoLine = (<ThemedP styleName="p2" colorName="default">Add a new collection to the database</ThemedP>);
  const end = (<ThemedP styleName="p1" colorName="default"></ThemedP>);

  return (
    <ThemedPrimaryContainer styleName="default">
      <SubheaderContainer breadcrumbsBar={breadcrumbsBar} infoLine={infoLine} end={end} />
      
      <ThemedMaxWidthContainer styleName="default">
        <ThemedContentContainer styleName="default">

          <AddForm />

        </ThemedContentContainer>
      </ThemedMaxWidthContainer>
    </ThemedPrimaryContainer>
  )
}
aardani
I think that has something to do with SubheaderContainer
maybe you can send code for SubheaderContainer
LionheadOP
export const SubheaderContainer = ({breadcrumbsBar, infoLine, end}: SubheaderContainerProps) => {
  return (
    <ThemedMaxWidthContainer styleName="default" className="flex flex-col gap-y-4 overflow-hidden  mb-10">
      {(<ThemedContentContainer styleName="default" className='flex flex-row items-center justify-between'>
        {breadcrumbsBar as ReactNode}
        {end as ReactNode}
      </ThemedContentContainer>) as ReactNode}

      {(<ThemedContentContainer styleName="default">
        {infoLine}
      </ThemedContentContainer> ) as ReactNode}
    </ThemedMaxWidthContainer>
  );
}


All this code worked like a charm for a year , until this morning
aardani
oof it looked normal
I think i need to see whats in SubheaderContainerProps
LionheadOP
export interface SubheaderContainerProps {
breadcrumbsBar: ReactNode;
infoLine: ReactNode;
end?: ReactNode;
}
```
aardani
...
have you tried updating react-dom, @types/react , and @types/react-dom
LionheadOP
yes, i aligned them everywhere. made sure the same versions etc
aardani
hmmm can i see the prop type of ThemedPrimaryContainer ?
LionheadOP
export interface ContainerProps {
  children?: ReactNode|undefined;
  styleName: 'default';
  className?: string;
}
aardani
this probably wouldnt fix it but try writing ReactNode and remove the |undefined?
LionheadOP
I'll give it a try, thx, need to head out for an hour
Plain Chachalaca
I am having the same issue
LionheadOP
Hi Diogo, this is a bit effed up 😉
LionheadOP
What I am doing now is going through the last known good one and check out what the messed up update was....
@Lionhead What I am doing now is going through the last known good one and check out what the messed up update was....
Plain Chachalaca
Removed @types/react and @types/react-dom and everything started working
LionheadOP
Interesting and good to know. Reverting to the past one helped too.

That said, the amount of time spent on stuff like this is insane.
@manypkg/cli is a linter for package.json especially in mono repos. I think this is the direction it needs to go.
Plain Chachalaca
Tried to create a new project with the exact same dependecies and everything works fine, I still need to fix this on the main project
@Lionhead have you found anything new?
I think there is somthing to do with tsconfig
Also, having everything inside src helped
@Plain Chachalaca I think there is somthing to do with tsconfig
Plain Chachalaca
nvm, back to the same place