Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

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


G
Guest 3 years ago
Bootstrap 5 Vue
4 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)

G
Guest 3 years ago

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.

user
Lauris Stepanovs Author 3 years ago

Hi,

Could you please specify which version are you using?

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


G
Guest 3 years ago

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


G
Guest 3 years ago

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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(