Attempted import error: 'MDBCarouselInner' is not exported f

Topic: Attempted import error: 'MDBCarouselInner' is not exported from 'mdb-react-ui-kit'

Rishi Purwar free asked 2 years ago

I'm building a testimonial slider using the mdb-react-ui-kit but I'm getting this error message: Attempted import error: 'MDBCarouselInner' is not exported from 'mdb-react-ui-kit'.

Code sandbox link: https://codesandbox.io/s/intelligent-jang-1pzotz?file=/src/App.js

Anyone please help me with this issue!

Add comment

chalicham priority answered 1 year ago

0 0 Best answer

Please insert min. 20 characters.

  <MDBCarouselItem style={{ 


  backgroundSize: 'contain', // Ensure the background image contains the container
}} 
    className='rounded carousel-item-custom img-fluid'
    itemId={'Every Decision Matters'}
    src='https://opengrit.com/images/SaaSPromotional'    
    alt='...'
  >

   <MDBBtn className=" bg-success text-white bg-opacity-75" onClick={() => setIsLoginRequired(true)}> 
      <h3>Every Decision Matters</h3>

    </MDBBtn>

  </MDBCarouselItem>

this item , i.e MDBBtn , or any thing in MDBCarousel is not visible in small view which less than 768px

Mateusz Lazaru staff commented 1 year ago

It's default behavior to hide caption on mobiles, in order to change it, you would need to override styles by adding the following CSS:

.carousel-caption {
  display: block !important;
}

Add comment

Mateusz Lazaru staff answered 2 years ago

0 0 Best answer

Please insert min. 20 characters.

Please remove MDBCarouselInner import and get rid of this component from the code. There must be an error in the documentation, you shouldn't use it. We're going to fix it soon.

https://codesandbox.io/s/inspiring-mcclintock-qvk1qi?file=/src/App.js

Correct Carousel structure is like:

<MDBCarousel>
  <MDBCarouselItem/>
  <MDBCarouselItem/>
  <MDBCarouselItem/>
</MDBCarousel>

Rishi Purwar free commented 2 years ago

@mlazaru Thanks for your answer, but after removing the MDBCarouselInner import, it is not showing anything on the browser window.

https://codesandbox.io/s/intelligent-jang-1pzotz?file=/src/App.js

Mateusz Lazaru staff commented 2 years ago

Well, it looks like Carousel has some problems in this case, because MDBCarouselItem must have a src attribute, and it creates an <img/> tag automatically. It needs some changes to increase its usability.

I've prepared a working workaround. It's far from perfection, but maybe you will find something useful.https://codesandbox.io/s/new-thunder-tu9rk9?file=/src/App.js

Rishi Purwar free commented 2 years ago

Your workaround works fine for me, but it's not showing anything on the smaller screen size. Any suggestions on How I can fix this issue?

Mateusz Lazaru staff commented 2 years ago

This could probably be done with additional code and styles, but I'm afraid it would be quite complicated and unstable. I would advise waiting until we fix it.

Rishi Purwar free commented 2 years ago

Ok, thanks for your help!

Rishi Purwar free commented 1 year ago

Hello @mlazaru, Is the issue fixed now?

Grzegorz Bujański free commented 1 year ago

Not yet. We'll fix it soon

Rishi Purwar free commented 1 year ago

okay, thanks for your response.

Mohammed Thabrez free commented 1 year ago

Looks like the MDBCarouselInner Problem is still not fixed yet

Add comment

Write

Create snippet

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: Free
Premium support: No
Technology: MDB React
MDB Version: MDB5 6.0.0
Device: Macbook Air m1
Browser: Chrome
OS: MacOs
Provided sample code: Yes
Provided link: Yes

Rishi Purwar

0Support score
1Questions 0Answers 0Snippets