Question 244487 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Type error: Page "" has an invalid "default" export: Type "" is not valid

I’m working on a small project using nextjs 13, trying to display products currently stored in json file (later will move to DB). Application is running correctly, however when building it fails on linting.

Error:
Type error: Page "src/app/shop/page.tsx" has an invalid "default" export: Type "Products" is not valid.

I’m importing interface from child component, where I’m displaying the product:

import ProductTile, { Product } from "./product-tile";

Then I’m creating interface for page:

interface Products {
  products: Product[];
}

Products are used as props on page:

export default function Page({ products }: Products) {}

Here is whole product interface used in product-tile:

export interface Product {
  id: number;
  name: string;
  type: string;
  profile: string[];
  description: string;
  price: Price[];
  img: string;
  allergens: Allergens;
}

export interface Price {
  size: string;
  price: number;
  dimension: Dimension[];
}

export interface Dimension {
  width: number;
  depth: number;
}

export interface Allergens {
  nuts: boolean;
  gluten: boolean;
  lactose: boolean;
  eggs: boolean;
  milk: boolean;
}

Any idea why it’s not happy with this code?

Tags:

2

Answers


  1. 0

    According to the official doc https://nextjs.org/docs/app/api-reference/file-conventions/page

    pages.js/tsx can only has the props of params and searchParams, which mean only these 2 types are welcomed in this kind of file.

    What you might want to do is to have the page.tsx render the component you want inside the Page component you have there, then pass the props and the corresponding type in it.

    Login or Signup to reply.
  2. 0

    The problem is the default export of page.{tsx,jsx}, layout.{tsx,jsx}, template.{tsx,jsx}, loading.{tsx,jsx}, error.{tsx,jsx}, not-found.{tsx,jsx}, and default.{tsx,jsx} must be a react component.
    and function ({products}) {} is not a valid react component since it doesn’t return a JSX.

    You have to return any valid ReactNode like JSX, string, number, null, or undefined.

    The correct code should be:

    export function Page({products}: Props) {
  return <h1>Hello world!</h1>
  // return <></>
  // return null
  // return "Hello world!"
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search