I am having an issue with integrating an existing react component I found, into my app. "Attempted import error:"

Question

My goal is to bring an existing react component (below) that I found on the web, into my app to use. It is an animated navigation bar.

Here is the error message I receive after trying to compile the below code (snippets 2 and 3 below):

Failed to compile.

./src/components/Navbar.js
Attempted import error: 'react-responsive-animate-navbar' does not contain a default export (imported as 'ReactNavbar').

Maybe there is an issue with the library I installed? The creator had made this component 7 months ago, here - https://www.npmjs.com/package/react-responsive-animate-navbar .

Regardless, please see below for details on 1. the component I am trying to bring in, 2. the component in my code, refactored slightly and 3. the file I am importing this component into.

This is the component I found on the web. It renders an awesome navbar I would like to bring into my app. HOWEVER, I have never used the "class ... extends compoent" syntax. I have only used the "export default function name(){return()}" style.

npm install --save react-responsive-animate-navbar

import React from "react";
import ReactNavbar from "react-responsive-animate-navbar";
 
class Example extends Component {
  render() {
    return (
      <ReactNavbar
        color="rgb(25, 25, 25)"
        logo="https://svgshare.com/i/KHh.svg"
        menu={[
          { name: "HOME", to: "/" },
          { name: "ARTICLES", to: "/articles" },
          { name: "ABOUT ME", to: "/about" },
          { name: "CONTACT", to: "/contact" },
        ]}
        social={[
          {
            name: "Linkedin",
            url: "https://www.linkedin.com/in/nazeh-taha/",
            icon: ["fab", "linkedin-in"],
          },
          {
            name: "Facebook",
            url: "https://www.facebook.com/nazeh200/",
            icon: ["fab", "facebook-f"],
          },
          {
            name: "Instagram",
            url: "https://www.instagram.com/nazeh_taha/",
            icon: ["fab", "instagram"],
          },
          {
            name: "Twitter",
            url: "http://nazehtaha.herokuapp.com/",
            icon: ["fab", "twitter"],
          },
        ]}
      />
    );
  }
}

Here is the component since I have brought it into my app and slightly refactored it to fit the react syntax I have been using.

./src/components/Navbar.js

import React from "react";
import ReactNavbar from "react-responsive-animate-navbar";

export default function Navbar({ setSignedIn }) {
  return (
      <ReactNavbar
        color="rgb(25, 25, 25)"
        logo="https://svgshare.com/i/KHh.svg"
        menu={[
          { name: "HOME", to: "/Explore" },
          { name: "ARTICLES", to: "/articles" },
          { name: "My Profile", to: "/profile" },
          { name: "CONTACT", to: "/contact" },
        ]}
        social={[
          {
            name: "Linkedin",
            url: "https://www.linkedin.com/in/nazeh-taha/",
            icon: ["fab", "linkedin-in"],
          },
          {
            name: "Facebook",
            url: "https://www.facebook.com/nazeh200/",
            icon: ["fab", "facebook-f"],
          },
          {
            name: "Instagram",
            url: "https://www.instagram.com/nazeh_taha/",
            icon: ["fab", "instagram"],
          },
          {
            name: "Twitter",
            url: "http://nazehtaha.herokuapp.com/",
            icon: ["fab", "twitter"],
          },
        ]}
      />
    );
  }

And finally, here is where I am attempting to import this component for it to render onto an actual page.

./src/Pages/IntroPage

import React from "react";
import Navbar from "../components/Navbar";
import Categories from "../components/Categories";

export default function ChooseACategory({ setSignedIn }) {
  return (
    <div>
      <Navbar setSignedIn={setSignedIn} />
      <Categories />
    </div>
  );
}

I suspect the issue is with my refactoring from the "class ... extends component" syntax to the "export default function name" syntax (which I am more familiar with). I understand there is not a big difference between the two, but I would rather keep my code for this project uniform. Any help is welcome!

Answer 1

There was nothing wrong with you refactor, because you did not use any states. I installed that package, with nothing changed. The same wrong message as yours appeared when I started it. I suspect this package itself is not runnable.

Answer 2

For my situation, I found a workaround solution, it not renders and works properly using the highlighted edit in the screenshot below. Thanks!

   import React from "react";
    import * as ReactNavbar from "react-responsive-animate-navbar";
    import Logo from "../Assets/Media/ToolioLogoSmall.png"
     
    
    export default function Navbar({ setSignedIn }) {
      console.log(ReactNavbar.ReactNavbar) //Edited, fixed issue.
      return (
        <div style={style.background}>
          <ReactNavbar.ReactNavbar style={style.background}
            color="rgb(25, 25, 25)"
            logo={Logo}
            menu={[
              { name: "HOME", to: "/Explore" },
              { name: "ARTICLES", to: "/articles" },
              { name: "My Profile", to: "/profile" },
              { name: "CONTACT", to: "/contact" },
            ]}
            social={[
              {
                name: "Linkedin",
                url: "https://www.linkedin.com/",
                icon: ["fab", "linkedin-in"],
              },
              {
                name: "Facebook",
                url: "https://www.facebook.com/",
                icon: ["fab", "facebook-f"],
              },
              {
                name: "Instagram",
                url: "https://www.instagram.com/",
                icon: ["fab", "instagram"],
              },
              {
                name: "Twitter",
                url: "http://www.twitter.com/",
                icon: ["fab", "twitter"],
              },
            ]}
          />
                
          </div>
        );
      }

Answer 3

Looking at the source for that package, it does not contain a default export. It has:

export const ReactNavbar without the default.

Try importing the named component instead of as a default:

import { ReactNavbar } from instead of import ReactNavbar from