[Flutter] Flutter: 'dart:js_interop' package works on localhost but not server

I recently switched to using import 'dart:js_interop'; as recommended by the Dart style guide. While the JS interop methods work perfectly when running my Flutter application locally, I encounter an issue after deploying the Flutter web code to my server. The functions that were accessible on localhost are no longer available once the app is live.

What could be causing this issue?

Code example:

import 'dart:js_interop';

import 'package:.../controllers/content_controller.dart';
import 'packagerovider/provider.dart';
import 'package:.../core.dart';

@JS()
external set jsToDartInteropService(JSAny? value);

@JSExport()
class JsToDartInteropService {
Future<void> updateContent() async {
await Provider.of<ContentController>(
navigatorKey.currentContext!,
listen: false,
).updateContent();
}
}


In order to call this from the Chrome console I just call: jsToDartInteropService.updateContent()

This only works in my localhost instance and not my actual deployed instance.

Continue reading...