Issue building project with JavaScript APIs

Issue

Whenever I serve my project with the --release options or I build it, and run it on the webpage, I’m getting this errors console, and some features won’t work, using the dartdevc compiler all the functions works fine.

For example this happens when I click a button:

jquery-3.3.1.slim.min.js:2 Uncaught TypeError: ((w.event.special[a.origType] || {}).handle || a.handler).apply is not a function
    at HTMLDivElement.dispatch (jquery-3.3.1.slim.min.js:2)
    at HTMLDivElement.v.handle (jquery-3.3.1.slim.min.js:2)
    at Object.trigger (jquery-3.3.1.slim.min.js:2)
    at HTMLDivElement.<anonymous> (jquery-3.3.1.slim.min.js:2)
    at Function.each (jquery-3.3.1.slim.min.js:2)
    at w.fn.init.each (jquery-3.3.1.slim.min.js:2)
    at w.fn.init.trigger (jquery-3.3.1.slim.min.js:2)
    at r.t.show (modal.js:117)
    at HTMLDivElement.<anonymous> (modal.js:515)
    at Function.each (jquery-3.3.1.slim.min.js:2)
dispatch @ jquery-3.3.1.slim.min.js:2
v.handle @ jquery-3.3.1.slim.min.js:2
trigger @ jquery-3.3.1.slim.min.js:2
(anonymous) @ jquery-3.3.1.slim.min.js:2
each @ jquery-3.3.1.slim.min.js:2
each @ jquery-3.3.1.slim.min.js:2
trigger @ jquery-3.3.1.slim.min.js:2
t.show @ modal.js:117
(anonymous) @ modal.js:515
each @ jquery-3.3.1.slim.min.js:2
each @ jquery-3.3.1.slim.min.js:2
r._jQueryInterface @ modal.js:498
cr @ index.dart.js:316
J.h4 @ index.dart.js:6202
dart.nN @ index.dart.js:6096
$1 @ index.dart.js:4961
m6 @ index.dart.js:980
(anonymous) @ index.dart.js:989

These are my js APIs called from Dart:

@JS()
library js_helper;

import 'package:js/js.dart';

@anonymous
@JS()
class SnackbarParams {
  external factory SnackbarParams({String text, String pos, String backgroundColor});

  external String get text;
  external String get pos;
  external String get backgroundColor;

}

@JS('Snackbar')
class Snackbar{
  external static void show(SnackbarParams obj);
}

@JS('\$')
external dynamic jQuery(query);

@JS()
@anonymous
class ModalElement {

  external dynamic modal(String call);
  external dynamic on(String event, Function callback);

}

@JS()
@anonymous
class jFormElement {
  external dynamic serialize();
}

And this should be the code that is creating this error:

(jQuery('#loginModal') as ModalElement).modal('show');

Solution

At the end, the issue was in the on method, I needed to add allowInterop to the Function

Answered By – Mattia

Answer Checked By – Gilberto Lyons (FlutterFixes Admin)

Leave a Reply

Your email address will not be published.