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

Question

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)

Answer 1

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

• GitHub Issue
• Stackoverflow answer

Answer 2

Must run a server.

dart pub global activate dhttpd

dart pub global run dhttpd --path build/web/

Answer 3

Try

flutter build web --base-href=/build/web/

so that the base href matches with the directory structure of your dev machine.

Do not forge you need to rebuild it

flutter build web

when you deploy it to the hosting site.

Answer 4

Can't run when building web

to load resource: net::ERR_FILE_NOT_FOUND cess to internal resource at 'file:///F:/user/Flutter%20Projects/web-app/web/manifest.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.