cfug/dio

flutter web DioException“TypeError: Instance of 'HttpRequestEventTarget': type 'HttpRequestEventTarget' is not a subtype of type 'HttpRequest'”

ZhangZeQiao opened this issue · 3 comments

ZhangZeQiao commented

Package

dio

Version

5.4.1

Operating-System

Web

Adapter

Default Dio

Output of flutter doctor -v

[√] Flutter (Channel stable, 3.19.4, on Microsoft Windows [版本 10.0.19045.4170], locale zh-CN)
    • Flutter version 3.19.4 on channel stable at C:\dev\flutter\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 68bfaea224 (4 days ago), 2024-03-20 15:36:31 -0700
    • Engine revision a5c24f538d
    • Dart version 3.3.2
    • DevTools version 2.31.1
    • Flutter download mirror https://storage.flutter-io.cn

[√] Windows Version (Installed version of Windows is version 10 or higher)

Dart Version

3.3.2

Steps to Reproduce

1、flutter web development（Not Android or iOS！）
2、flutter 3.19.4 + Dart 3.3.2（sdk: '>=3.0.0 <4.0.0'） + Web（Chrome）+ dio 5.4.1
3、demo：
Future<void> test() async { final response = await Dio().get('https://dart.dev'); print(response); }

Expected Result

When using Flutter for web development, you can use DIO for normal network interface requests.

Actual Result

The following error message appears when using Flutter for web development：
Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this source!
Launching lib\main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome...
This app is linked to the debug service: ws://127.0.0.1:53930/4klEzkswD3I=/ws
Debug service listening on ws://127.0.0.1:53930/4klEzkswD3I=/ws
Debug service listening on ws://127.0.0.1:53930/4klEzkswD3I=/ws
wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': An argument must be provided, which must be a Response or Promise object
falling back to ArrayBuffer instantiation
Error: DioException [unknown]: null
Error: TypeError: Instance of 'HttpRequestEventTarget': type 'HttpRequestEventTarget' is not a subtype of type 'HttpRequest'
dart-sdk/lib/internal/js_dev_runtime/private/ddc_runtime/errors.dart 297:3 throw
packages/dio/src/dio_mixin.dart 510:7
dart-sdk/lib/async/zone.dart 1661:54 runUnary
dart-sdk/lib/async/future_impl.dart 180:22 handleError
dart-sdk/lib/async/future_impl.dart 850:46 handleError
dart-sdk/lib/async/future_impl.dart 871:13 _propagateToListeners
dart-sdk/lib/async/future_impl.dart 651:5 [_completeError]
dart-sdk/lib/async/future_impl.dart 63:5 [_completeError]
dart-sdk/lib/async/future_impl.dart 27:5 completeError
dart-sdk/lib/async/future.dart 613:44 onError
dart-sdk/lib/async/zone.dart 1666:54 runBinary
dart-sdk/lib/async/future_impl.dart 177:22 handleError
dart-sdk/lib/async/future_impl.dart 850:46 handleError
dart-sdk/lib/async/future_impl.dart 871:13 _propagateToListeners
dart-sdk/lib/async/future_impl.dart 651:5 [_completeError]
dart-sdk/lib/async/future_impl.dart 737:7 callback
dart-sdk/lib/async/schedule_microtask.dart 40:11 _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5 _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 181:7

Through debugging, I found that type conversion exceptions occur in the following code nodes：
17113326169172

AlexV525 commented

#2157 (comment) Please follow the comment to reproduce, rather than create custom implementations. As I've stated, I'm running on Flutter Web with our example and reproducing no issues.

AlexV525 commented

It is very likely your implementation imports libraries from the native platform, where HttpRequest is a subtype of Stream<Uint8List>, rather than HttpRequestEventTarget.

ZhangZeQiao commented

I finally found the problem because I added the following content to web/index.html:

<head>
  ... ...
  <!-- This script adds the flutter initialization JS code -->
  <script src="flutter.js" defer></script>
  ... ...
  <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js">
    // 调试台：https://github.com/Tencent/vConsole
  </script>
  <script>
    var vConsole = new window.VConsole();
  </script>
  ... ...
</head>

Adding this content will cause:
wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': An argument must be provided, which must be a Response or Promise object
falling back to ArrayBuffer instantiation

As a result, it can cause:
Error: DioException [unknown]: null
Error: TypeError: Instance of 'HttpRequestEventTarget': type 'HttpRequestEventTarget' is not a subtype of type 'HttpRequest'

Remove the content to use Dio normally!

But it's strange, last year this method was still working properly?!