Cannot build to WASM with flutter_quill

[shechren]

Is there an existing issue for this?

• [X] 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: https://github.com/MisterJimson/flutter_keyboard_visibility/pull/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

[CatHood0]

Does this issue still persists?

[EchoEllet]

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

Thank you for the offer, in case you're still interested, feel free to take a look at #2230, #2220, and #1998.

Does this issue still persists?

Should still do since flutter_keyboard_visibility doesn't use package:web yet.

Will have to introduce a replacement.

[EchoEllet]

Should be solved once #1889 is solved.

Update: Fixed in #1889 by forking and replacing flutter_keyboard_visibility with flutter_keyboard_visibility_temp_fork.

[EchoEllet]

Fixed in 10.8.1.

@shechren Can you confirm if you're still facing this issue or any related issues to Wasm support?

[pweibert]

Still the same issue here, when compiling to wasm

Target dart2wasm failed: ProcessException: Process exited abnormally with exit code 254:
../../.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

../../.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);
                                  ^^^^^^^^^^^^^^
../../.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);
                                       ^^^^^^^^^
../../.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: /home/nlogos/snap/flutter/common/flutter/bin/cache/dart-sdk/bin/dart compile wasm
  --packages=/home/nlogos/dev/menuplanner/.dart_tool/package_config.json
  --extra-compiler-option=--platform=/home/nlogos/snap/flutter/common/flutter/bin/cache/flutter_web_s  dk/kernel/dart2wasm_platform.dill -Ddart.vm.profile=false -Ddart.vm.product=true
  --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 -DFLUTTER_WEB_USE_SKIA=false
  -DFLUTTER_WEB_USE_SKWASM=true
  -DFLUTTER_WEB_CANVASKIT_URL=https://www.gstatic.com/flutter-canvaskit/18b71d647a292a980abb405ac7d16  fe1f0b20434/
  --extra-compiler-option=--depfile=/home/nlogos/dev/menuplanner/.dart_tool/flutter_build/2b895b047c2  de07e6cc46404a9075afa/dart2wasm.d -O4 --strip-wasm --no-source-maps -o
  /home/nlogos/dev/menuplanner/.dart_tool/flutter_build/2b895b047c2de07e6cc46404a9075afa/main.dart.wa  sm /home/nlogos/dev/menuplanner/.dart_tool/flutter_build/2b895b047c2de07e6cc46404a9075afa/main.dart#0      RunResult.throwException (package:flutter_tools/src/base/process.dart:118:5)
#1      _DefaultProcessUtils.run (package:flutter_tools/src/base/process.dart:344:19)
<asynchronous suspension>
#2      Dart2WasmTarget.build (package:flutter_tools/src/build_system/targets/web.dart:346:5)
<asynchronous suspension>
#3      _BuildInstance._invokeInternal (package:flutter_tools/src/build_system/build_system.dart:876:9)
<asynchronous suspension>
#4      Future.wait.<anonymous closure> (dart:async/future.dart:528:21)
<asynchronous suspension>
#5      _BuildInstance.invokeTarget (package:flutter_tools/src/build_system/build_system.dart:814:32)<asynchronous suspension>
#6      Future.wait.<anonymous closure> (dart:async/future.dart:528:21)
<asynchronous suspension>
#7      _BuildInstance.invokeTarget (package:flutter_tools/src/build_system/build_system.dart:814:32)<asynchronous suspension>
#8      FlutterBuildSystem.build (package:flutter_tools/src/build_system/build_system.dart:637:16)
<asynchronous suspension>
#9      WebBuilder.buildWeb (package:flutter_tools/src/web/compile.dart:93:34)
<asynchronous suspension>
#10     BuildWebCommand.runCommand (package:flutter_tools/src/commands/build_web.dart:253:5)
<asynchronous suspension>
#11     FlutterCommand.run.<anonymous closure> (package:flutter_tools/src/runner/flutter_command.dart:1558:27)
<asynchronous suspension>
#12     AppContext.run.<anonymous closure> (package:flutter_tools/src/base/context.dart:154: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:496:9)
<asynchronous suspension>
#15     AppContext.run.<anonymous closure> (package:flutter_tools/src/base/context.dart:154:19)
<asynchronous suspension>
#16     FlutterCommandRunner.runCommand (package:flutter_tools/src/runner/flutter_command_runner.dart:431:5)
<asynchronous suspension>
#17     run.<anonymous closure>.<anonymous closure> (package:flutter_tools/runner.dart:98:11)
<asynchronous suspension>
#18     AppContext.run.<anonymous closure> (package:flutter_tools/src/base/context.dart:154:19)
<asynchronous suspension>
#19     main (package:flutter_tools/executable.dart:99:3)
<asynchronous suspension>

Compiling lib/main.dart for the Web...                             52.2s
Error: Failed to compile application for the Web.

[EchoEllet]

flutter_keyboard_visibility_web

We no longer use flutter_keyboard_visibility if you're using the newer versions of flutter_quill; this is likely a transitive dependency from another package. Please test on a new Flutter project and file an issue if it's reproducible.