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

cariforef priority asked 11 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
./node_modules/react-perfect-scrollbar/dist/css/styles.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/mdb-react-ui-kit/dist/mdb-react-ui-kit.esm.js

Import trace for requested module:
./node_modules/react-perfect-scrollbar/dist/css/styles.css
./node_modules/mdb-react-ui-kit/dist/mdb-react-ui-kit.esm.js
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. :-)

https://git.mdbootstrap.com/mdb/react/mdb5/prd/mdb5-react-ui-kit-pro-advanced/-/issues/6

Thanks.


cariforef priority commented 11 months ago

there is already an issue about this : https://mdbootstrap.com/support/react/nextjs-run-dev-error/


Mateusz Lazaru staff answered 11 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 11 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 11 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 11 months ago

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



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

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