Attempted import error: 'MDBLightBox' is not expor


Topic: Attempted import error: 'MDBLightBox' is not exported from 'mdbreact'.

balajee asked 5 years ago

Expected behavior I recently purchase the mdbreact and when i try to use MDBLightBox it says "Attempted import error: 'MDBLightBox' is not exported from 'mdbreact'." could you please check whether its part of the bundle ./mdbreact-4.20.0.tgz


balajee answered 5 years ago

FYI: i added mdbreact from git with my token and it working fine with other component except MDBLightBox

"dependencies": { "mdbreact": "git+https://oauth2:MYTOKEN@git.mdbootstrap.com/mdb/react/re-pro.git".......


Konrad Stępień staff answered 5 years ago

Hi @balajee,

Sorry for the problems, we will fix it in this release (30 September).

If you need, for now, you can import this import Lightbox from "react-image-lightbox"; but this import has a different structure.

Best regards, Konrad.


balajee commented 5 years ago

Thanks. Since i am using Pro version, I will wait for 30th September release.


Konrad Stępień staff commented 5 years ago

f there is anything else I could do for you do not hesitate to ask me. I'll be happy to help you.   Best Regards, Konrad


balajee commented 5 years ago

i did the npm i (after removing the package lock file) and still the same issue... is the fix already available in git?


Konrad Stępień staff commented 5 years ago

Hi @balajee,

Yes, we did fix it.

Please also delete _node_modules_ folder and import import { MDBLightbox } from 'mdbreact';

something like this:

import React, { Component } from 'react';
import { MDBLightbox } from 'mdbreact';

class LightboxPage extends Component {
  state = {
    images: [
      { src: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(96).jpg', alt: 'My Image 1'},
      { src: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(93).jpg', alt: 'My Image 1'},
      { src: 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(97).jpg', alt: 'My Image 1'},
    ]
  };

  render() {
    return <MDBLightbox md='4' images={this.state.images} />;
  }
}

export default LightboxPage;

Documentation page has the bug. You need to import MDBLightbox not MDBLightBox, again sorry for the problems.

Best regards, Konrad.


balajee commented 5 years ago

i did and it doesn't work. Now i understood the reason. Its because of MDBLightbox


Konrad Stępień staff commented 5 years ago

The lightbox code has been corrected to work correctly. Hence this change.

If there is anything else I could do for you do not hesitate to ask me. I'll be happy to help you.   Best Regards, Konrad.


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: 4.20.0
  • Device: all
  • Browser: all
  • OS: all
  • Provided sample code: No
  • Provided link: No
Tags