Flutter web debug is working but build web shows a blank page

Issue

flutter doctor result

[√] Flutter (Channel dev, 1.21.0-1.0.pre, on Microsoft Windows [Version 10.0.19041.388], locale en-US)
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[√] Chrome - develop for the web
[√] Android Studio (version 4.0)
[√] VS Code (version 1.47.2)
[√] Connected device (3 available)

• No issues found!

I was working with flutter v 1.20-7.2.pre in beta channel and encountered this problem. So I switched to dev channel.

I tried running the example project (boilerplate) as well and got a blank page. The console shows some errors in main.dart.js and js_helper.dart shows the error:

Could not load content for org-dartlang-sdk:///lib/_internal/js_runtime/lib/js_helper.dart (HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME)

To Reproduce the problem

Create the sample project in any IDE
Run the following commands:

flutter channel beta
flutter upgrade
flutter config --enable-web

OR

flutter channel dev
flutter upgrade
flutter config --enable-web

Then, run:
flutter build web

After this, I used python to run localhost:
python -m http.server 8080 in the $root_folder\build\web

I found another answer which suggested hosting the build\web folder as localhost has CORS problems

Also, I tried using the debug mode: flutter run -d Chrome and it worked!

Extra information: I am testing this on Chrome v 84.0.4147.89 (Official Build) (64-bit)

Solution

Found answers to this question here. It was actually happening due to firebase and was not a flutter issue at all.

Answered By – sidrao2006

Answer Checked By – Senaida (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *