Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Hot Restart broken on Flutter Web with --web-renderer html #109093

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
NkITaa opened this issue Aug 6, 2022 · 10 comments · Fixed by #110229 or #110805
Closed

Hot Restart broken on Flutter Web with --web-renderer html #109093

NkITaa opened this issue Aug 6, 2022 · 10 comments · Fixed by #110229 or #110805
Assignees
Labels
c: regression It was better in the past than it is now e: web_html HTML rendering backend for Web found in release: 3.0 Found to occur in 3.0 found in release: 3.1 Found to occur in 3.1 has reproducible steps The issue has been confirmed reproducible and is ready to work on P0 Critical issues such as a build break or regression platform-web Web applications specifically r: fixed Issue is closed as already fixed in a newer version t: hot reload Reloading code during "flutter run" tool Affects the "flutter" command-line tool. See also t: labels.

Comments

@NkITaa
Copy link

NkITaa commented Aug 6, 2022

So I Updated my Flutter today.

I can run my Flutter Web with

flutter run -d chrome --web-renderer html

without a problem. But when I want to hot restart it I just get a white screen.

These are all of the versions of flutter, dart etc. that Im using

Flutter 3.1.0-0.0.pre.2127 • channel master •
https://github.com/flutter/flutter.git
Framework • revision 792a582 (2 hours ago) • 2022-08-06 13:20:08
-0400
Engine • revision a195b6b
Tools • Dart 2.19.0 (build 2.19.0-72.0.dev) • DevTools 2.16.0

I even created a whole new flutter web project with:

flutter create testigo
cd testigo
flutter run -d chrome --web-renderer html

and the problem persisted. So I saw the default starting screen of any new flutter project but it was not responsive. I couldn't click the increment button after hot restart

I ran flutter doctor and everything seems good as well:

[✓] Flutter (Channel master, 3.1.0-0.0.pre.2127, on macOS 12.5 21G72 darwin-x64,
locale en-GB)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
[!] Xcode - develop for iOS and macOS
✗ Xcode installation is incomplete; a full installation is necessary for iOS
development.
Download at: https://developer.apple.com/xcode/download/
Or install Xcode via the App Store.
Once installed, run:
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.1)
[✓] VS Code (version 1.70.0)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

@NkITaa NkITaa added the team-infra Owned by Infrastructure team label Aug 6, 2022
@VIP-Dev-Invisible
Copy link

VIP-Dev-Invisible commented Aug 9, 2022

@NkITaa

i am facing same issue since few days. Restart button is not working but when i manually restart by pressing Ctrl +s , it works.May be it is dart issue or because of some new extenssion installed.

Flutter 3.0.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision f1875d570e (4 weeks ago) • 2022-07-13 11:24:16 -0700
Engine • revision e85ea0e79c
Tools • Dart 2.17.6 • DevTools 2.12.2

@danagbemava-nc danagbemava-nc removed the team-infra Owned by Infrastructure team label Aug 9, 2022
@maheshj01 maheshj01 added the in triage Presently being triaged by the triage team label Aug 9, 2022
@maheshj01
Copy link
Member

maheshj01 commented Aug 9, 2022

Hi @NkITaa, Thanks for filing the issue. I am able to reproduce the issue on the latest master channel and it is working fine on beta and the stable channel.

master ❌

Screen.Recording.2022-08-09.at.2.50.50.PM.mov

stable/beta ✅

Screen.Recording.2022-08-09.at.2.52.18.PM.mov

✅ : No Issue
❌: Issue reproduced

Surprisingly Hot restart works for canvaskit and fails for html renderer

This works

flutter run -d chrome --web-renderer canvaskit

This doesn't

flutter run -d chrome --web-renderer html
flutter doctor -v (mac)
[✓] Flutter (Channel stable, 3.0.5, on macOS 12.4 21F79 darwin-arm, locale en-IN)
    • Flutter version 3.0.5 at /Users/mahesh/Documents/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f1875d570e (5 days ago), 2022-07-13 11:24:16 -0700
    • Engine revision e85ea0e79c
    • Dart version 2.17.6
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-32, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.2

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

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.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 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (3 available)
    • sdk gphone arm64 (mobile) • emulator-5554 • android-arm64  • Android 11 (API 30) (emulator)
    • macOS (desktop)           • macos         • darwin-arm64   • macOS 12.4 21F79 darwin-arm
    • Chrome (web)              • chrome        • web-javascript • Google Chrome 103.0.5060.114

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!
[✓] Flutter (Channel beta, 3.3.0-0.2.pre, on macOS 12.4 21F79 darwin-arm, locale
    en-IN)
    • Flutter version 3.3.0-0.2.pre on channel beta at
      /Users/mahesh/Documents/flutter_beta
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7ac27ac8e6 (7 days ago), 2022-08-02 14:35:08 -0700
    • Engine revision d1e7dc18bf
    • Dart version 2.18.0 (build 2.18.0-271.4.beta)
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-32, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13C100
    • CocoaPods version 1.11.2

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

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.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 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (4 available)
    • Redmi K20 Pro (mobile) • 192.168.1.2:5555                     • android-arm64
      • Android 11 (API 30)
    • iPhone 12 Pro (mobile) • C217DCBE-806E-4BC7-A952-61E4A647A7DA • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64
      • macOS 12.4 21F79 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript
      • Google Chrome 104.0.5112.79

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!
[✓] Flutter (Channel master, 3.1.0-0.0.pre.2166, on macOS 12.4 21F79 darwin-arm,
    locale en-IN)
    • Flutter version 3.1.0-0.0.pre.2166 on channel master at
      /Users/mahesh/Documents/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 87f1684476 (4 hours ago), 2022-08-08 23:00:11 -0700
    • Engine revision b6dd604d90
    • Dart version 2.19.0 (build 2.19.0-76.0.dev)
    • DevTools version 2.16.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-32, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13C100
    • CocoaPods version 1.11.2

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

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.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 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (4 available)
    • Redmi K20 Pro (mobile) • 192.168.1.2:5555                     • android-arm64
      • Android 11 (API 30)
    • iPhone 12 Pro (mobile) • C217DCBE-806E-4BC7-A952-61E4A647A7DA • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64
      • macOS 12.4 21F79 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript
      • Google Chrome 104.0.5112.79

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

@maheshj01 maheshj01 added c: regression It was better in the past than it is now tool Affects the "flutter" command-line tool. See also t: labels. t: hot reload Reloading code during "flutter run" platform-web Web applications specifically has reproducible steps The issue has been confirmed reproducible and is ready to work on found in release: 3.0 Found to occur in 3.0 found in release: 3.1 Found to occur in 3.1 and removed in triage Presently being triaged by the triage team labels Aug 9, 2022
@maheshj01 maheshj01 changed the title Hot Restart in Flutter Web doesn't work Hot Restart broken on Flutter Web with --web-renderer html Aug 9, 2022
@maheshj01 maheshj01 added the e: web_html HTML rendering backend for Web label Aug 9, 2022
@maheshj01
Copy link
Member

cc: @yjbanov

@NkITaa
Copy link
Author

NkITaa commented Aug 9, 2022

@maheshmnj Glad to help :D

P.S are non Google workers allowed to contribute to Flutter?

@christopherfujino
Copy link
Contributor

@maheshmnj Glad to help :D

P.S are non Google workers allowed to contribute to Flutter?

Certainly yes. The starting point for learning how to contribute is https://github.com/flutter/flutter/blob/master/CONTRIBUTING.md

@NkITaa
Copy link
Author

NkITaa commented Aug 9, 2022

Will look at it, thanks :D

@yjbanov yjbanov added the P2 label Aug 11, 2022
@jason-simmons
Copy link
Member

This started with #108776

@ditman

@yjbanov yjbanov self-assigned this Aug 24, 2022
@yjbanov
Copy link
Contributor

yjbanov commented Aug 24, 2022

The issue seems to be that #108776 fixed the app loading process, but did not update the flutter create command to use it, so it produces a non-hot-restartable index.html. A workaround is to manually replace the <script> tag in the app's index.html with the following:

  <script>
    window.addEventListener('load', function(ev) {
      _flutter.loader.loadEntrypoint({
        onEntrypointLoaded: onEntrypointLoaded,
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        }
      });
      async function onEntrypointLoaded(engineInitializer) {
        const appRunner = await engineInitializer.initializeEngine();
        appRunner.runApp();
      }
    });
  </script>

@maheshj01 maheshj01 added the r: fixed Issue is closed as already fixed in a newer version label Aug 27, 2022
@ditman
Copy link
Member

ditman commented Sep 1, 2022

OK, when I wrote the modular flutter.js file I regressed a workaround for the promise-based initialization that deleted the JS function that is called from the engine when it's ready so it's only called the first time. Then the engine falls back to "auto" mode.

There's a corner case in the new didCreateEngineInitializer method, here:

/**
* Resolves the promise created by loadEntrypoint, and calls the `onEntrypointLoaded`
* function supplied by the user (if needed).
*
* Called by Flutter through `_flutter.loader.didCreateEngineInitializer` method,
* which is bound to the correct instance of the FlutterEntrypointLoader by
* the FlutterLoader object.
*
* @param {Function} engineInitializer @see https://github.com/flutter/engine/blob/main/lib/web_ui/lib/src/engine/js_interop/js_loader.dart#L42
*/
didCreateEngineInitializer(engineInitializer) {
if (typeof this._didCreateEngineInitializerResolve === "function") {
this._didCreateEngineInitializerResolve(engineInitializer);
// Remove the resolver after the first time, so Flutter Web can hot restart.
this._didCreateEngineInitializerResolve = null;
}
if (typeof this._onEntrypointLoaded === "function") {
this._onEntrypointLoaded(engineInitializer);
}
}

that is deleting the internal implementation of the method (the cached resolve method from the original promise), when it should delete the complete didCreateEngineInitializer, so the Flutter engine can continue in "auto" mode at least. This needs to be done only if _onEntrypointLoaded is not present.

@github-actions
Copy link

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Sep 15, 2022
@flutter-triage-bot flutter-triage-bot bot added P0 Critical issues such as a build break or regression and removed P2 labels Jun 28, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
c: regression It was better in the past than it is now e: web_html HTML rendering backend for Web found in release: 3.0 Found to occur in 3.0 found in release: 3.1 Found to occur in 3.1 has reproducible steps The issue has been confirmed reproducible and is ready to work on P0 Critical issues such as a build break or regression platform-web Web applications specifically r: fixed Issue is closed as already fixed in a newer version t: hot reload Reloading code during "flutter run" tool Affects the "flutter" command-line tool. See also t: labels.
Projects
None yet
8 participants