File dependencies problem with JavaScriptComponent

Hi,
I am trying to embed two Javascript components in my application that make use of different versions of jQuery library. Although I have followed the instructions of the documentation in order to include these components in the related pages, I am experiencing the following situation. When I open the first page that includes the first component, the component is displayed as expected. No, I am opening the second page that includes the other component and the component is rendered normally. But, when I go back to the first page, the component has disappeared! In this case, I have to refresh the page in order for the component to be displayed again… So, I suppose that this behavior has to do with the separate versions of jQuery library for these components. Is there any workaround to resolve this problem? Unfortunately, the components cannot use the same version of the common jQuery file.

Thank you

Hi,

Unfortunately, there is no way to add two versions on the same library at the same time. JS dependencies are loaded on demand, i.e. when you open a screen with one of the components, a particular dependency is added.

Regards,
Gleb

Hi Gleb,
Thank you for your reply. Since there are several useful Javascript components based on different versions of jQuery library that could be embedded into CUBA apps, I was wondering if there is any kind of workaround to bypass this restriction.

Regards,
George

Hi,

Even though you include two dependencies of the same library, there is no guarantee that both components will work as you expected. The reason is that if both libraries define the same JavaScript variables/methods/etc., in the same scope, the library that appears second will/should win, i.e. override implementations of the previous library.

Gleb

Hi
you need to tackle this problem the same way you would in a normal web site/application.
For example, regarding jQuery this is a common problem, and you need to research common solutions.

Some places where you can start:
https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
https://api.jquery.com/jQuery.noConflict/

In essence, you need to use jquery in “noConflict” mode and isolate each component’s code to use their own scoped version of the library.
Again this is by no way a CUBA specific issue, it’s something you need to account for every time you use old-school JS code/components that pollute the global/window scope.

Paolo

1 Like

Thank you very much for your reply. I will check the recommended links and try to make the required modifications.

Regards,
George