const myModal = document.getElementById('myModal') doesn't work

[wei886-tw]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

I'm using Vue3 "^3.4.21" and "bootstrap": "^5.3.3", and I'm using const myModal = document.getElementById('myModal') on mounted, but chrome devtool shows [Vue warn]: Unhandled error during execution of native event handler

Reduced test cases

I used

const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})

but doesn't work

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

---

Note: edited by maintainer for correct Markdown syntax

[github-actions]

Hello @wei886-tw. Bug reports must include a live demo of the issue. Per our contributing guidelines, please create a reduced test case on CodePen or StackBlitz and report back with your link, Bootstrap version, and specific browser and Operating System details.

[Hichem-elAbassi]

Can you try catch it just to see ?

[wei886-tw]

I useimport Modal from 'bootstrap/js/dist/modal'; solve the bug