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

Tom Verkon premium asked 1 year ago


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} ) }


Mateusz Lazaru staff commented 1 year ago

Hi Tom, sorry for the inconvenience, we are already aware of this problem, and we're going to fix it in priority, most likely at the end of this month.

There is a topic with workaround solution: https://mdbootstrap.com/support/react/es-module-not-supported/

Treat is just like a short time, temporary solution.


Tom Verkon premium commented 1 year ago

How will I know when the fix has been released? 6.3.1?


Mateusz Lazaru staff commented 1 year ago

mdb-react-ui-kit v7.0.0 was released today and this issue is fixed. Remember to remove .next/cache after updating MDB because it might cause problems sometimes.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 6.3.0
  • Device: windows computer
  • Browser: Chrome
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: No