Uncaught TypeError “is not a function” in js interop callback function












1















I have created this sample project: https://github.com/mfMeds/jsdart
to reproduce my error.



The error:



main.dart.js:5036 Uncaught TypeError: J.ab(...).ge5 is not a function
at Object.J.fm (main.dart.js:5036)
at cH.dart.cH.eu (main.dart.js:4962)
at Object.eval (eval at di (main.dart.js:786), <anonymous>:3:36)
at Object.ir (main.dart.js:628)
at dart.kZ (main.dart.js:4005)
at ChartElement.<anonymous> (main.dart.js:3998)
at ChartElement.update (Chart.js:8803)
at ChartElement.handleEvent (Chart.js:9100)
at Chart.eventHandler (Chart.js:4521)
at listener (Chart.js:4455)


Only when I am using an attribute of the variable a I am getting this error. With window.console.log(a) it is logging the object without error.



My error happens here: https://github.com/mfMeds/jsdart/blob/master/lib/src/zgraph/zgraph.dart#L80



@override
ngAfterViewInit() {
List<String> myDays = new List();
List<double> myData = new List();

myDays.add('Monday');
myData.add(12.0);

var data = new LinearChartData(labels: myDays, datasets: <ChartDataSets>[
new ChartDataSets(label: 'My Label', steppedLine: true, data: myData),
]);

var aOptions = new ChartAnimationOptions();

var config = new ChartConfiguration(
type: 'bar',
data: data,
options: new ChartOptions(
responsive: true,
maintainAspectRatio: false,
legend: new ChartLegendOptions(display: false),
//scales: new ChartScales(yAxes: [new ChartYAxe(ticks: new TickOptions(max:20))]),
animation: aOptions,
tooltips: new ChartTooltipOptions(
enabled: false,
custom: allowInterop(customTooltip), // <-- binding the method here
)));

new Chart(mycanvas, config);
}

void customTooltip(dynamic a) {
window.console.log(a);
if (a.opacity == 0) { // <-- The error happens here
//tooltipEl.style.opacity = '0';
return;
}
}


When I am serving the application like that everything works:



pub global run webdev serve web:xxxx. 


Only when building the application like that I get this error:



pub global run webdev build --output=web:build









share|improve this question





























    1















    I have created this sample project: https://github.com/mfMeds/jsdart
    to reproduce my error.



    The error:



    main.dart.js:5036 Uncaught TypeError: J.ab(...).ge5 is not a function
    at Object.J.fm (main.dart.js:5036)
    at cH.dart.cH.eu (main.dart.js:4962)
    at Object.eval (eval at di (main.dart.js:786), <anonymous>:3:36)
    at Object.ir (main.dart.js:628)
    at dart.kZ (main.dart.js:4005)
    at ChartElement.<anonymous> (main.dart.js:3998)
    at ChartElement.update (Chart.js:8803)
    at ChartElement.handleEvent (Chart.js:9100)
    at Chart.eventHandler (Chart.js:4521)
    at listener (Chart.js:4455)


    Only when I am using an attribute of the variable a I am getting this error. With window.console.log(a) it is logging the object without error.



    My error happens here: https://github.com/mfMeds/jsdart/blob/master/lib/src/zgraph/zgraph.dart#L80



    @override
    ngAfterViewInit() {
    List<String> myDays = new List();
    List<double> myData = new List();

    myDays.add('Monday');
    myData.add(12.0);

    var data = new LinearChartData(labels: myDays, datasets: <ChartDataSets>[
    new ChartDataSets(label: 'My Label', steppedLine: true, data: myData),
    ]);

    var aOptions = new ChartAnimationOptions();

    var config = new ChartConfiguration(
    type: 'bar',
    data: data,
    options: new ChartOptions(
    responsive: true,
    maintainAspectRatio: false,
    legend: new ChartLegendOptions(display: false),
    //scales: new ChartScales(yAxes: [new ChartYAxe(ticks: new TickOptions(max:20))]),
    animation: aOptions,
    tooltips: new ChartTooltipOptions(
    enabled: false,
    custom: allowInterop(customTooltip), // <-- binding the method here
    )));

    new Chart(mycanvas, config);
    }

    void customTooltip(dynamic a) {
    window.console.log(a);
    if (a.opacity == 0) { // <-- The error happens here
    //tooltipEl.style.opacity = '0';
    return;
    }
    }


    When I am serving the application like that everything works:



    pub global run webdev serve web:xxxx. 


    Only when building the application like that I get this error:



    pub global run webdev build --output=web:build









    share|improve this question



























      1












      1








      1








      I have created this sample project: https://github.com/mfMeds/jsdart
      to reproduce my error.



      The error:



      main.dart.js:5036 Uncaught TypeError: J.ab(...).ge5 is not a function
      at Object.J.fm (main.dart.js:5036)
      at cH.dart.cH.eu (main.dart.js:4962)
      at Object.eval (eval at di (main.dart.js:786), <anonymous>:3:36)
      at Object.ir (main.dart.js:628)
      at dart.kZ (main.dart.js:4005)
      at ChartElement.<anonymous> (main.dart.js:3998)
      at ChartElement.update (Chart.js:8803)
      at ChartElement.handleEvent (Chart.js:9100)
      at Chart.eventHandler (Chart.js:4521)
      at listener (Chart.js:4455)


      Only when I am using an attribute of the variable a I am getting this error. With window.console.log(a) it is logging the object without error.



      My error happens here: https://github.com/mfMeds/jsdart/blob/master/lib/src/zgraph/zgraph.dart#L80



      @override
      ngAfterViewInit() {
      List<String> myDays = new List();
      List<double> myData = new List();

      myDays.add('Monday');
      myData.add(12.0);

      var data = new LinearChartData(labels: myDays, datasets: <ChartDataSets>[
      new ChartDataSets(label: 'My Label', steppedLine: true, data: myData),
      ]);

      var aOptions = new ChartAnimationOptions();

      var config = new ChartConfiguration(
      type: 'bar',
      data: data,
      options: new ChartOptions(
      responsive: true,
      maintainAspectRatio: false,
      legend: new ChartLegendOptions(display: false),
      //scales: new ChartScales(yAxes: [new ChartYAxe(ticks: new TickOptions(max:20))]),
      animation: aOptions,
      tooltips: new ChartTooltipOptions(
      enabled: false,
      custom: allowInterop(customTooltip), // <-- binding the method here
      )));

      new Chart(mycanvas, config);
      }

      void customTooltip(dynamic a) {
      window.console.log(a);
      if (a.opacity == 0) { // <-- The error happens here
      //tooltipEl.style.opacity = '0';
      return;
      }
      }


      When I am serving the application like that everything works:



      pub global run webdev serve web:xxxx. 


      Only when building the application like that I get this error:



      pub global run webdev build --output=web:build









      share|improve this question
















      I have created this sample project: https://github.com/mfMeds/jsdart
      to reproduce my error.



      The error:



      main.dart.js:5036 Uncaught TypeError: J.ab(...).ge5 is not a function
      at Object.J.fm (main.dart.js:5036)
      at cH.dart.cH.eu (main.dart.js:4962)
      at Object.eval (eval at di (main.dart.js:786), <anonymous>:3:36)
      at Object.ir (main.dart.js:628)
      at dart.kZ (main.dart.js:4005)
      at ChartElement.<anonymous> (main.dart.js:3998)
      at ChartElement.update (Chart.js:8803)
      at ChartElement.handleEvent (Chart.js:9100)
      at Chart.eventHandler (Chart.js:4521)
      at listener (Chart.js:4455)


      Only when I am using an attribute of the variable a I am getting this error. With window.console.log(a) it is logging the object without error.



      My error happens here: https://github.com/mfMeds/jsdart/blob/master/lib/src/zgraph/zgraph.dart#L80



      @override
      ngAfterViewInit() {
      List<String> myDays = new List();
      List<double> myData = new List();

      myDays.add('Monday');
      myData.add(12.0);

      var data = new LinearChartData(labels: myDays, datasets: <ChartDataSets>[
      new ChartDataSets(label: 'My Label', steppedLine: true, data: myData),
      ]);

      var aOptions = new ChartAnimationOptions();

      var config = new ChartConfiguration(
      type: 'bar',
      data: data,
      options: new ChartOptions(
      responsive: true,
      maintainAspectRatio: false,
      legend: new ChartLegendOptions(display: false),
      //scales: new ChartScales(yAxes: [new ChartYAxe(ticks: new TickOptions(max:20))]),
      animation: aOptions,
      tooltips: new ChartTooltipOptions(
      enabled: false,
      custom: allowInterop(customTooltip), // <-- binding the method here
      )));

      new Chart(mycanvas, config);
      }

      void customTooltip(dynamic a) {
      window.console.log(a);
      if (a.opacity == 0) { // <-- The error happens here
      //tooltipEl.style.opacity = '0';
      return;
      }
      }


      When I am serving the application like that everything works:



      pub global run webdev serve web:xxxx. 


      Only when building the application like that I get this error:



      pub global run webdev build --output=web:build






      dart dart-js-interop






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 21 '18 at 13:02









      rinukkusu

      15.1k34257




      15.1k34257










      asked Nov 21 '18 at 12:26









      GeroTreemanGeroTreeman

      405




      405
























          1 Answer
          1






          active

          oldest

          votes


















          1














          In the docs they write:
          The properties of the JavaScript object are accessible via the and = operators. Methods are callable via callMethod.



          I tried this also, but it does not work...



          I found a other solution. dynamic a is a js object. You can access js objects with js.getProperty I made a class for this:



          import 'package:js/js_util.dart' as js;


          class JsObject {
          final dynamic _object;

          const JsObject(this._object);

          dynamic operator(String name) => js.getProperty(_object, name);
          operator=(String name, dynamic value) => js.setProperty(_object, name, value);
          }


          Then you can access with



          // a is your js object
          var jsA = new JsObject(a);
          jsA['YOUR_PROPERTY']





          share|improve this answer























            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53412011%2funcaught-typeerror-is-not-a-function-in-js-interop-callback-function%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            1














            In the docs they write:
            The properties of the JavaScript object are accessible via the and = operators. Methods are callable via callMethod.



            I tried this also, but it does not work...



            I found a other solution. dynamic a is a js object. You can access js objects with js.getProperty I made a class for this:



            import 'package:js/js_util.dart' as js;


            class JsObject {
            final dynamic _object;

            const JsObject(this._object);

            dynamic operator(String name) => js.getProperty(_object, name);
            operator=(String name, dynamic value) => js.setProperty(_object, name, value);
            }


            Then you can access with



            // a is your js object
            var jsA = new JsObject(a);
            jsA['YOUR_PROPERTY']





            share|improve this answer




























              1














              In the docs they write:
              The properties of the JavaScript object are accessible via the and = operators. Methods are callable via callMethod.



              I tried this also, but it does not work...



              I found a other solution. dynamic a is a js object. You can access js objects with js.getProperty I made a class for this:



              import 'package:js/js_util.dart' as js;


              class JsObject {
              final dynamic _object;

              const JsObject(this._object);

              dynamic operator(String name) => js.getProperty(_object, name);
              operator=(String name, dynamic value) => js.setProperty(_object, name, value);
              }


              Then you can access with



              // a is your js object
              var jsA = new JsObject(a);
              jsA['YOUR_PROPERTY']





              share|improve this answer


























                1












                1








                1







                In the docs they write:
                The properties of the JavaScript object are accessible via the and = operators. Methods are callable via callMethod.



                I tried this also, but it does not work...



                I found a other solution. dynamic a is a js object. You can access js objects with js.getProperty I made a class for this:



                import 'package:js/js_util.dart' as js;


                class JsObject {
                final dynamic _object;

                const JsObject(this._object);

                dynamic operator(String name) => js.getProperty(_object, name);
                operator=(String name, dynamic value) => js.setProperty(_object, name, value);
                }


                Then you can access with



                // a is your js object
                var jsA = new JsObject(a);
                jsA['YOUR_PROPERTY']





                share|improve this answer













                In the docs they write:
                The properties of the JavaScript object are accessible via the and = operators. Methods are callable via callMethod.



                I tried this also, but it does not work...



                I found a other solution. dynamic a is a js object. You can access js objects with js.getProperty I made a class for this:



                import 'package:js/js_util.dart' as js;


                class JsObject {
                final dynamic _object;

                const JsObject(this._object);

                dynamic operator(String name) => js.getProperty(_object, name);
                operator=(String name, dynamic value) => js.setProperty(_object, name, value);
                }


                Then you can access with



                // a is your js object
                var jsA = new JsObject(a);
                jsA['YOUR_PROPERTY']






                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 22 '18 at 8:20









                GeroTreemanGeroTreeman

                405




                405
































                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53412011%2funcaught-typeerror-is-not-a-function-in-js-interop-callback-function%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    MongoDB - Not Authorized To Execute Command

                    in spring boot 2.1 many test slices are not allowed anymore due to multiple @BootstrapWith

                    Npm cannot find a required file even through it is in the searched directory