Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

TypeError: Cannot read properties of undefined (reading "keyboard") - Carousel Component Bootstrap v5.3.3 #41085

Closed
3 tasks done
jawadmalikdev opened this issue Dec 9, 2024 · 3 comments
Closed
3 tasks done

TypeError: Cannot read properties of undefined (reading "keyboard") - Carousel Component Bootstrap v5.3.3 #41085

jawadmalikdev opened this issue Dec 9, 2024 · 3 comments
Labels
js v5

Comments

@jawadmalikdev
Copy link

jawadmalikdev commented Dec 9, 2024 •
edited by julien-deramond
Loading

Prerequisites

Describe the issue

I am using Vite to bundle the Bootstrap Carousel JavaScript, but it is causing an error in the browser console.

I verified that this issue is not specific to Vite, as it also occurs with the final JavaScript build bundled using Webpack.

To help reproduce the issue, I’ve provided a StackBlitz link with only the Carousel component. Please check the browser console after the page finishes loading to see the reported error:

Uncaught TypeError: can"t access property "keyboard", this._config is undefined
    _addEventListeners bootstrap_js_dist_carousel__js.js:992
    Carousel bootstrap_js_dist_carousel__js.js:916

Reduced test cases

I have replicated the issue here : https://stackblitz.com/edit/vitejs-vite-fvpaeypo?file=index.html

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v5.3.3
@kyletsang
Copy link
Contributor

In your example, you are trying to instantiate the carousel with with an element of id myCarousel, but in your DOM, it"s actually carouselExampleIndicators. If you fix your selector in the JS, this error will go away.

@julien-deramond
Copy link
Member

Thanks @kyletsang for pointing that out! You"re absolutely correct—the issue is with the mismatched ID between the JavaScript selector and the DOM. I appreciate your help in identifying this. I"ll go ahead and close the issue now.

@julien-deramond julien-deramond closed this as not planned Won't fix, can't repro, duplicate, stale Jan 1, 2025
@jawadmalikdev
Copy link
Author

jawadmalikdev commented Jan 1, 2025 •
edited
Loading

My bad! The issue is resolved after switching to the correct ID. Thanks for checking it out @kyletsang

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
js v5
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@kyletsang @julien-deramond @jawadmalikdev