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

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)

It seems that if I remove "nav-link" from the 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 tag within the AsidePrimary.vue

Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(