flutter / flutter/flutter

Web: some config values ignored when supplying onEntryPointLoaded to _flutter.loader.load()

Open
#158,041 3 comments 3 reactions 0 assignees View on GitHub
a: assets found in release: 3.24 found in release: 3.27 has reproducible steps P2 platform-web team-web triaged-web
Dominant language
Dart
Stars
179k
Forks
31.1k
PR merge metrics
PR metrics pending

Description

### Steps to reproduce

1. Create a Flutter web project
2. Follow the [instructions for embedding in a web page](https://docs.flutter.dev/platform-integration/web/embedding-flutter-web#enable-multi-view-mode)
* This involves a custom `onEntryPointLoaded` function
3. Follow the [customization instructions](https://docs.flutter.dev/platform-integration/web/initialization#the-_flutter-loader-load-api) to set a custom `assetBase` and `entryPointBaseUrl`

### Expected results

The app is successfully hosted at my custom path.

### Actual results

The following is logged in the browser console.

```
GET http://localhost:4321/assets/FontManifest.json 404 (Not Found)
```

Assets aren't respecting the `assetBase` path I supplied.

This is because certain values in the `config` have to be manually passed to the `initializeEngine` call when using `onEntryPointLoaded`. If you don't use `onEntryPointLoaded` then all of the `config` values get passed automatically.

This is a hard API to use right - I initially thought it was a documentation bug ([#11341](https://github.com/flutter/website/issues/11341)).

`entryPointBaseUrl` ***does*** have to be passed in the `config` to `_flutter.loader.load()`. But `assetBase` has to be passed directly to `initializeEngine`.

I'm not sure how to make it right in a backward compatible way right now though.

### Code sample

Code sample

This bug involves hosting a Flutter app at an arbitrary path in a web site. I don't know how to simplify that for a quick and easy repro here.

If you follow the steps above, you'll wind up with something like this in your `flutter_bootstrap.js`.

```js
{{flutter_js}}
{{flutter_build_config}}

_flutter.loader.load({
config: {
entryPointBaseUrl: '/subpath/',
assetBase: '/subpath/',
},
onEntrypointLoaded: async function onEntrypointLoaded(engineInitializer) {
let engine = await engineInitializer.initializeEngine({
multiViewEnabled: true, // Enables embedded mode.
});
let app = await engine.runApp();
// Make this `app` object available to your JS app.
app.addView({
hostElement: document.querySelector('#flutter-element'),
});
}
});
```

Your `main.dart` should look like this:

```dart
import 'package:flutter/material.dart';

void main() {
runWidget(
const WebGateway(child: MainApp()
));
}

class MainApp extends StatelessWidget {
const MainApp({super.key});

@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Scaffold(
body: Center(
child: Text('Hello Astro!'),
),
),
);
}
}

class WebGateway extends StatefulWidget {
final Widget child;

const WebGateway({super.key, required this.child});

@override
State createState() {
return _WebGatewayState();
}
}

class _WebGatewayState extends State with WidgetsBindingObserver {
late Widget child;

@override
void initState() {
super.initState();
WidgetsBinding.instance.addObserver(this);
_updateView();
}

@override
void didUpdateWidget(WebGateway oldWidget) {
super.didUpdateWidget(oldWidget);
_updateView();
}

@override
void didChangeMetrics() {
_updateView();
}

void _updateView() {
final flutterView = WidgetsBinding.instance.platformDispatcher.views.single;
setState(() {
child = View(view: flutterView, child: widget.child);
});
}

@override
void dispose() {
WidgetsBinding.instance.removeObserver(this);
super.dispose();
}

@override
Widget build(BuildContext context) {
return child;
}
}
```

### Screenshots or Video

_No response_

### Logs

_No response_

### Flutter Doctor output

Doctor output

```console
[✓] Flutter (Channel stable, 3.24.4, on macOS 14.6.1 23G93 darwin-arm64, locale en-US)
• Flutter version 3.24.4 on channel stable at /Users/christian/Development/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 603104015d (8 days ago), 2024-10-24 08:01:25 -0700
• Engine revision db49896cf2
• Dart version 3.5.4
• DevTools version 2.37.3

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at /Users/christian/Library/Android/sdk
• Platform android-34, build-tools 34.0.0
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)
• All Android licenses accepted.

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

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

[✓] Android Studio (version 2024.1)
• 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 17.0.11+0-17.0.11b1207.24-11852314)

[✓] IntelliJ IDEA Community Edition (version 2024.2.1)
• IntelliJ at /Applications/IntelliJ IDEA CE.app
• 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

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

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

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

• No issues found!
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.