Description
Steps to reproduce
- Follow the guide for embedding Flutter in other web apps to create an embedded Flutter web app.
- Run with
-d web-server --web-experimental-hot-reload - Also add
--web-port 8081and--web-header "Access-Control-Allow-Origin=*". - The embedded app works from a different host (see code sample)
- The loader on top (added as
<div class="flutter-loader">in the<body>of the host app) stays present. - Hot reload is not working and an issue shows up in the console:
registerExtension() from dart:developer is only supported in build/run/test environments where the developer event method hooks have been set by package:dwds v11.1.0 or higher.
The app itself, however, works as expected.
I do like to point to this issue flutter/flutter#88434 and my comment flutter/flutter#88434 (comment) where Hot Restart is also not working for embedded Flutter web apps. I was hoping DDC and the changes to enable Hot Reload would have solved this as well.
Code sample
Here's a simplified example of how I set things up.
It might be important to note that running from VS Code will open a new browser tab on localhost:8081, which I then close, since I need it to run embedded in my host app on localhost:8080.
Keeping the browser tab open doesn't make a difference.
// flutter_bootstrap.js in Flutter web project
{{flutter_js}}
{{flutter_build_config}}
const loadApp = (appUrl) => {
_flutter.loader.load({
config: {
entryPointBaseUrl: appUrl,
},
onEntrypointLoaded: async (engineInitializer) => {
const engine = await engineInitializer.initializeEngine({
assetBase: appUrl,
multiViewEnabled: true,
});
window._ourApp = await engine.runApp();
},
});
};
const loadView = (viewName, hostElementId) => {
const viewId = window._ourApp.addView({
hostElement: document.getElementById(hostElementId),
initialData: viewName,
});
return viewId;
};
const unloadView = (viewId) => {
window._ourApp.removeView(viewId);
};// Host app html page, hosted on localhost:8080 (in contrast to 8081 for Flutter app)
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hot Restart</title>
</head>
<body>
<div class="container">
<div class="container">
<h1>Hot Restart Demo</h1>
<p>Example of connecting to localhost:8081</p>
<button onclick="loadView('counter', 'flutter-view')">Load Hot Restartable Demo</button>
<div id="flutter-view"></div>
</div>
<script src="http://localhost:8081/flutter_bootstrap.js" onload="loadApp('http://localhost:8081/')"></script>
</div>
</body>
</html>Note that I am using -d web-server for this.
If I use -d chrome I get the following exception when calling _flutter.loader.load from the host app.
Instance of 'AppConnectionException'
#0 DevHandler._startLocalDebugService (package:dwds/src/handlers/dev_handler.dart:187:7)
<asynchronous suspension>
#1 DevHandler.loadAppServices (package:dwds/src/handlers/dev_handler.dart:239:28)
<asynchronous suspension>
#2 Dwds.debugConnection (package:dwds/dart_web_debug_service.dart:58:30)
<asynchronous suspension>
#3 WebDevFS.connect.<anonymous closure> (package:flutter_tools/src/isolated/devfs_web.dart:926:21)
<asynchronous suspension>
When using -d web-server I do get the following warning in VS Code:
The web-server device requires the Dart Debug Chrome extension for debugging. Consider using the Chrome or Edge devices for an improved development workflow.
and the pop up in VS Code "Flutter: Please click the Dart Debug extension button in the spawned browser window" that remains open.
But the app itself is running and all the steps of the flutter_bootstrap.js were executed.
Flutter version
Flutter 3.32.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision be698c48a6 (3 days ago) • 2025-05-19 12:59:14 -0700
Engine • revision 1881800949 (3 days ago) • 2025-05-19 10:54:07 -0700
Tools • Dart 3.8.0 • DevTools 2.45.1
Metadata
Metadata
Labels
Type
Projects
Status