bug: SpeechRecognition is not a constructor when run the app in release mode

[yeikel16]

Hi, I started migrating to use the web package in the speech_to_text plugin, but when I run the example in release mode and try the initialize I get the error Error: k.SpeechRecognition is not a constructor, but in debug mode everything works fine.

I'm looking around the previous version of implementation and the html_dart2js.dart file has this constructor declaration:

  factory SpeechRecognition() {
    return JS('SpeechRecognition',
        'new (window.SpeechRecognition || window.webkitSpeechRecognition)()');
  }

And the new version of web package use extension type

extension type SpeechRecognition._(JSObject _)
   implements EventTarget, JSObject {
 external factory SpeechRecognition();
 ...
 }

In some examples on the MDN web make reference to

Create a new SpeechRecognition object instance using the SpeechRecognition() constructor.

Run the example here using the branch migrate-web-platform-to-use-web-package.

web: ^1.0.0

Flutter Doctor

[✓] Flutter (Channel stable, 3.22.3, on macOS 14.6 23G80 darwin-arm64, locale es-US) • Flutter version 3.22.3 on channel stable at /Users/yeikel/fvm/versions/3.22.3 • Upstream repository https://github.com/flutter/flutter.git • Framework revision b0850beeb2 (hace 3 semanas), 2024-07-16 21:43:41 -0700 • Engine revision 235db911ba • Dart version 3.4.4 • DevTools version 2.34.3

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
• Android SDK at /Users/yeikel/Library/Android/sdk/
• Platform android-34, build-tools 33.0.1
• ANDROID_HOME = /Users/yeikel/Library/Android/sdk/
• Java binary at: /Applications/Android Studio 2.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 15F31d
• CocoaPods version 1.15.2

[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
• Android Studio at /Applications/Android Studio 2.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.91.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.94.0

[✓] Connected device (3 available)
• macOS (desktop) • macos • darwin-arm64 • macOS 14.6 23G80 darwin-arm64
• Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 14.6 23G80 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 127.0.6533.89

[✓] Network resources
• All expected network resources are available.

• No issues found!

[srujzs]

https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/SpeechRecognition#browser_compatibility

It's pretty unfortunate that it's still under the vendor prefix since Chrome 33. Interop constructors use the name of the type (+ any renaming), so this is indeed broken since new SpeechRecognition() is not valid. A workaround is:

@JS('webkitSpeechRecognition')
extension type _SpeechRecognition._(SpeechRecognition _) implements SpeechRecognition {
  external factory _SpeechRecognition();
}

...

SpeechRecognition createSpeechRecognition() => _SpeechRecognition();

I'm hoping this will be even easier to write once we have static extensions in the language. With that, we could easily add a static extension on SpeechRecognition into the helpers.

[yeikel16]

Thanks @srujzs, with the workaround run perfect in release mode !!

Just out of curiosity, why not work in release mode and is working in debug mode?

[srujzs]

We have a bunch of polyfills in DDC/debug mode because the way we intercept types for dart:html are a little more brittle there (yet another reason we want to move away from dart:html and to package:web). Here, the polyfill makes it work for DDC but no such polyfill exists in dart2js:

https://github.com/dart-lang/sdk/blob/47180c004b1afb1da8df6dd6eb66bdb5233953ba/sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/runtime.dart#L151