WebAssembly Compilation Error due to dart:html Import in wakelock_web

[bivu029]

I'm encountering an issue when building my Flutter project for the web using WebAssembly (Wasm). The build fails due to the wakelock_web package, which imports dart:html. This import is not compatible with the Wasm target.

Steps to Reproduce:

Create a new Flutter project. Add the flutter_widget_from_html package to pubspec.yaml. Attempt to build the project for the web using the command: flutter build web --wasm. Expected Behavior: The project should build successfully for the web with Wasm. Actual Behavior: The build fails with the following errors: `Error: Dart library 'dart:html' is not available on this platform. import 'dart:html' as html; ^

..... .....

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'; ^ ` Flutter Doctor Output: Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel stable, 3.22.1, on Microsoft Windows [Version 10.0.19045.4412], locale en-IN) [√] Windows Version (Installed version of Windows is version 10 or higher) [√] Android toolchain - develop for Android devices (Android SDK version 34.0.0) [√] Chrome - develop for the web [X] Visual Studio - develop Windows apps X Visual Studio not installed; this is necessary to develop Windows apps. Download at https://visualstudio.microsoft.com/downloads/. Please install the "Desktop development with C++" workload, including all of its default components [!] Android Studio (not installed) [√] VS Code (version 1.89.1) [√] Connected device (3 available) [√] Network resources

! Doctor found issues in 2 categories. Additional Context: The issue appears to be due to the wakelock_web package, which is imported in flutter_widget_from_html. This package imports dart:html, which is not compatible with the Wasm compilation target.

Dart has shifted to new interop solutions for WebAssembly:

package:web replaces dart:html and other web libraries. Suggested Solution: To make the flutter_widget_from_html package compatible with Wasm, consider migrating from dart:html and package:js to the new interop solutions provided by Dart. Here are the steps:

Replace dart:html with package:web. Replace package:js with dart:js_interop or dart:js_interop_unsafe. For more information, refer to the JS interop documentation and the package migration guide.

[daohoangson]

Make sure you are using the latest version of all dependencies. Since #1250, the demo app has been deployed as wasm.

[bivu029]

Yes, I am using the latest versions of all dependencies. Here is my pubspec.yaml for reference:

`dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.6
  flex_color_scheme: ^7.3.1
  bloc: ^8.1.4
  flutter_bloc: ^8.1.5
  equatable: ^2.0.5
  font_awesome_flutter: ^10.7.0
  google_fonts: ^6.2.1
  particles_flutter: ^0.1.4
  flutter_svg_provider: ^1.0.7
  animated_text_kit: ^4.2.2
  animate_do: ^3.3.4
  device_frame: ^1.2.0
  flutter_widget_from_html: ^0.15.0
  flutter_carousel_widget: ^2.2.0`

Actual Behavior: The build fails with the following errors: actual problem is with wakelock_web-0.4.0 package

/C:/Users/Mypc/AppData/Local/Pub/Cache/hosted/pub.dev/wakelock_web-0.4.0/lib/src/import_js_library.dart:1:8: Error: Dart library 'dart:html' is notavailable on this platform.
import 'dart:html' as html;
       ^
Context: The unavailable library 'dart:html' is imported through these packages:

    web_plugin_registrant.dart => package:wakelock_web => dart:html

Detailed import paths for (some of) the these imports:

    main.dart => web_plugin_registrant.dart => package:wakelock_web/wakelock_web.dart => package:wakelock_web/src/import_js_library.dart =>
    dart:html

/C:/Users/Mypc/AppData/Local/Pub/Cache/hosted/pub.dev/wakelock_web-0.4.0/lib/src/import_js_library.dart:29:1: Error: Type 'html.ScriptElement' not 
found.
html.ScriptElement _createScriptTag(String library) {
^^^^^^^^^^^^^^^^^^
/C:/Users/Mypc/AppData/Local/Pub/Cache/hosted/pub.dev/wakelock_web-0.4.0/lib/src/import_js_library.dart:60:16: Error: Type 'html.Element' not      
found.
bool _isLoaded(html.Element head, String url) {
               ^^^^^^^^^^^^
/C:/Users/Mypc/AppData/Local/Pub/Cache/hosted/pub.dev/wakelock_web-0.4.0/lib/src/import_js_library.dart:30:23: Error: Method not found:
'ScriptElement'.
  final script = html.ScriptElement()
                      ^^^^^^^^^^^^^
/C:/Users/Mypc/AppData/Local/Pub/Cache/hosted/pub.dev/wakelock_web-0.4.0/lib/src/import_js_library.dart:42:21: Error: Method not found:
'querySelector'.
  final head = html.querySelector('head');
  ..........
                    ^^^^^^^^^^^^^

[daohoangson]

I think you are using an older version of chewie. The recent versions switch to wakelock_plus already. Take a look at this lock file https://github.com/daohoangson/flutter_widget_from_html/blob/master/demo_app/pubspec.lock

[bivu029]

You are absolutely right I checked my pubspec.lock file and found that the chewie package was indeed an older version. After deleting the chewie package, running flutter clean, and then flutter pub get, the issue is resolved. The flutter build web --wasm command is now working perfectly fine.