MDBreact All imports are failing - Attempted import error: i


Topic: MDBreact All imports are failing - Attempted import error: is not exported from 'mdbreact'.

yyaghi 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

  1. Deleted node_modules folder
  2. Copied mdbreact-5.0.1.tgz into root folder
  3. 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:

  1. Created an app with CRA
  2. Copied mdbreact-5.1.0.tgz to the root folder
  3. Linked this package in the package.json and installed it
  4. Imported necessary scss files
  5. Copied some examples from the documentation and run the app

Keep coding!


yyaghi 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


web_ntx premium answered 3 years ago

Version 4 and 5 are different. Try:

import {MDBXXXX} from 'mdb-react-ui-kit';

yyaghi 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 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.


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:

  1. You can use examples from MDB4 React documentation. You can find it here: https://mdbootstrap.com/docs/react/navigation/navbar/
  2. You can install MDB5 Pro (mdb-react-ui-kit-1.x.x.tgz) instead of mdbreact and correct import - import { MDBXXXXX } from 'mdb-react-ui-kit'; :)

Keep coding!


yyaghi 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!


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
  • User: 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