Cannot build to WASM with flutter_quill

[shechren]

Is there an existing issue for this?

• I have searched the existing issues

The question

https://docs.flutter.dev/platform-integration/web/wasm

I found a problem when i was built to Web in WASM.
So i check the flutter pub deps and found the reason. that flutter_keyboard_visibility_web wasn't updated (dart:html to web) and I think it's uncertainly to will be done.
However please tell me how can I dodge this problem within use the flutter_quill till flutter_keyboard_Visibility_web's update.

log is as follows:

Target dart2wasm failed: ProcessException: Process exited abnormally with exit code 64:
*NOTE*: Compilation to WasmGC is experimental.
The support may change, or be removed, with no advance notice.


../../AppData/Local/Pub/Cache/hosted/pub.dev/flutter_keyboard_visibility_web-2.0.0/lib/flutter_keyboard_visibility_web.dart:1:8: Error: Dart library 'dart:html' is not available on
this platform.
import 'dart:html' as html show window, Navigator;
       ^
Context: The unavailable library 'dart:html' is imported through these packages:

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

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

    main.dart => web_plugin_registrant.dart => package:flutter_keyboard_visibility_web/flutter_keyboard_visibility_web.dart => dart:html

../../AppData/Local/Pub/Cache/hosted/pub.dev/flutter_keyboard_visibility_web-2.0.0/lib/flutter_keyboard_visibility_web.dart:10:35: Error: Type 'html.Navigator' not found.
  FlutterKeyboardVisibilityPlugin(html.Navigator navigator);
                                  ^^^^^^^^^^^^^^
../../AppData/Local/Pub/Cache/hosted/pub.dev/flutter_keyboard_visibility_web-2.0.0/lib/flutter_keyboard_visibility_web.dart:10:40: Error: 'Navigator' isn't a type.
  FlutterKeyboardVisibilityPlugin(html.Navigator navigator);
                                       ^^^^^^^^^
../../AppData/Local/Pub/Cache/hosted/pub.dev/flutter_keyboard_visibility_web-2.0.0/lib/flutter_keyboard_visibility_web.dart:16:46: Error: Undefined name 'window'.
        FlutterKeyboardVisibilityPlugin(html.window.navigator);
                                             ^^^^^^
  Command: C:\src\flutter\bin\cache\dart-sdk\bin\dart.exe compile wasm --packages=.dart_tool/package_config.json
  --extra-compiler-option=--dart-sdk=C:\src\flutter\bin\cache\dart-sdk --extra-compiler-option=--platform=C:\src\flutter\bin\cache\flutter_web_sdk\kernel\dart2wasm_platform.dill   
  --extra-compiler-option=--delete-tostring-package-uri=dart:ui --extra-compiler-option=--delete-tostring-package-uri=package:flutter --extra-compiler-option=--import-shared-memory
  --extra-compiler-option=--shared-memory-max-pages=32768 -Ddart.vm.product=true
  -DFLUTTER_WEB_CANVASKIT_URL=https://www.gstatic.com/flutter-canvaskit/b4bfd459865a8d636f26aca0d330ae297c006c3c/ -DFLUTTER_WEB_AUTO_DETECT=false -DFLUTTER_WEB_USE_SKIA=false      
  -DFLUTTER_WEB_USE_SKWASM=true --extra-compiler-option=--depfile=C:\Users\shech\flutter\daewon_robotics\.dart_tool\flutter_build\4d0ac41d84c133905335851b559ddbb9\dart2wasm.d -O4  
  --no-name-section -o C:\Users\shech\flutter\daewon_robotics\.dart_tool\flutter_build\4d0ac41d84c133905335851b559ddbb9\main.dart.wasm
  C:\Users\shech\flutter\daewon_robotics\.dart_tool\flutter_build\4d0ac41d84c133905335851b559ddbb9\main.dart
#0      RunResult.throwException (package:flutter_tools/src/base/process.dart:125:5)
#1      _DefaultProcessUtils.run (package:flutter_tools/src/base/process.dart:321:19)
<asynchronous suspension>
#2      Dart2WasmTarget.build (package:flutter_tools/src/build_system/targets/web.dart:329:5)
<asynchronous suspension>
#3      _BuildInstance._invokeInternal (package:flutter_tools/src/build_system/build_system.dart:875:9)
<asynchronous suspension>
#4      Future.wait.<anonymous closure> (dart:async/future.dart:524:21)
<asynchronous suspension>
#5      _BuildInstance.invokeTarget (package:flutter_tools/src/build_system/build_system.dart:813:32)
<asynchronous suspension>
#6      Future.wait.<anonymous closure> (dart:async/future.dart:524:21)
<asynchronous suspension>
#7      _BuildInstance.invokeTarget (package:flutter_tools/src/build_system/build_system.dart:813:32)
<asynchronous suspension>
#8      FlutterBuildSystem.build (package:flutter_tools/src/build_system/build_system.dart:642:16)
<asynchronous suspension>
#9      WebBuilder.buildWeb (package:flutter_tools/src/web/compile.dart:92:34)
<asynchronous suspension>
#10     BuildWebCommand.runCommand (package:flutter_tools/src/commands/build_web.dart:230:5)
<asynchronous suspension>
#11     FlutterCommand.run.<anonymous closure> (package:flutter_tools/src/runner/flutter_command.dart:1394:27)
<asynchronous suspension>
#12     AppContext.run.<anonymous closure> (package:flutter_tools/src/base/context.dart:153:19)
<asynchronous suspension>
#13     CommandRunner.runCommand (package:args/command_runner.dart:212:13)
<asynchronous suspension>
#14     FlutterCommandRunner.runCommand.<anonymous closure> (package:flutter_tools/src/runner/flutter_command_runner.dart:372:9)
<asynchronous suspension>
#15     AppContext.run.<anonymous closure> (package:flutter_tools/src/base/context.dart:153:19)
<asynchronous suspension>
#16     FlutterCommandRunner.runCommand (package:flutter_tools/src/runner/flutter_command_runner.dart:308:5)
<asynchronous suspension>
#17     run.<anonymous closure>.<anonymous closure> (package:flutter_tools/runner.dart:130:9)
<asynchronous suspension>
#18     AppContext.run.<anonymous closure> (package:flutter_tools/src/base/context.dart:153:19)
<asynchronous suspension>
#19     main (package:flutter_tools/executable.dart:93:3)
<asynchronous suspension>

Compiling lib\main.dart for the Web...                             62.8s
Error: Failed to compile application for the Web.

[Adrian0012]

Yeahhhh...not sure how this will play out but looking at flutter_keyboard_visibility_web: ^2.0.0 there has not been any updates in years and the likely hood of quill to undergo some big migration just so we can build with wasm.

[dxvid-pts]

dart:html is superceeded by package:web. See https://dart.dev/interop/js-interop/package-web, https://docs.flutter.dev/platform-integration/web/wasm and this talk (https://www.youtube.com/watch?v=qx42r29HhcM) for more information.

A migration can also be done partially.

[Adrian0012]

application

You can't dodge it. Quill has the keyboard package as dependency, hence until the keyboard package gets updated and quill updates the dependency as well you are kinda stuck.

[dxvid-pts]

True, we are dependent on the keyboard package but quill itself could be updated in the meantime:)

[putnokiabel]

True, we are dependent on the keyboard package but quill itself could be updated in the meantime:)

Yep, as long as flutter_quill itself does not use html (which it currently does), you could easily add a dependency_override for flutter_keyboard_visibility_web (as it has a PR ready for wasm support already)

[dxvid-pts]

True, we are dependent on the keyboard package but quill itself could be updated in the meantime:)

Yep, as long as flutter_quill itself does not use html (which it currently does), you could easily add a dependency_override for flutter_keyboard_visibility_web (as it has a PR ready for wasm support already)

Exactly

[dxvid-pts]

@singerdmx is there a reason this was closed? I could not find any PR for this and flutter_quill still depends on the html package

[dxvid-pts]

I already migrated a few open-source packages to package:web. If help is needed I can help.

[rsegecin]

@singerdmx is there a reason this was closed? I could not find any PR for this and flutter_quill still depends on the html package

I believe he was referring to this pull request: MisterJimson/flutter_keyboard_visibility#155. raldhafiri has already worked on getting flutter_keyboard_visibility to compile for ASM and is waiting for this PR to be merged into the MisterJimson repository. As a workaround, while MisterJimson hasn't updated his package yet, you can add the following to your pubspec.yaml to use raldhafiri's version:

dependency_overrides:
flutter_keyboard_visibility_web:
    git:
    url: https://github.com/raldhafiri/flutter_keyboard_visibility.git
    ref: master
    path: flutter_keyboard_visibility_web