Issue loading jQuery after browser refreshes and other re-open action son the browser

Support
#1

Hi,

For some time now we have an annoying issue with some custom Javascript components that only occurs after some time/events. The issue is that the Javascript components stop working and an error is found in the browser console:

Uncaught ReferenceError: jQuery is not defined
    at /VAADIN/webjars/jquery-ui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js:11

Everything works fine initially but after opening some additional browser tabs, logging out, logging in, doing a browser refresh (this triggers it most of the times), etc. suddenly the error above appears when using the Javascript components. Once this issue occurs, the application might become unusable and only by clearing the browser cache and reopening the browser the issue (temporarily) disappears.

Further analysis shows that initially everything is loaded fine:
image

Later on, when the error appears, the scripts are indeed missing:
image

We expect it to be in the order in which the scripts are loaded but we have no idea how to enforce the correct order.

The components that are dependent on jQuery do have these dependencies set (as needed):

@WebJarResource({"jquery:jquery.min.js", 
                 "jquery-ui:jquery-ui.min.js", 
                 "jquery-ui:jquery-ui.css",
                 "jquery-ui-touch-punch:jquery.ui.touch-punch.min.js"})

And in the build.gradle, we have the jQuery dependencies set for the web module as well:

        compile('org.webjars:jquery:3.6.0')
        compile('org.webjars:jquery-ui:1.12.1')
        compile('org.webjars:jquery-ui-touch-punch:0.2.3')

Previously, it seemed necessary to set this web-app property, but that seems obsolete (and having it set or not doesn’t do anything):

cuba.web.webjars.jqueryPath = jquery/3.6.0/jquery.min.js

Other information that might be helpful; we have seen this issue on various Cuba platform versions (as of 7.x). We are currently on latest 7.1 in production and latest 7.2 in test. As said, both versions experience this problem.

What are we missing or are we doing wrong?

Any help appreciated.

Regards,
-b

#7

Thank you for reporting the problem, I’ve created a GitHub issue.

As a workaround, you can create a custom BootstrapListener and add dependencies through it, e.g.:

public class CustomBootstrapListener extends CubaBootstrapListener {

    @Override
    public void modifyBootstrapPage(BootstrapPageResponse response) {
        super.modifyBootstrapPage(response);

        Element head = response.getDocument().getElementsByTag("head").get(0);

        includeScript(getWebJarResource("jquery", "jquery.min.js"), response, head);
        includeScript(getWebJarResource("jquery-ui", "jquery-ui.min.js"), response, head);
    }
}

And register it in the web-spring.xml:

<bean id="cuba_BootstrapListener" class="com.company.demo.web.CustomBootstrapListener"/>

Gleb

1 Like
#8

Hi @gorelov,

Thank you! This seems to work very well. We already had a customised bootstrap listener so we only needed to add two lines and everything worked like a charm. We will set this through and hope that this issue has been resolved finally.

Regards,
-b