Importing Component into Root Component in React Correctly and it is not being rendered

Question

I am trying to import a Navbar component that is built using the Radix library into the root component App.js of my react application. I have tried both name and default export to render the component. None of these options work.

Error that comes in live server

I have tried renaming the components to resolve any possible conflicts. Also, I used different export and import conventions built for React. None of these solutions work. I adjusted the file paths but it doesn't help either.

import React from "react";
import { Menubar } from "@radix-ui/react-menubar";

export const NavbarComponent = () => {
  return (
    <Menubar.Root>
      <Menubar.Menu>
        <Menubar.Item key="home">
          <Menubar.Trigger>Home</Menubar.Trigger>
          <Menubar.Link href="#home">Home Link</Menubar.Link>
          <Menubar.Sub>
            <Menubar.Item key="home-link">Home Sub Link</Menubar.Item>
          </Menubar.Sub>
        </Menubar.Item>
        <Menubar.Item key="about">
          <Menubar.Trigger>About</Menubar.Trigger>
          <Menubar.Link href="#about">About Link</Menubar.Link>
        </Menubar.Item>
        <Menubar.Item key="how-to-buy">
          <Menubar.Trigger>How To Buy</Menubar.Trigger>
          <Menubar.Link href="#how-to-buy">How To Buy Link</Menubar.Link>
        </Menubar.Item>
        <Menubar.Item key="tokenomics">
          <Menubar.Trigger>Tokenomics</Menubar.Trigger>
          <Menubar.Link href="#tokenomics">Tokenomics Link</Menubar.Link>
        </Menubar.Item>
        <Menubar.Item key="buy-now">
          <Menubar.Trigger id="buy-now-trigger">Buy Now</Menubar.Trigger>
          <Menubar.Link
            id="buy-now-button"
            href="#"
            onClick={() => {
              console.log("Buy Now Button Clicked");
            }}
          >
            Buy Now
          </Menubar.Link>
        </Menubar.Item>
      </Menubar.Menu>
    </Menubar.Root>
  );
};

import React, { useState, useEffect } from "react";
import SplashScreen from "./components/SplashScreen/SplashScreen";
import NavbarComponent from "./components/NavbarComponent/NavbarComponent";
import "./App.css";

// Functional Component
function App() {
  // State variable
  // Array destructuring
  // State variable and function
  // useState is a hook
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Simulate some loading time
    setTimeout(() => {
      setLoading(false);
    }, 2000);
  }, []);

  return (
    <div className="App">
      {/* Conditonal statement uses ternary operator */}
      {loading ? (
        <SplashScreen />
      ) : (
        <div>
          <NavbarComponent />
        </div>
      )}
    </div>
  );
}

export default App;

Answer 1

You have used export const without default.

export const NavbarComponent = () => { // component logic };

So when you are importing the NavbarComponent to another file, you need to use curly braces.

import { NavbarComponent } from './path-to-file';

If you want to import the file like you have.

import NavbarComponent from './path-to-file';

Then you need to use:

export default const NavbarComponent = () => { // component logic };

Use a named export when you want to export multiple values from a file and want to import them by name in another file.

Use a default export when you want to export a single value as the default export of the file, and you can choose any name when importing.