[Feature Request] Webassembly (Wasm) support in Amplify Flutter

[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)
• 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
• 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.

[mateusz-pietras]

Hello, I noticed there hasn't been much movement on this issue over the past year. Are there currently any plans to add support for Wasm, or is it on the roadmap?

[tyllark]

Hello @mateusz-pietras sorry for the delayed response. While we do not have a set release date, I've been working to migrate to the new JS interop libraries web and js_interop in pull requests #6137 and #6140. I still have some more testing, update build_web_compilers options to support multiple web compilers.

Once that is complete Ill reach out here for additional verification before releasing!

[MarlonJD]

Hey @tyllark I'm closing this PR if it's already migrating on the other PRs. Thanks for the information