JS issue when updating from 3.3-gwt to 4.2-gwt

AHijner commented 1 year ago

Hi,

I'm trying to update Charba from 3.3-gwt to 4.2-gwt, but am getting an error when trying to run the application. This is the exception I'm getting: TypeError: Set is not a constructor It seems to be coming from a chart.js file, see call stack:

The relevant code:


import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import org.pepstock.charba.client.Charba;
import org.pepstock.charba.client.annotation.AnnotationPlugin;
import org.pepstock.charba.client.datalabels.DataLabelsPlugin;
import org.pepstock.charba.client.labels.LabelsPlugin;

public class Main implements EntryPoint {
    @SuppressWarnings("null")
    static MyInjector injector = GWT.create(MyInjector.class);

    @Override
    public void onModuleLoad() {

        ...

        Charba.enable();

        AnnotationPlugin.enable();
        DataLabelsPlugin.enable();
        LabelsPlugin.enable();

        ...
    }
    ...
}

Specifically: something seems to be going wrong in the charba\client\Injector.java method: ensureInjected(AbstractInjectableResource resource, BaseHtmlElement container) at this line: DOM.getDocument().getHead().appendChild(container); The error occurs for all three different plugins. I've also tried updating first to 4.0 or 4.1 but the same issue occurs then as well.

Possibly relevant: We're running Java 11, gwt 2.9.0 and smartgwt 6.1.

So my question: what am I doing wrong? Am I missing some setting or import?

stockiNail commented 1 year ago

@AHijner interesting case because it never happened. Could you share the HTML project page to check if there is something that we haven't expected? Maybe also the browser and version of it you are using. Thank you!

AHijner commented 1 year ago

I'm using chrome version: 89.0.4389.114 (64-bits) The HTML question is more difficult to answer. For this project we're using smartgwt, and so we don't really have our own html files for it. Probably the most relevant part of the code for your question is our index.jsp:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><%@ page session="false" %><%
    response.setContentType("text/html; charset=utf-8");
    String version = getServletContext().getInitParameter("version");
%><!DOCTYPE HTML>
<html lang="nl">
    <head>
        <!-- From https://github.com/stefanpenner/es6-promise (MIT) -->
        <script src="/static/js/promise/polyfill.min.js"></script>
        <!-- From https://github.com/rtsao/browser-unhandled-rejection/ (MIT) -->
        <script src="/static/js/promise/unhandledrejectionpolyfill.js"></script>
    </head>

    <body>
        <div id="loading">
            <div id="message">0%</div>
        </div>
        <iframe id="__gwt_historyFrame" style="width: 0; height: 0; border: 0"></iframe>

        <script type="text/javascript">
var version='<%= version %>';
var isomorphicRealDir = "/static/v/"+version+"/sc/";
var isomorphicDir = isomorphicRealDir;

<!-- SmartGWT imports -->
document.getElementById('message').innerHTML = '10%';
document.write("<script src='"+isomorphicDir+"modules/ISC_Core.js'></scr"+"ipt>");

document.getElementById('message').innerHTML = '20%';
document.write("<script src='"+isomorphicDir+"modules/ISC_Foundation.js'></scr"+"ipt>");

document.getElementById('message').innerHTML = '30%';
document.write("<script src='"+isomorphicDir+"modules/ISC_Containers.js'></scr"+"ipt>");

document.getElementById('message').innerHTML = '40%';
document.write("<script src='"+isomorphicDir+"modules/ISC_Grids.js'></scr"+"ipt>");

document.getElementById('message').innerHTML = '50%';
document.write("<script src='"+isomorphicDir+"modules/ISC_Forms.js'></scr"+"ipt>");

document.getElementById('message').innerHTML = '60%';
document.write("<script src='"+isomorphicDir+"modules/ISC_RichTextEditor.js'></scr"+"ipt>");

document.getElementById('message').innerHTML = '70%';
document.write("<script src='"+isomorphicDir+"modules/ISC_Calendar.js'></scr"+"ipt>");

document.getElementById('message').innerHTML = '75%';
document.write("<script src='"+isomorphicDir+"modules/ISC_DataBinding.js'></scr"+"ipt>");

document.getElementById('message').innerHTML = '80%';
document.write("<script src='"+isomorphicDir+"modules/ISC_Drawing.js'></scr"+"ipt>");

document.getElementById('message').innerHTML = '85%';

document.write("<script src='"+isomorphicDir+"skins/load_skin.js'></scr"+"ipt>");
        </script>
    </body>
</html>

I forgot to mention before: We have another project using only gwt (not smartgwt) and our own file.ui.xml type things, here the update to 4.2-gwt went fine.

stockiNail commented 1 year ago

I forgot to mention before: We have another project using only gwt (not smartgwt) and our own file.ui.xml type things, here the update to 4.2-gwt went fine.

It seems an incompatibility with SmartGWT. I never used SmartGWT but it's anyway weird, at least the issue on annotation plugin injection. Instead it seems the chart.js, luxon and time adapter seems to be injected. Let me have a look.

stockiNail commented 1 year ago

@AHijner I'm goign to reproduce the issue locally but needs time to get SmartGWT and SmartClient.

Anyway, I see the following in SmartGWT forum:

https://forums.smartclient.com/forum/smart-gwt-technical-q-a/257643-uncaught-typeerror-set-is-not-a-constructor

Uncaught TypeError: Set is not a constructor
26 Apr 2019, 07:11
I am getting a conflict between SmartClient and a third party javascript library.
....

The answer is:

See docs - use “portal mode” and no globals will be overwritten by SmartClient.

stockiNail commented 1 year ago

@AHijner I have found some info: https://smartclient.com/smartgwt-latest/javadoc/index.html?com/smartgwt/client/docs/SimpleNamesMode.html

This is how to disabled the overriding of global variables seems to be:

Portal mode is enabled by setting window.isc_useSimpleNames = false before Smart GWT is loaded, generally inside the <head> element.

I don't have a SmartGWT env ready yet (I'm doing) but maybe you can test it and see if it works.

AHijner commented 1 year ago

@stockiNail Amazing, it worked! I will have to check if portal mode has any other efffects on our code, but charba is working smoothly again. Thank you so much for your quick replies!

stockiNail commented 1 year ago

Good to hear it! This issue is a good point for who is using SmartGWT as well! Therefore really thank you.

stockiNail commented 1 year ago

@AHijner just for my curiosity. Any reason do not use Charba 5.x? Having a look to your env, it should work as well. In Charba 5, you could use last versions CHART.JS 3 (with Charba 5.5 you can have Chart.JS 3.9.1, last version 3) where some bugs are solved.

stockiNail commented 1 year ago

@AHijner FYI, in version 3.3 worked because CHARBA 3.3 is the last version where CHART,JS 2 was used and where it didn't use Set or other JS classes (in fact was compatible for IE11 as well). But from CHARBA 4, the embedded CHART.js is version 3 which dropped IE11 support going to JS classes like Set, Map and so on.

AHijner commented 1 year ago

@stockiNail We are certainly hoping to start using Charba 5.x! We were/are some charba versions behind and thought the best course of action was to update incrementally, so the code changes we have to make are not as overwhelming (and easier to lookup in the release-notes) as when trying to go from 2.x to 5.x at once.

stockiNail commented 1 year ago

Yeah! Agree! Take your time. Let us know if you will find some issues or difficulties, maybe we can help even if we are not using SmartGWT. Be anyway aware that CHART.JS community drop the support to CHART.JS 3 because version4 is available. We planned to go to version 4 of CHART.JS in next major https://github.com/pepstock-org/Charba/issues/82 (due to breaking changes that version 4 has introduced) and also because the ecosystem of CHART.JS is not completely already ready for version 4 (see some plugins which Charba is providing ootb).

pepstock-org / Charba

JS issue when updating from 3.3-gwt to 4.2-gwt #83