Topic: Problem with import css in nodes_module folder : NextJs and mdb5-react-ui-kit-pro-advanced > 5.1
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.
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 12 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 commented 12 months ago
No problem. :-) I will wait for the fix.
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: MDB5 7.0.0
- Device: MacOS
- Browser: Chrome
- OS: Mac OSX
- Provided sample code: No
- Provided link: Yes
cariforef commented 12 months ago
there is already an issue about this : https://mdbootstrap.com/support/react/nextjs-run-dev-error/