[js_interop]: "Uncaught TypeError: J.d5(...).Y is not a function" when importing "dart:js_util" library together

[jumperchen]

Dart version: 2.9.3~2.10.2

When using @JS() js_interop with a Dart class like Win in js_interop.dart and importing the library dart:js_util in main.dart together, all the methods defined inside Win will be lost in Dart2JS compiler.

For example,

main.dart

import 'dart:js_util';
import 'js_interop.dart';

main () {
   
    /// The following code only works separately
    window.eval('console.log("test")');
    callMethod(window, 'eval', ['console.log("test2")']);
}

As you can see, if we comment out either line in the main function, it works well with Dart2JS compiler.

js_interop.dart

@JS()
library dart.issue.js;

import 'package:js/js.dart';

@JS()
@anonymous
abstract class Win {
  external eval(String script);
}

@JS()
external Win get window

Here is a whole test project to demonstrate this issue - https://github.com/jumperchen/dart_interop_bug

[sigmundch]

Thanks for filing the bug!

Currently there is a limitation that makes native types exposed via dart:html not available to be exposed via JS-interop.

In your case, you are not importing dart:html directly, so it is surprising to see this problem, however there is an indirect dependency from package:js to dart:js to dart:html. The js_util methods make dart2js keep alive that dependency that would otherwise be tree-shaken. We are tracking this dependency problem in #42736.

Removing that dependency will fix your example (in fact we have a second implementation of dart:js to support node.js when running dart2js --server-mode and I can verify that your application works there with both lines uncommented). However, I wonder whether that would be enough in your case. Do you intend to only access the browser APIs via js-interop, or do expect to combine your code with other libraries that use dart:html? If other code in the same app can access dart:html, you'll hit the limitation again through a different dependency.

In terms of the limitation of combining native and js-interop types: we plan to add checks to detect when this happens to help inform you at compile-time (see #32929 (comment)).

@srujzs is also adding documentation describing this problem and what workarounds are available for some scenarios (cl, doc). There are also additional details on #39753.

I'm marking this issue closed since our next steps are captured by #42736 and #32929 (comment).

[jumperchen]

@sigmundch Thanks for the explanation, we did use dart:html in our application as well, so we could hit this limitation again, however, we found a workaround to avoid this issue for now.