bootstrap.esm.js?0a67:74 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#/dashboard' is not a valid selector. | Vue Demo 7
Hello,
After upgrading bootstrap to 5.2.0-beta in the Vue Demo 7 template, I am getting an error everytime I click a aside menu link as shown below. Would anyone know why this is happening?
bootstrap.esm.js?0a67:74 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#/dashboard' is not a valid selector.
at getElementFromSelector (webpack-internal:///./node_modules/bootstrap/dist/js/bootstrap.esm.js:91:30)
at Tab._setInitialAttributesOnTargetPanel (webpack-internal:///./node_modules/bootstrap/dist/js/bootstrap.esm.js:4908:20)
at Tab._setInitialAttributesOnChild (webpack-internal:///./node_modules/bootstrap/dist/js/bootstrap.esm.js:4904:10)
at Tab._setInitialAttributes (webpack-internal:///./node_modules/bootstrap/dist/js/bootstrap.esm.js:4880:12)
at new Tab (webpack-internal:///./node_modules/bootstrap/dist/js/bootstrap.esm.js:4740:10)
at Tab.getOrCreateInstance (webpack-internal:///./node_modules/bootstrap/dist/js/bootstrap.esm.js:846:41)
at HTMLAnchorElement.eval (webpack-internal:///./node_modules/bootstrap/dist/js/bootstrap.esm.js:4994:7)
at HTMLDocument.handler (webpack-internal:///./node_modules/bootstrap/dist/js/bootstrap.esm.js:406:19)
getElementFromSelector @ bootstrap.esm.js?0a67:74
_setInitialAttributesOnTargetPanel @ bootstrap.esm.js?0a67:4891
_setInitialAttributesOnChild @ bootstrap.esm.js?0a67:4887
_setInitialAttributes @ bootstrap.esm.js?0a67:4863
Tab @ bootstrap.esm.js?0a67:4723
getOrCreateInstance @ bootstrap.esm.js?0a67:829
eval @ bootstrap.esm.js?0a67:4977
handler @ bootstrap.esm.js?0a67:389
Replies (4)
I source the issue to the file AsidePrimary.vue. In short, I have links in the
- which routes to pages such as <a href="#/dashboard"> and with the bootstrap update, it is throwing an error as it appears it looks over all the
- within the
- .
This is a bug in the template as now if you place a link in the AsidePrimary.vue menu, you will get this error.
It seems that if I remove "nav-link" from the <a> it doesn't throw the error.
Hi,
Could you please specify which version are you using?
In the latest Metronic version we are using bootstrap 5.2.0-beta1.
Please note that I too am using 5.2.0-beta1. I've updated my Metronic them to demo7/8.1.1. You can easily reproduce, simply add a href="#/dashboard" to the <a> tag within the AsidePrimary.vue
- tag.
I was only able to resolve the issue by removing the nav-link from the <a> class list.
