Execute Js error

Flow
1

Hi,
i am trying to execute a jquery function, but i get the following error:

Uncaught ReferenceError: $ is not defined
at Object.eval (eval at cu (client-5C40CA4B9D1F93A241DF9189632E0919.cache.js:1017), <anonymous>:3:1)
at cu (client-5C40CA4B9D1F93A241DF9189632E0919.cache.js:1017)
at bu (client-5C40CA4B9D1F93A241DF9189632E0919.cache.js:973)
at _t (client-5C40CA4B9D1F93A241DF9189632E0919.cache.js:583)
at Hr (client-5C40CA4B9D1F93A241DF9189632E0919.cache.js:497)
at ds.es [as db]

(client-5C40CA4B9D1F93A241DF9189632E0919.cache.js:1027)
at AB (client-5C40CA4B9D1F93A241DF9189632E0919.cache.js:942)
at Jr (client-5C40CA4B9D1F93A241DF9189632E0919.cache.js:1022)
at Zr.$r [as F]
(client-5C40CA4B9D1F93A241DF9189632E0919.cache.js:1027)
at qk (client-5C40CA4B9D1F93A241DF9189632E0919.cache.js:428)
at Br (client-5C40CA4B9D1F93A241DF9189632E0919.cache.js:1023)
at Cr (client-5C40CA4B9D1F93A241DF9189632E0919.cache.js:1003)
at bj (client-5C40CA4B9D1F93A241DF9189632E0919.cache.js:700)
at Yo (client-5C40CA4B9D1F93A241DF9189632E0919.cache.js:769)
at _o (client-5C40CA4B9D1F93A241DF9189632E0919.cache.js:642)
at dp.ep [as F]
(client-5C40CA4B9D1F93A241DF9189632E0919.cache.js:1027)
at Ob (client-5C40CA4B9D1F93A241DF9189632E0919.cache.js:972)
at Hb (client-5C40CA4B9D1F93A241DF9189632E0919.cache.js:682)
at Rb.Sb [as D]
(client-5C40CA4B9D1F93A241DF9189632E0919.cache.js:1027)
at Mb (client-5C40CA4B9D1F93A241DF9189632E0919.cache.js:208)
at sb (client-5C40CA4B9D1F93A241DF9189632E0919.cache.js:436)
at vb (client-5C40CA4B9D1F93A241DF9189632E0919.cache.js:888)
at client-5C40CA4B9D1F93A241DF9189632E0919.cache.js:623
at d (client-5C40CA4B9D1F93A241DF9189632E0919.cache.js:704)

This is the line of code that execute the function:
UI.getCurrent().getPage().executeJs(“$('[data-toggle="popover"]
').popover();”);
Jquery is loaded in the page (launching the same function from the browser console I have no errors)

2

You might want to look at https://vaadin.com/learn/tutorials/integrate-jquery-into-vaadin-flow

3

Thanks for the reply.
I followed the guide and now jquery loads globally. By re-defining jquery globally then other libraries such as bootstrap no longer work. I use the bootstrap bundle which also contains jquery can this be the problem?

4

It depends on how you are loading bootstrap and jquery but some bootstrap components needs jquery.
And you need to define jquery before the bootstrap javascript.

How are you importing jquery and bootstrap?