js-interop 0.6: getInterceptor(receiver). Returns invalid(NativeTypedData) interceptor for js object.

[DisDis]

Reproduce repo: https://github.com/DisDis/dart-slickgrid
Ubuntu 15.10 64Bit, Chrome 48.0.2564.109, Firefox 44.0.2
Dart 1.14.2, 1.15-dev2.0

The reason 'lookupAndCacheInterceptor' which causes getTagFunction for the input object. The tag name is obtained from the constructor. If the tag is the same as a reserved name, it does not return the correct Interceptor.

The example uses a function of DataView

workaround is to rename the functions DataView to DataView1
web/js/slick/slick.dataview.js
line 5: DataView: DataView1,
line 23: function DataView1(options) {

This is a very critical bug. so it is not possible to change the name of the function in external js libraries.

[bunopus]

👍
This bug may affect many developers, because if they want to use some js library and there is name collisions (between js library names and Dart objects names) they will fail. So i suggest to mark it as blocker.

[DisDis]

@jacob314 Any updates on this? This is really a critical bug :(

[mit-mit]

CC @kevmoo

[DisDis]

Error stack trace:
Uncaught TypeError: J.getInterceptor$x(...).setItems$2 is not a function J.setItems$2$x @ main.dart.js:5530dart.main_closure.call$0 @ main.dart.js:5324dart.TimerImpl_internalCallback0.call$0 @ main.dart.js:1576dart.invokeClosure_closure.call$0 @ main.dart.js:2923dart._IsolateContext.eval$1 @ main.dart.js:1227dart._callInIsolate @ main.dart.js:869dart.invokeClosure @ main.dart.js:2171(anonymous function) @ main.dart.js:2192setTimeout (async)dart.TimerImpl.TimerImpl$2 @ main.dart.js:1552dart.TimerImpl.static.TimerImpl$ @ main.dart.js:1559dart.Timer__createTimer @ main.dart.js:3668dart.Timer_Timer @ main.dart.js:3662dart.main @ main.dart.js:5311dart._IsolateContext.eval$1 @ main.dart.js:1227dart.startRootIsolate @ main.dart.js:939(anonymous function) @ main.dart.js:5962(anonymous function) @ main.dart.js:5963init.currentScript @ main.dart.js:5943(anonymous function) @ main.dart.js:5954(anonymous function) @ main.dart.js:5966

[thso]

Hey folks, @kevmoo,

This is blocking development on work that requires interop with a third party library. Is there an ETA for a fix or a possible workaround we can use?

I can provide full details internally, but the issue is the same as described here and in #26532.

[jacob314]

This is actually a dart2js dart:html interceptor binding issue not an issue with the new JS interop.
This issue will also occur if using old style JS interop or any other case where a JS class named Node that is not the DOM node is passed to Dart from JS.
Dart2js is too aggressive about thinking all classes with name Node are the Node class.
I've reassigned with to @rakudrama. He may have a better solution but I expect we can make the interceptor binding checks more robust without too significant a performance or code size hit. Essentially for DOM classes we should check whether
window.[DomClassName] is a Function and if it is we should require that the object being considered has that object as a constructor before we bind the interceptor.

[rakudrama]

There is a problem with the solution that @jacob314 suggests - only about 50% of the API has constructors on window.

@thso please send me (sra@) the repro steps.

[rakudrama]

Try adding this script ahead of any dart.js code.
If anything else is mis-recognized, you can tweak the validation.
Just be aware that this code will be called frequently on interop objects.

<script>
    // Provide a getTag hook to ensure that ensures normal JavaScript
    // objects are not confused with DOM objects.
    (dartNativeDispatchHooksTransformer =
      window.dartNativeDispatchHooksTransformer || []).push(function (hooks) {
      var getTag = hooks.getTag;
      var toString = Object.prototype.toString;
      hooks.getTag = function (obj) {
        var tag = getTag(obj);
        if (tag == null) return null;
        // Validate that is a normal object.
        if (toString.call(obj) == "[object Object]") return null;
        return tag;
      };
      return hooks;
    });
</script>

[theefer]

@rakudrama I can confirm the hack suggested above solves the problem for us. Would be nice to have a proper fix, but we're effectively unblocked! Thanks!

[rillomas]

@rakudrama I tried if your hack works in my case (#26321), but I am still getting the same error. Is my case coming from a different cause?
The code with your hack included is at the following:
https://github.com/rillomas/js_interop_issue/tree/experiment-workaround

[thso]

@rillomas Try including the <script> with the fix before

<script type="application/javascript" src="index.dart.js"></script>

[rillomas]

@thso I did. I had it wrong at first and fixed it after that at rillomas/js_interop_issue@4671061 but the error is still there.

[mit-mit]

@rakudrama any update on this?

[rillomas]

I tried my case (#26321) with the latest Dart 1.17 and it seems the error has gone away, even without @rakudrama 's hack.

[kevmoo]

@rakudrama do you consider this closed? @DisDis have you had a chance to look?

[DisDis]

@kevmoo issue still present in 1.8.0-dev0.0

[mit-mit]

@rakudrama any progress on the issues @DisDis is seeing?

[DisDis]

issue still present in 1.18.0-dev.2.0

[rakudrama]

I'm OO at the moment. I'll look at this when I get back, which is middle of next week due to the public holidays.

[whesse]

We have released 1.18.0-dev.4.0, and entered cherry-pick season, so this will be in 1.18 stable unless we delay it and fix it.

[rakudrama]

I'm still working on the issue.
I don't have a cherry-pick that is low enough risk. for 1.18

[kevmoo]

@rakudrama @jacob314 Any updates on this? Still on track for 1.19?

[mit-mit]

Updating based on email discussion: This is still being investigated, but a safe fix is not available yet. We will try to get this done in 1.19, and if not then early in 1.20.

[kevmoo]

@rakudrama updates?

[rakudrama]

CL for review: https://codereview.chromium.org/2332953002/

[rakudrama]

Fixed by: https://codereview.chromium.org/2379173002