Next.js Discord

Discord Forum

Type error: component has an invalid "default" export

Answered
Dwarf Hotot posted this in #help-forum
Open in Discord
Avatar
Dwarf HototOP
Using NextJS 14.1 and React 18 with Typescript 5.3.3 (all from using npx create-next-app earlier today)...

I have a component defined as below that throws a Type error....invalid default export...Type "PageProps" is not valid. error when 'exported', but not when rendered/loaded using the dev server or when used in a basic React App.

tsconfig.json is identical in the react app and here and next.config.mjs only has output: export configured.

'use client'

import React, { PropsWithChildren } from 'react';

interface LayoutProps extends PropsWithChildren<{}> {
  someVal?: number;
}

export default function Layout({ someVal, children }: LayoutProps) {
  return (
    <html>
    <body>
      <div>{someVal}</div>
      <div>{children}</div>
    </body>
    </html>
  );
}
Answered by Dwarf Hotot
This isn't an issue with linting as much as it is an issue with the use of the layout component. Per https://nextjs.org/docs/app/api-reference/file-conventions/layout, the layout.tsx component is only allowed to receive an argument of type { children: ReactNode, params?: any|undefined}. That's why it compiles, but fails the linting and not during compilation. The limited params are needed for NextJS to be able to correctly render the component during export.
View full answer

13 Replies

Avatar
josh
So it's failing linting while you're building it? Is there any more detail to that error? Is it underlined in your editor?
Avatar
Dwarf HototOP
No, it fails the build proper
It does fail linting too, but you can fool that away by doing the definition and export on different lines: function Foo()... ; export default Foo
oh
Avatar
josh
Are you using PropsWithChildren the wrong way around? https://blog.logrocket.com/react-children-prop-typescript/
Avatar
Dwarf HototOP
you know what, it fails on the linting part of the build
when you said linting, I thought it was just in the IDE b/c that was breaking too....so maybe it's a problem with .estlint
I thought the linting process happened before compilation
but it actually says 'Compiled Successfully' and then it says 'Linting and checking validity of types` which....-_-
Pulled out eslint, same message.
Avatar
Dwarf HototOP
This isn't an issue with linting as much as it is an issue with the use of the layout component. Per https://nextjs.org/docs/app/api-reference/file-conventions/layout, the layout.tsx component is only allowed to receive an argument of type { children: ReactNode, params?: any|undefined}. That's why it compiles, but fails the linting and not during compilation. The limited params are needed for NextJS to be able to correctly render the component during export.
Answer
Avatar
josh
cool, I didn't know that
Avatar
Dwarf HototOP
Me neither 😄