Topic: MDBreact All imports are failing - Attempted import error: is not exported from 'mdbreact'.
yyaghi free asked 3 years ago
Expected behavior
All Pro and None Pro packages be loaded.
Actual behavior
None of the packages are being loaded. Just getting a bunch of errors of "Attempted import error: XXXX was not exported from mdbreact.
It started off with the Modal component, when I remove that, it moves to Navbar, after than when I remove that, it goes to the next component. So it seems to stop at every error and complain about every component I've removed so far.
How I've Installed it
- Deleted node_modules folder
- Copied mdbreact-5.0.1.tgz into root folder
- Ran npm i
Packages mdbreact now shows under node_modules folder.
I have import 'mdbreact/dist/css/mdb.css'; in my index.js file and i'm importing using:
import {MDBXXXX} from 'mdbreact';
Resources (screenshots, code snippets etc.)
Attempted import error: 'MDBNavbarItem' is not exported from 'mdbreact'.
Krzysztof Wilk staff answered 3 years ago
Hi!
Try to download the latest version of the package. It should contain the mdbreact-5.1.0.tgz
one. I tested this package and everything works as expected.
If these problems still occur - could you create a project (on GitHub i.e.) and share it with me? I can't reproduce this issue. All I did was:
- Created an app with CRA
- Copied
mdbreact-5.1.0.tgz
to the root folder - Linked this package in the
package.json
and installed it - Imported necessary scss files
- Copied some examples from the documentation and run the app
Keep coding!
yyaghi free commented 3 years ago
Hi @Krzysztof Wilk...so yeah...I followed the same steps with no luck. I may be missing an Extremely obvious thing...but I can't figure it out. Please see my test source code. I did not commit the tgz on purpose. https://github.com/yusofy/MDB-Test
Krzysztof Wilk staff answered 3 years ago
Hi!
Now I see. You are using the MDB4 package while you copied code from MDB5 documentation. They are not the same. There is no i.e. "MDBNavbarLink" component in the MDB4 package, but there is an "MDBNavLink" one.
I think there are two solutions:
- You can use examples from MDB4 React documentation. You can find it here: https://mdbootstrap.com/docs/react/navigation/navbar/
- You can install MDB5 Pro (
mdb-react-ui-kit-1.x.x.tgz
) instead ofmdbreact
and correct import -import { MDBXXXXX } from 'mdb-react-ui-kit';
:)
Keep coding!
yyaghi free commented 3 years ago
Ok. So that seems to have worked. The naming is confusing as the MDB4 file name is 5.X.X
Krzysztof Wilk staff commented 3 years ago
I'm glad I could help. If you have more questions - feel free to ask :)
Keep coding!
web_ntx premium answered 3 years ago
Version 4 and 5 are different. Try:
import {MDBXXXX} from 'mdb-react-ui-kit';
yyaghi free commented 3 years ago
Hi @web_ntx wouldn't that use the free version? I'm trying to switch from the free version that is using 'mdb-react-ui-kit' to the pro version.
Krzysztof Wilk staff commented 3 years ago
Hi!
mdb-react-ui-kit
is a package that contains a MDB5 components. I see in the specification that the problem occurs in the MDB4 one. I think the problem is with npm - it installs the old packages from the cache. You can try to remove node_modules
and package-lock.json
, then run npm cache clean --force
in your terminal and run npm install
once again.
If that won't work - could you tell which package exactly did you buy?
Keep coding!
yyaghi free commented 3 years ago
Hi @Krzysztof Wilk I've attempted that already. The problem is not with the NPM package 'mdb-react-ui-kit' that is what i'm currently using. I've downloaded the file from my subscription (Advanced Exclusive - 1 user, Annual) which included the mdbreact-5.0.1.tgz file. This is the one that doesn't work, using mdbreact or even mdb-react-ui-kit when I delete the one from NPM.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB React
- MDB Version: MDB4 5.0.1
- Device: Windows
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No