I am using Bootstrap 5 and my drop downs stopped working. I checked my npm updates and didn't see anything out of the ordinary. I even emulated my setup on codesandbox.io and it works fine there, just not on my machine.
However, I do see a console error on my local machine that says:
bootstrap.esm.js?7b17:3131
Uncaught TypeError: Cannot read properties of null (reading 'hide')
at HTMLButtonElement.eval (bootstrap.esm.js?7b17:3131)
at HTMLDocument.handler (bootstrap.esm.js?7b17:387)
eval @ bootstrap.esm.js?7b17:3131
handler @ bootstrap.esm.js?7b17:387
Here's template for drop down code (took it straight out of Bootstrap 5 docs) in a VueJS template:
<template>
<section>
<div class="dropdown">
<button
class="btn btn-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton1"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</section>
</template>
<script>
import 'bootstrap/js/dist/dropdown'
export default {
}
</script>
Anyone spot any issues and reasons for the error on my machine?
Updated with package.json info:
{
"name": "XXX,
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@popperjs/core": "^2.10.1",
"animate.css": "^4.1.1",
"axios": "^0.21.4",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.6.1",
"core-js": "^3.17.2",
"jso-2": "^1.0.0",
"lodash": "^4.17.21",
"vue": "^2.6.11",
"vue-router": "^3.5.2",
"vue-select": "^3.13.0",
"vuex": "^3.6.2",
"vuex-persistedstate": "^4.0.0-beta.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}