Topic: MDBIcon not working with Next.js
Expected behavior MDBIcon should work fine in NextJS
Actual behavior When working with MDBIcon component, any change to it (such as conditionally rendering it) causes an exception to happen. I solved that by wrapping MDBIcon into MDBClientOnly component, but this do not handle cases where conditional icons are rendered by other component (DataTables, Collapses...), causing the app to crash unexpectedly.
Resources (screenshots, code snippets etc.)
import { MDBIcon } from 'mdb-react-ui-kit';
import React from 'react';
const Icon = (props) => {
return (
<div style={{ display: 'inline' }}>
<MDBIcon {...props} /> {/* Commenting this line causes an error */}
</div>
);
};
export default Icon;
Hi, could you tell me more about reproducing this error? I'm using next v14.1.3, mdb-react-ui-kit v7.2.0. New Next.js config with app router, without src folder and it works perfectly. The only thing I needed to add is "use client" directive. It shouldn't be neccesary in component like this, but at the moment it is - fix is on the way
// page.tsx
"use client";
import { useState } from "react";
import { MDBIcon } from "mdb-react-ui-kit";
export default function Home() {
const [show, setShow] = useState(true);
return (
<>
<button onClick={() => setShow(!show)}>{show ? "Hide" : "Show"}</button>
{show && <MDBIcon icon="camera-retro" />}
</>
);
}
Also try to mark the problematic component as client component and let me know if the problem persists.
sofgesa pro premium priority commented 8 months ago
My bad, I didn't specify I'm working with Pages Router and without src folder. I'm working with those versions (Next 14.1.3 and mdb-react-ui-kit 7.2.0) and the error triggers when, in development, I delete a line that includes MDBIcon (and Next refreshes the screen), or in both development and production, when an MDBIcon is removed from the render.
Mateusz Lazaru staff commented 8 months ago
Thanks for providing more details. Unfortunately, I still can't get the error. I tried commenting/removing line with the icon, conditional rendering and nothing happened.
Could you post a repo with the bug reproduced?
Hi. While making a repo to reproduce this error, I think I found what was generating it.
In our _app.jsx file we were importing two files of fontawesome-free.
import '@fortawesome/fontawesome-free/css/all.min.css';
import '@fortawesome/fontawesome-free/js/all';
(This comes from a workaround for the previous version of mdb-react-ui-kit that didn't work with Pages Router).
When these two files are imported the error happens, removing the second one seems to solve the issue.
I should have checked this before. Thanks for your help.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB React
- MDB Version: MDB5 7.2.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No