Topic: Trying to do basic MDBBtn import fails

gsdv free asked 1 year ago


Expected Behavior I expected that I would be able to import a MDBtn into app.tsx.

Actual behavior Multiple errors: 1) Attempted import error: 'MDBBtn' is not exported from 'mdb-react-ui-kit' (imported as 'MDBBtn'). 2) node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js (1484:8) @ attemptResolveElement. 3) Error: Unsupported Server Component type: undefined

Resources (screenshots, code snippets etc.)

import { MDBBtn } from 'mdb-react-ui-kit';
export default function Home() {
    return (
    <>
        <MDBBtn>Button</MDBBtn>
    </>
    )
}

Grzegorz Bujański staff commented 1 year ago

I created a new project and everything seems to be working fine. How did you add the MDB to the project? By npm?


Johnson Elugbadebo free commented 1 year ago

Hi Gregorz, I'm having a similar issue. All my MDB components are triggering the "Attempted Import Error". I installed via NPM. I imported the CSS style sheets in the RootLayout "layout.js" file for my app.

I'm using the following dependencies: "mdb-react-ui-kit": "^6.1.0" "next": "^13.4.12" "react": "18.2.0" "react-dom": "18.2.0"

Any idea what is going on?


Mateusz Lazaru staff commented 1 year ago

does import from mdb-react-ui-kit.esm work?

import { MDBCarousel, MDBCarouselItem } from "mdb-react-ui-kit/dist/mdb-react-ui-kit.esm";

Johnson Elugbadebo free commented 1 year ago

Hi mlazaru -- this is working!!!!!!

I had to go with 'mdb-react-ui-kit/dist/mdb-react-ui-kit.esm.js' for the errors to stop.

Thank you very much!!!!

Johnson



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: MDB5 6.1.0
  • Device: MacBook Pro 2021
  • Browser: Google Chrome
  • OS: macOS Ventura 13.4
  • Provided sample code: No
  • Provided link: No