Integrating mdb-react-ui-kit with NextJS 13 using app router

Expected behavior Should get no errors on page

Actual behavior

multiple errors are displayed when trying to render the page, such as:

Attempted import error: 'MDBCard' is not exported from 'mdb-react-ui-kit' (imported as 'MDBCard').

Import trace for requested module: ./app/page.tsx

./app/page.tsx Attempted import error: 'MDBRipple' is not exported from 'mdb-react-ui-kit' (imported as 'MDBRipple').

Import trace for requested module: ./app/page.tsx ... one for each component import

Resources (screenshots, code snippets etc.)

Code for page.tsx

import { MDBBtn, MDBCard, MDBCardBody, MDBCardImage, MDBCardText, MDBCardTitle, MDBRipple } from 'mdb-react-ui-kit';

export default function Home() { return ( https://mdbootstrap.com/img/new/standard/nature/111.webp' fluid alt='...' /> Card title Some quick example text to build on the card title and make up the bulk of the card's content. Button ); }

Code for layout.tsx

import "@fortawesome/fontawesome-free/css/all.min.css"; import 'mdb-react-ui-kit/dist/css/mdb.min.css'; import type { Metadata } from 'next'; import { Inter } from 'next/font/google'; const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = { title: 'Create Next App', description: 'Generated by create next app', }

export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) }