Webassembly support, package:js, dart:js and dart:js_util should be replaced to dart:js_interop and/or dart:js_interop_unsafe

[MarlonJD]

Description

Amplify-flutter library should support WebAssembly web build support. Now we can build with --wasm parameter on flutter build web. It's on beta on flutter channel, but it will arrive soon.

When I try to build flutter build web --wasm. It will gives these errors like this table. So if we want to support web assembly build. we should replace package:js, dart:js and dart:js_util libraries to dart:js_interop and/or dart:js_interop_unsafe.

Sources: https://dart.dev/interop/js-interop, https://dart.dev/interop/js-interop/past-js-interop, https://dart.dev/interop/js-interop/usage, https://dart.dev/interop/js-interop/js-types

I couldn't understand fully how can we achieve this, documents not crystal clear for migration. If anyone can help maybe we can do this.

Categories

• [ ] Analytics
• [ ] API (REST)
• [ ] API (GraphQL)
• [X] Auth
• [ ] Authenticator
• [ ] DataStore
• [ ] Notifications (Push)
• [ ] Storage

Steps to Reproduce

flutter build web --wasm on Flutter version 3.22.0-0.3.pre on channel beta

it gives these errors:

../../../../../.pub-cache/hosted/pub.dev/aws_common-0.6.4/lib/src/js/readable_stream.dart:10:1: Error: JS interop library 'package:js/js.dart' can't be imported when compiling to
Wasm.
Try using 'dart:js_interop' or 'dart:js_interop_unsafe' instead.
import 'package:js/js.dart';
^
../../../../../.pub-cache/hosted/pub.dev/aws_common-0.6.4/lib/src/js/readable_stream.dart:11:1: Error: JS interop library 'package:js/js_util.dart' can't be imported when compiling
to Wasm.
Try using 'dart:js_interop' or 'dart:js_interop_unsafe' instead.
import 'package:js/js_util.dart' as js_util;
^
../../../../../.pub-cache/hosted/pub.dev/aws_common-0.6.4/lib/src/js/fetch.dart:9:1: Error: JS interop library 'package:js/js.dart' can't be imported when compiling to Wasm.
Try using 'dart:js_interop' or 'dart:js_interop_unsafe' instead.
import 'package:js/js.dart';
^
../../../../../.pub-cache/hosted/pub.dev/aws_common-0.6.4/lib/src/js/fetch.dart:10:1: Error: JS interop library 'package:js/js_util.dart' can't be imported when compiling to Wasm.
Try using 'dart:js_interop' or 'dart:js_interop_unsafe' instead.
import 'package:js/js_util.dart' as js_util;
^
../../../../../.pub-cache/hosted/pub.dev/amplify_auth_cognito_dart-0.10.13/lib/src/asf/asf_device_info_collector.js.dart:15:1: Error: JS interop library 'package:js/js.dart' can't be
imported when compiling to Wasm.
Try using 'dart:js_interop' or 'dart:js_interop_unsafe' instead.
import 'package:js/js.dart';
^
../../../../../.pub-cache/hosted/pub.dev/aws_common-0.6.4/lib/src/js/promise.dart:6:1: Error: JS interop library 'package:js/js.dart' can't be imported when compiling to Wasm.
Try using 'dart:js_interop' or 'dart:js_interop_unsafe' instead.
import 'package:js/js.dart';
^
../../../../../.pub-cache/hosted/pub.dev/aws_common-0.6.4/lib/src/js/promise.dart:7:1: Error: JS interop library 'package:js/js_util.dart' can't be imported when compiling to Wasm.
Try using 'dart:js_interop' or 'dart:js_interop_unsafe' instead.
import 'package:js/js_util.dart' as js_util;
^
../../../../../.pub-cache/hosted/pub.dev/worker_bee-0.2.4/lib/src/worker_bee_js.dart:4:1: Error: JS interop library 'package:js/js.dart' can't be imported when compiling to Wasm.
Try using 'dart:js_interop' or 'dart:js_interop_unsafe' instead.
export 'package:js/js.dart';
^
../../../../../.pub-cache/hosted/pub.dev/aws_common-0.6.4/lib/src/js/abort.dart:6:1: Error: JS interop library 'package:js/js.dart' can't be imported when compiling to Wasm.
Try using 'dart:js_interop' or 'dart:js_interop_unsafe' instead.
import 'package:js/js.dart';
^
../../../../../.pub-cache/hosted/pub.dev/aws_common-0.6.4/lib/src/js/abort.dart:7:1: Error: JS interop library 'package:js/js_util.dart' can't be imported when compiling to Wasm.
Try using 'dart:js_interop' or 'dart:js_interop_unsafe' instead.
import 'package:js/js_util.dart' as js_util;
^
../../../../../.pub-cache/hosted/pub.dev/aws_common-0.6.4/lib/src/js/common.dart:7:1: Error: JS interop library 'dart:js_util' can't be imported when compiling to Wasm.
Try using 'dart:js_interop' or 'dart:js_interop_unsafe' instead.
import 'dart:js_util' as js_util;
../../../../../.pub-cache/hosted/pub.dev/aws_common-0.6.4/lib/src/js/common.dart:10:1: Error: JS interop library 'package:js/js.dart' can't be imported when compiling to Wasm.
Try using 'dart:js_interop' or 'dart:js_interop_unsafe' instead.
import 'package:js/js.dart';

Screenshots

No response

Platforms

• [ ] iOS
• [ ] Android
• [X] Web
• [ ] macOS
• [ ] Windows
• [ ] Linux

Flutter Version

3.22.0-0.3.pre

Amplify Flutter Version

1.8.0

Deployment Method

Amplify CLI

Schema

No response

[Jordan-Nelson]

Hello @MarlonJD - Thanks for taking the time to open the issue and the PR. We will take a look at this and let you know when we have updates.

[priyanshu-sekhar]

Are there any updates on this ? This is going to be a huge blocker for applications looking for wasm compilation now that Flutter's stable channel officially supports it.

[Jordan-Nelson]

@priyanshu-sekhar At this moment I do not have an update. Some of the packages are straight forward to add Wasm support to, while others will take a bit of time. I don't have a timeline on when Wasm will be supported at the moment.

For the time being, if you would like to see Wasm support in amplify flutter please feel free to 👍 the original issue.