添加WebF之后，运行flutter run报一大堆 Error: Only JS interop members may be 'external'.的错误

[dmq0]

Affected version

0.16.0

Flutter versions

3.22.2

No same issues found.

• [X] Yes, I search all issues but not found.

Steps to Reproduce

1.创建flutter项目，并正常运行起来 2.添加WebF，并按官网示例更改main.dart 3.运行报一大堆类似错误： Error: Only JS interop members may be 'external'.

Code example

/*
 * Copyright (C) 2019-2022 The Kraken authors. All rights reserved.
 * Copyright (C) 2022-present The WebF authors. All rights reserved.
 */

import 'package:flutter/material.dart';
// import 'package:webf/webf.dart';
// import 'package:webf/devtools.dart';

void main() {
  runApp(MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Kraken Browser',
      // theme: ThemeData.dark(),
      debugShowCheckedModeBanner: false,
      home: FirstPage(title: 'Landing Bay'),
    );
  }
}

// @override
// Widget build(BuildContext context) {
//   final MediaQueryData queryData = MediaQuery.of(context);
//   final Size viewportSize = queryData.size;
//   return Scaffold(
//       body: Center(
//     child: Column(
//       children: [
//         WebF(
//           devToolsService:
//               ChromeDevToolsService(), // Enable Chrome DevTools Services
//           viewportWidth: viewportSize.width -
//               queryData.padding.horizontal, // Adjust the viewportWidth
//           viewportHeight: viewportSize.height -
//               queryData.padding.vertical, // Adjust the viewportHeight
//           bundle: WebFBundle.fromUrl(
//               'http://localhost:8080/'), // The page entry point
//         ),
//       ],
//     ),
//   ));
// }

class FirstPage extends StatefulWidget {
  const FirstPage({super.key, required this.title});
  final String title;
  @override
  State<StatefulWidget> createState() {
    return FirstPageState();
  }
}

// class FirstPageState extends State<FirstPage> {
//   late WebFController controller;
//   @override
//   void didChangeDependencies() {
//     super.didChangeDependencies();
//     controller = WebFController(
//       context,
//       devToolsService: ChromeDevToolsService(),
//     );
//     controller.preload(WebFBundle.fromUrl('assets:assets/bundle.html'));
//   }

//   @override
//   void dispose() {
//     super.dispose();
//     controller.dispose();
//   }

//   @override
//   Widget build(BuildContext context) {
//     return Scaffold(
//       appBar: AppBar(
//         title: Text(widget.title),
//       ),
//       body: Center(
//         child: ElevatedButton(
//           onPressed: () {
//             Navigator.push(context, MaterialPageRoute(builder: (context) {
//               return WebFDemo(controller: controller);
//             }));
//           },
//           child: const Text('Open WebF Page'),
//         ),
//       ),
//     );
//   }
// }

class WebFDemo extends StatelessWidget {
  final WebFController controller;
  const WebFDemo({super.key, required this.controller});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('WebF Demo'),
        ),
        body: Center(
          // Center is a layout widget. It takes a single child and positions it
          // in the middle of the parent.
          child: WebF(controller: controller),
        ));
  }
}

Expected results

C:\Users\Mi\Desktop\flutter\test7>flutter run
Connected devices:
Windows (desktop) • windows • windows-x64    • Microsoft Windows [版本 10.0.19045.4291]
Chrome (web)      • chrome  • web-javascript • Google Chrome 125.0.6422.142
Edge (web)        • edge    • web-javascript • Microsoft Edge 125.0.2535.92
[1]: Windows (windows)
[2]: Chrome (chrome)
[3]: Edge (edge)
Please choose one (or "q" to quit): 2
Launching lib\main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome...             11.7s
This app is linked to the debug service: ws://127.0.0.1:54081/Pk6apeEXDI4=/ws
Debug service listening on ws://127.0.0.1:54081/Pk6apeEXDI4=/ws

  To hot restart changes while running, press "r" or "R".
For a more detailed help message, press "h". To quit, press "q".

A Dart VM Service on Chrome is available at: http://127.0.0.1:54081/Pk6apeEXDI4=
The Flutter DevTools debugger and profiler on Chrome is available at:
http://127.0.0.1:9101?uri=http://127.0.0.1:54081/Pk6apeEXDI4=

Actual results

C:\Users\Mi\Desktop\flutter\test7>flutter run
Connected devices:
Windows (desktop) • windows • windows-x64    • Microsoft Windows [版本 10.0.19045.4291]
Chrome (web)      • chrome  • web-javascript • Google Chrome 125.0.6422.142
Edge (web)        • edge    • web-javascript • Microsoft Edge 125.0.2535.92
[1]: Windows (windows)
[2]: Chrome (chrome)
[3]: Edge (edge)
Please choose one (or "q" to quit): 2
Launching lib\main.dart on Chrome in debug mode...
lib/main.dart:100:9: Error: Type 'WebFController' not found.
  final WebFController controller;
        ^^^^^^^^^^^^^^
lib/main.dart:57:12: Error: The method 'FirstPageState' isn't defined for the class 'FirstPage'.
 - 'FirstPage' is from 'package:test7/main.dart' ('lib/main.dart').
Try correcting the name to the name of an existing method, or defining a method named 'FirstPageState'.
    return FirstPageState();
           ^^^^^^^^^^^^^^
lib/main.dart:100:9: Error: 'WebFController' isn't a type.
  final WebFController controller;
        ^^^^^^^^^^^^^^
lib/main.dart:111:18: Error: The method 'WebF' isn't defined for the class 'WebFDemo'.
 - 'WebFDemo' is from 'package:test7/main.dart' ('lib/main.dart').
Try correcting the name to the name of an existing method, or defining a method named 'WebF'.
          child: WebF(controller: controller),
                 ^^^^
Unhandled exception:
Unsupported operation: Unsupported invalid type InvalidType(<invalid>) (InvalidType). Encountered while compiling
file:///C:/Users/Mi/Desktop/flutter/test7/lib/main.dart, which contains the type: InvalidType(<invalid>).
#0      ProgramCompiler._typeCompilationError (package:dev_compiler/src/kernel/compiler.dart:3236)
#1      ProgramCompiler._emitType (package:dev_compiler/src/kernel/compiler.dart:3197)
#2      ProgramCompiler._emitClassFieldSignature (package:dev_compiler/src/kernel/compiler.dart:1651)
#3      ProgramCompiler._emitClassSignature (package:dev_compiler/src/kernel/compiler.dart:1627)
#4      ProgramCompiler._emitClassDeclaration (package:dev_compiler/src/kernel/compiler.dart:962)
#5      ProgramCompiler._emitClass (package:dev_compiler/src/kernel/compiler.dart:819)
#6      List.forEach (dart:core-patch/growable_array.dart:416)
#7      ProgramCompiler._emitLibrary (package:dev_compiler/src/kernel/compiler.dart:757)
#8      List.forEach (dart:core-patch/growable_array.dart:416)
#9      ProgramCompiler.emitModule (package:dev_compiler/src/kernel/compiler.dart:486)
#10     IncrementalJavaScriptBundler.compile (package:frontend_server/src/javascript_bundle.dart:223)
#11     FrontendCompiler.writeJavaScriptBundle (package:frontend_server/frontend_server.dart:801)
<asynchronous suspension>
#12     FrontendCompiler.compile (package:frontend_server/frontend_server.dart:661)
<asynchronous suspension>
#13     listenAndCompile.<anonymous closure> (package:frontend_server/frontend_server.dart:1311)
<asynchronous suspension>
the Dart compiler exited unexpectedly.
Waiting for connection from debug service on Chrome...              4.2s
Failed to compile application.

[andycall]

请把 dart 编译问题修好了再运行

[dmq0]

为什么添加WebF之后会出现这么多编译问题呀，特别特别多，可能很难去修复它。

[andycall]

检查一下 flutter 版本是否和 webf 相匹配，以及 import 写了没

[dmq0]

flutter版本是3.19.3的，创建了一个新的项目，按照官网的教程添加了webf和import，但是flutter run运行时就会抛出这些错误

[andycall]

建议先学习一下 Dart 语言

// import 'package:webf/webf.dart';
// import 'package:webf/devtools.dart';

[dmq0]

好的，就是不想学dart，然后来试试webf，但是这个import加上了也会这样，删除也是。main.dart是这样的： import 'package:flutter/material.dart'; import 'package:webf/webf.dart'; import 'package:webf/devtools.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return const MaterialApp( title: 'Kraken Browser', debugShowCheckedModeBanner: false, home: FirstPage(title: 'Landing Bay'), ); } } @override Widget build(BuildContext context) { final MediaQueryData queryData = MediaQuery.of(context); final Size viewportSize = queryData.size; return Scaffold( body: Center( child: Column( children: [ WebF( devToolsService: ChromeDevToolsService(), // Enable Chrome DevTools Services viewportWidth: viewportSize.width - queryData.padding.horizontal, // Adjust the viewportWidth viewportHeight: viewportSize.height - queryData.padding.vertical, // Adjust the viewportHeight bundle: WebFBundle.fromUrl( 'http://localhost:8080/'), // The page entry point ), ], ), )); } class FirstPage extends StatefulWidget { const FirstPage({super.key, required this.title}); final String title; @override State createState() { return FirstPageState(); } } class FirstPageState extends State { late WebFController controller; @override void didChangeDependencies() { super.didChangeDependencies(); controller = WebFController( context, devToolsService: ChromeDevToolsService(), ); controller.preload(WebFBundle.fromUrl('assets:assets/bundle.html')); } @override void dispose() { super.dispose(); controller.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: ElevatedButton( onPressed: () { Navigator.push(context, MaterialPageRoute(builder: (context) { return WebFDemo(controller: controller); })); }, child: const Text('Open WebF Page'), ), ), ); } } class WebFDemo extends StatelessWidget { final WebFController controller; const WebFDemo({super.key, required this.controller}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('WebF Demo'), ), body: Center( // Center is a layout widget. It takes a single child and positions it // in the middle of the parent. child: WebF(controller: controller), )); } }

[andycall]

https://github.com/openwebf/webf/blob/main/webf/example/lib/main.dart

参考一下这里，肯定是哪里没弄对

[Santaer]

When is it suitable for Flutter 3.22.2

[dmq0]

谢谢，大家