Topic: Problem with import css in nodes_module folder : NextJs and mdb5-react-ui-kit-pro-advanced > 5.1

cariforef priority asked 7 months ago

Hy, I would like to upgrade my version, but when I add the new 7.0.0 version of mdb5-react-ui-kit-pro-advanced in my NextJs 13 (or 14) project, I got a error :

Failed to compile
Global CSS cannot be imported from within node_modules.
Read more:
Location: node_modules/mdb-react-ui-kit/dist/mdb-react-ui-kit.esm.js

Import trace for requested module:
This error occurred during the build process and can only be dismissed by fixing the error.

6 months ago I opened a ticket (#6 in mdb5-react-ui-kit-pro-advanced project) in Gitlab about this issue. But Mateusz Lazaru @m.lazaru has closed it 2 months ago. I have just reopened it. :-)


cariforef priority commented 7 months ago

there is already an issue about this :

Mateusz Lazaru staff answered 7 months ago

Sorry, I couldn't reproduce it before, but now I see this error doesn't occur in app-router, but it does in pages approach. Sorry, I missed that.

The workaround solution is to copy folder mdb-react-ui-kit/ from node_modules to src.

After that, import components this way:

// src/pages/_app.tsx
import { MDBStepper, MDBStepperStep } from "../mdb-react-ui-kit";

That is temporary. We will need to do something with react-perfect-scrollbar dependency to fix it properly.

cariforef priority answered 7 months ago

Hello Mateusz, I've already tried to remove these folder. I use the old way of nextJs project in a NextJS version 13 , with pages folder instead of app. So maybe it comes from this.

In a new clean project, with the app way, it seems to work better. But my big project is still with the pages folder yet. I will migrate all but it is a huge work to do. Thanks.

Mateusz Lazaru staff commented 7 months ago

I've deleted my previous answer, because I managed to reproduce the error just a moment before. Yes, it seems like it works properly with app-router, but it doesn't with pages. Anyway, it should work in both cases, so we will take a closer look.

cariforef priority commented 7 months ago

No problem. :-) I will wait for the fix.

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 7.0.0
  • Device: MacOS
  • Browser: Chrome
  • OS: Mac OSX
  • Provided sample code: No
  • Provided link: Yes