Terminal error: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined

Question

I try to make an Navigation bar, when i run npm dev its rendered perfectly but the console says:

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. and the error point to this line in page.js

<Component {...pageProps} />

This is my code

page.js

"use client";
import React from "react";
import { NavBar } from "../components/componentsindex";
const MyApp = ({ Component, pageProps }) => (
  <NavBar>
    <Component {...pageProps} />
  </NavBar>
);

export default MyApp;

componentsindex.js

import Button from "./Button/Button";
import NavBar from "./NavBar/NavBar";

export {Button, NavBar};

NavBar.jsx

import React, { useState, useEffect } from "react";
import Image from "next/image";
import { Button } from "../componentsindex";
import Images from "../../img";

const NavBar = () => {

//my code

};
export default NavBar;

I tried to remove "use client" from page.js and add it to NavBar.jsx, this error now disappear but the terminal still says:

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. ⨯ Error: Unsupported Server Component type: undefined

Anyone know how to fix this?

Answer 1

About NavBar.jsx file

You are using useState and useEffect hooks so you will need the 'use client' directive at the top in the NavBar.jsx file.

About the warning

From the file names, I suppose that you are using Next JS App router.

In the page.js file you are destructuring two props {Component, pageProps} which is used in _app.js file in Next JS pages router. So I think that is causing the warning as these props must be undefined in the app router.

You can try to write the code like this in page.js file:

import { NavBar } from "../components/componentsindex";

const Page = () => {
  return (
    <NavBar>
      // child components
    </NavBar>
  )
}

export default Page;

Also define children prop in NavBar component:

const NavBar= ({children}) => {
  return (
    <nav>
      {children}
    </nav>
  )
}

export default NavBar;