Uncaught TypeError: o.tooltip_contents.call is not a function

[insinfo]

I can't format or modify Tooltipe HTML because of this issue.

I am having this problem, I am using the c3js library to draw charts, when I am developing my AngularDart app with "webdev serve" (DDC) everything is ok, but when I compile for production with webdev build (dart2js) the application crashes with excepprion " Uncaught TypeError: o.tooltip_contents.call is not a function "

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.12/c3.min.js"></script>

c3.Data initChart() {
    var data = c3.Data();
    data.columns = [
      ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'], //datas
      ['Valor', 30, 200, 100, 400, 150, 250], //valor
      ['Custo Previsto', 130, 340, 200, 500, 250, 350], //custoPrevisto
    ];
    data.x = 'x';    
    data.xFormat = '%Y-%m-%d'; // 'xFormat' can be used as custom format of 'x'
    var config = c3.ChartConfiguration();
    config.data = data;
    config.bindto = containerChartEconomicidade;
    config.axis = c3.Axis(
        x: c3.XAxisConfiguration(show: true, type: 'timeseries', tick: c3.XTickConfiguration(format: '%Y-%m-%d')));
    config.legend = c3.LegendOptions(
        show: true, position: "right", inset: {"anchor": 'bottom-right', "x": "5", "y": "5", "step": "5"});
    var tooltipOptions = c3.TooltipOptions();

    ///***************** Where does the problem possibly occur? ************************/

    tooltipOptions.contents = (dynamic d, String defaultTitleFormat,
      String defaultValueFormat, dynamic color) {
      String text;    
      var bgcolor = '#eee';

      for (var i = 0; i < d.length; i++) {
        var name = d[i]?.name; 
        var value = d[i]?.value;
        var titleIn = d[i]?.x;
        var title = "";

        if (titleIn != null) {
          //"EEE MMM dd yyyy HH:mm:ss 'GMT-0300' '(Horário Padrão de Brasília)'"
          var format = DateFormat("EEE MMM dd yyyy HH:mm:ss");
          var parsedDate = format.parse(titleIn.toString().substring(0,24));
          var format2 = DateFormat("dd/MM/yyyy");
          title = format2.format(parsedDate);
        }
        bgcolor = color(d[i]?.id);
        value = formatCurrency.format(value);

        if (text == null) {
          text = "<table class='c3-tooltip'><tr><th colspan='2'>$title</th></tr>";
        }
        text += "<tr class='c3-tooltip-name'>";
        text += "<td class='name'><span style='background-color:$bgcolor;'></span>$name</td>";
        text += "<td class='value'>$value</td>";
        text += "</tr>";
      }
      return text + "</table>";
    };
    config.tooltip = tooltipOptions;
    chartEconomicidade = c3.generate(config);
    return data;
  }

https://pub.dev/packages/c3

name: siscec2browser
description: A web app that uses AngularDart Components

environment:
  sdk: '>=2.4.0 <3.0.0'

dependencies:
  angular: ^5.3.0
  angular_components: ^0.13.0
  angular_router: ^2.0.0-alpha+19
  http: ^0.12.0
  stream_transform: ^0.0.19
  sass_builder: ^2.1.3
  firebase: ^5.0.4
  firebase_dart_ui: ^0.1.1
  js: ^0.6.1+1
  money: ^0.2.1
  decimal: ^0.3.4
  ng_bootstrap: any
  ng_fontawesome: ^5.7.2+2
  #modern_charts: ^0.1.17
  chartjs: ^0.5.1
  c3: ^0.1.0
  essential_components: 0.1.19

[lejard-h]

The package is using js_interop, so you need to wrap your function with allowInterop from package:js => https://pub.dev/packages/js

tooltipOptions.contents = allowInterop((dynamic d, String defaultTitleFormat,
      String defaultValueFormat, dynamic color) {
   ...
});

[insinfo]

@lejard-h I wrap the function with "allowInterop" and then I started getting another error, in the following part

 var name = d[i]?.name; 
 var value = d[i]?.value;
 var titleIn = d[i]?.x;

bgcolor = color(d[i]?.id);

I could not access the properties of the native javascript object

[lejard-h]

weird I have no issue doing that :/ can you try without the operator ?

[insinfo]

@lejard-h I wrap the function with "allowInterop" and then I started getting another error, in the following part

 var name = d[i]?.name; 
 var value = d[i]?.value;
 var titleIn = d[i]?.x;

bgcolor = color(d[i]?.id);

I could not access the properties of the native javascript object .

My temporary solution was this, does anyone know a better solution. dart

@JS('getObjInstancePropertyValue')
external dynamic getObjInstancePropertyValue(jsObject,key);  

js

 function getObjInstancePropertyValue(objInstance, key) {
            try {
                return objInstance[key];
            }
            catch (err) {
                print('getObjInstancePropertyValue');
                return null;
            }
}  

 name = getObjInstancePropertyValue(selectedData[i], 'name');
  value = getObjInstancePropertyValue(selectedData[i], 'value');
  titleIn = getObjInstancePropertyValue(selectedData[i], 'x');

The strange thing is that everything works perfectly in DDC

https://github.com/dart-lang/sdk/issues/33134