Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

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)


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.


Hi,

Could you please specify which version are you using?

In the latest Metronic version we are using bootstrap 5.2.0-beta1.



It seems that if I remove "nav-link" from the <a> it doesn't throw the error.



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.

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  :(
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  :(