is it possible to lazily use JS libs with Dart?

Issue

I am using chartjs (with the dart interface https://pub.dartlang.org/packages/chartjs) and trying to make it deferred by injecting a <script src="chartjs.js"></script> into the head section and awaiting it’s load event to then use the lib.
I am getting this exception: Cannot read property ‘Chart’ of undefined.

It does not happen when the script is within the head of the html before dart.

So, is it possible to load a JS lib after Dart loaded?

Solution

found a better way!

lets remove the define variable after dart loads, then any third-party lib works when added async 😀

add this to your main():

import 'dart:js';

void main() {
  context.callMethod('fixRequireJs');
}

and in your index.html:

    <script type="text/javascript">
      window.fixRequireJs = function()
      {
        console.log('define is ', typeof define);
        if (typeof define == 'function') {
          console.log('removing define...');
          delete define;
          window.define = null;
        }
      }
    </script>

Answered By – Jonathan

Answer Checked By – Cary Denson (FlutterFixes Admin)