js-interop: Breaking issue with all JS classes named 'Node'

[theefer]

We have come across a gnarly issue in the Dart interop with JavaScript. In short, it doesn't seem possible to wrap any JS class named Node, even if it has been declared with an @JS() interface and isolated in a dedicated namespace, due to a conflict with dart:html's Node.

Recipe to reproduce

We have been able to reproduce the issue with a reduced example:

• JavaScript "library"
• Dart wrapper definition

After loading both the above, we can run the following code:

final a = getFooBar();
print(a.test1());
// prints 'FooBar.test1'

final b = getNode();
print(b.test2());
// throws "NoSuchMethodError: method not found: 'test2$0' (J.getInterceptor$x(...).test2$0 is not a function)"

Details

The error is manifesting for us when trying to use ProseMirror from Dart, specifically uses of its Node class (I can provide an internal code reference if you ping me at sebcevey@). Note that all other wrapped classes (e.g. Schema, ProseMirror, etc) behave as expected; only Node is failing.

When running off the Dart code in Dartium, the code executes but we get the following warning on the console:

Return value for method: node is Node which is inconsistent with all typed JS interop definitions for method node.

When running off a compiled JS bundle, the code fails with the following error:

NoSuchMethodError: method not found: 'get$content' (J.getInterceptor$x(...).get$content is not a function)

We have been able to track down the issue to the interceptor resolution logic, which incorrectly identifies ProseMirror's Node class with the dart:html Node class. This is because the interceptor lookups fall back to the typeNameInChrome function which returns the fn.constructor.name string (in this case 'Node'), which then gets matched up with Dart's interface for dart:html Node. We can see that erroneous interceptor on the record patched onto the ProseMirror Node prototype.

In contrast, other wrapped classes which do work as expected don't match any known names and receive UnknownJavaScriptObject_methods as interceptor. Note that we weren't sure whether this is the expected code path?

Can you please advise whether this is a known issue, and if there is any workaround we can use?

[DisDis]

duplicate #25785

[kevmoo]

@jacob314 can you confirm this is a dupe of #25785 ?

[DisDis]

@kevmoo identical stack trace:
main.dart.js:5530 Uncaught TypeError: J.getInterceptor$x(...).setItems$2 is not a function

[theefer]

If the tag is the same as a reserved name, it does not return the correct Interceptor.

I do think it is a dupe of #25785. Feel free to close this issue if you'd rather only keep one canonical bug open, I will track that one instead.

It's a really problematic issue because no workaround has been put forward. The only hack I can think of is to either fork the original JavaScript codebase, or to monkey patch and rename every reference to the offending symbol before it is loaded.

In the case of ProseMirror, because it has its own model of the DOM as classes of similar names, I think I would have to hack the name of a number of different classes (Node, Text, etc).