Layout using parallel routes throw TypeScript invalid "default" export error on next build

[csalmeida]

Summary

Hi everyone, I have a layout that makes use of the Parallel Routes feature.
It works great when running next dev but when running next build, it throws the following TypeScript error:

Type error: Layout "app/archives/layout.tsx" has an invalid "default" export:
  Type "Props" is not valid.

This is how the layout is setup, any ideas on what might be causing this?

type Props = {
  children: React.ReactNode
  archivePanel: React.ReactNode
  archiveForm: React.ReactNode
}

export default function Layout({
    children,
    archivePanel,
    archiveForm
}: Props) {
    return (
        <>
            {children}
            {archivePanel}
            {archiveForm}
        </>
    )
}

Any thoughts would be really helpful 🙏

Additional information

App is using Next `14.0.1`.

This snippet uses parallel routes: https://nextjs.org/docs/app/building-your-application/routing/parallel-routes

The error is thrown at `next build`:


Type error: Layout "app/archives/layout.tsx" has an invalid "default" export:
  Type "Props" is not valid.

Example

Example Project

[icyJoseph]

I guess the issue is, archivePanel vs archive?

type Props = {
  children: React.ReactNode
  archive: React.ReactNode // This one looks wrong? should it `archivePanel`?
  archiveForm: React.ReactNode
}

Or maybe the other way around, the archivePanel, prop passed to Layout is incorrect?

[csalmeida]

Thanks @icyJoseph, that's a good shout!

That is wrong in the snippet but I don't have that mistake in the original project, I just edited by accident and didn't notice, my apologies.

Given that the layout actually works as expected and described on the Next.js docs, a way to at least ignore the TS check would be good but @ts-ignore is not doing the trick here unfortunately. Was wondering if anyone had maybe come across this before.

The correct snippet looks like this:

type Props = {
  children: React.ReactNode
  archivePanel: React.ReactNode
  archiveForm: React.ReactNode
}

export default function Layout({
    children,
    archivePanel,
    archiveForm
}: Props) {
    return (
        <>
            {children}
            {archivePanel}
            {archiveForm}
        </>
    )
}

[icyJoseph]

Could you try to setup a small reproduction demo? This is starting to sound like a bug (but NOT one yet)... it only happens with nested layouts right?

[csalmeida]

The layout is nested in /app/archives.
Absolutely, I managed to replicate it here: https://github.com/csalmeida/nextjs-layout-typescript-error

After setting up the project, run npm run build and the output should be:

> nextjs-layout-typescript-error@0.1.0 build
> next build

   ▲ Next.js 14.0.2

 ✓ Creating an optimized production build
 ✓ Compiled successfully
   Linting and checking validity of types  ...Failed to compile.

app/(auth)/archives/layout.tsx
Type error: Layout "app/(auth)/archives/layout.tsx" has an invalid "default" export:
  Type "Props" is not valid.

Appreciate the support 🙏

[tholder]

This is a really stupid way to solve this, you can't even ts ignore the entire file but if it has the default expected type it passes build, so this works:

type LayoutProps = {
    children?: React.ReactNode
}

type LayoutPropsExtended = {
    children?: React.ReactNode
    archivePanel?: React.ReactNode
    archiveForm?: React.ReactNode
}

export default function Layout(props: LayoutProps | LayoutPropsExtended) {
    const { children, archivePanel, archiveForm } = {
        ...props,
        archiveForm: undefined,
        archivePanel: undefined,
    }

    return (
        <div className="h-full">
            {children}
            {archiveForm}
            {archivePanel}
        </div>
    )
}

[csalmeida]

It did work; I just tested it and the build passes okay so it could be a workaround for now. 🎉

[artemis-prime]

I'm curious though, OP... You're passing 3 ReactNode's into a layout. How are you doing this? I thought layouts only nest via their children prop. Are you using cloneElement in the parent to pass the props? I ask because I'd love to have layouts with multiple slots working w ssr! In a client only environment, you just use renderprops or pass in ReactNodes, but I didn't think that was possible to a layout, which is a server component.

[csalmeida]

It's been a while since I looked at this project but to make this happen I used a feature called Parallel Routes.

In my example, you can see that archiveForm and archivePanel are marked as parallel routes here, then these pages can be accessed in the /archives/layout.tsx file.

I don't remember all the heuristics but I believe as long as you prefix the page directory with @, and reference it in your layout, NextJS will do some magic to tie everything together.

[thisisankur0]

For anyone still facing this issue: Build error only comes up if you have declared the page inside props but the file doesn't exist inside the folder layout.

[onatyy]

What do you exactly mean by this. For example I'm getting the error: Type error: Page "app/integrations/page.tsx" has an invalid "default" export:
Type "HTMLAttributes & RefAttributes" is not valid.

[artemis-prime]

Please clarify your answer? I can't parse what you're saying.

[charltoons]

Not sure if this is exactly what @thisisankur0 was experiencing, but for me I had copied my layout.tsx from somewhere else and forgot to move the parallel route props.

example:

export default async function MyLayout(props: { 
  children: ReactNode, 
  header: ReactNode // I had `@header/...` parallel route files for another layout but not one for this layout. This prop was unused anyway, so removing it here fixed my issue.
}) {

[thisisankur0]

Yep exactly the same as @charltoons, thanks for a more clarifying reply.

[Cyclodex]

I had the same issue and came across this post.
However for me it was super strange, as it worked locally , but in the docker setup it did not - and failed with the same error as mentioned in this issue.

I found out that:
VSCode was using typescript @ 5.3.2 OK (it was not intended to use the vscode version, I usually use the package.json one)
Docker build did use typescript @ 5.3.3 NOT OK (which comes from the package-lock.json version)

Now I increased the version to typescript "latest" @ 5.4.3 OK
Interestingly the issue is gone.
Maybe this helps anyone...