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} ) }
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- 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
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.