pichillilorenzo / flutter_inappwebview

A Flutter plugin that allows you to add an inline webview, to use a headless webview, and to open an in-app browser window.
https://inappwebview.dev
Apache License 2.0
3.3k stars 1.63k forks source link

Flutter Web crashes with TypeError: Cannot set properties of undefined (setting 'nativeCommunication') #1468

Closed Binozo closed 1 year ago

Binozo commented 1 year ago

Environment

Technology Version
Flutter version 3.3.9
Plugin version 6.0.0-beta.21
Android version
iOS version
macOS version
Xcode version

Device information: Microsoft Edge 108.0.1462.46 and Firefox 107

Description

Expected behavior:

Normal application startup on Flutter Web

Current behavior:

Application doesn't start, loads forever.

Steps to reproduce

  1. Setup a Flutter Web Project
  2. Follow flutter_inappwebview documentation for setting up web
  3. Start your web application

Stacktrace/Logcat

TypeError: Cannot set properties of undefined (setting 'nativeCommunication')
packages/flutter_inappwebview/src/web/web_platform.dart 33:5                                                                   registerWith
web_plugin_registrant.dart 22:34                                                                                               registerPlugins
web_entrypoint.dart 27:24                                                                                                      <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 334:14  _checkAndCall
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 339:39  dcall
C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/ui/initialization.dart 73:24                                  <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54                runBody
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5                _async
C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/ui/initialization.dart 71:16                                  <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 334:14  _checkAndCall
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 398:10  callMethod
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 402:5   dsend
C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/_engine/engine/app_bootstrap.dart 27:18                       autoStart
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 45:50                <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/zone.dart 1653:54                                              runUnary
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 147:18                                        handleValue
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 766:44                                        handleValueCallback
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 795:13                                        _propagateToListeners
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 566:5                                         [_completeWithValue]
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future.dart 528:22                                             <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/zone.dart 1653:54                                              runUnary
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 147:18                                        handleValue
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 766:44                                        handleValueCallback
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 795:13                                        _propagateToListeners
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 566:5                                         [_completeWithValue]
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 639:7                                         callback
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/schedule_microtask.dart 40:11                                  _microtaskLoop
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/schedule_microtask.dart 49:5                                   _startMicrotaskLoop
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 166:15               <fn>
github-actions[bot] commented 1 year ago

👋 @Binozo

NOTE: This comment is auto-generated.

Are you sure you have already searched for the same problem?

Some people open new issues but they didn't search for something similar or for the same issue. Please, search for it using the GitHub issue search box or on the official inappwebview.dev website, or, also, using Google, StackOverflow, etc. before posting a new one. You may already find an answer to your problem!

If this is really a new issue, then thank you for raising it. I will investigate it and get back to you as soon as possible. Please, make sure you have given me as much context as possible! Also, if you didn't already, post a code example that can replicate this issue.

In the meantime, you can already search for some possible solutions online! Because this plugin uses native WebView, you can search online for the same issue adding android WebView [MY ERROR HERE] or ios WKWebView [MY ERROR HERE] keywords.

Following these steps can save you, me, and other people a lot of time, thanks!

Binozo commented 1 year ago

I am stupid

ayushkadbe commented 1 year ago

@Binozo What's the solution?

Binozo commented 1 year ago

@Binozo What's the solution?

@ayushkadbe my Problem was not related with the package. I made a rollback to the latest stable release (5.x.x). But the error was caused by an crash of my code in my application

sugur commented 1 year ago

I have same problem on flutter_inappwebview: ^6.0.0-beta.22. How to fix this problem?

TypeError: Cannot set properties of undefined (setting 'nativeCommunication') TypeError: Cannot set properties of undefined (setting 'nativeCommunication') packages/flutter_inappwebview/src/web/web_platform.dart 33:5 registerWith web_plugin_registrant.dart 23:34 registerPlugins web_entrypoint.dart 27:24 dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 367:37 _checkAndCall

sischnei commented 1 year ago

For me - updating the index.html was necessary, make sure to add

<script type="application/javascript" src="/assets/packages/flutter_inappwebview/assets/web/web_support.js" defer></script>

to the web/index.html file (in the section).

xdkaka commented 1 year ago

+1

sugur commented 1 year ago

For me - updating the index.html was necessary, make sure to add

<script type="application/javascript" src="/assets/packages/flutter_inappwebview/assets/web/web_support.js" defer></script>

to the web/index.html file (in the section).

OK, I use it to work. Thanks

oscardcd commented 1 year ago

For me - updating the index.html was necessary, make sure to add

<script type="application/javascript" src="/assets/packages/flutter_inappwebview/assets/web/web_support.js" defer></script>

to the web/index.html file (in the section).

it works for me, thank you!

t0uh33d commented 11 months ago

If someone is still facing this issue and is depending on the version 6.0.0-beta.30 or later

Add this line in the head tag of your index.html

    <script
      type="application/javascript"
      src="/assets/packages/flutter_inappwebview_web/assets/web/web_support.js"
      defer
    ></script>
Mounix99 commented 10 months ago

Small note: make sure you have placed above solution in the end of head tag

sujit471 commented 9 months ago

If someone is still facing this issue and is depending on the version 6.0.0-beta.30 or later

Add this line in the head tag of your index.html

    <script
      type="application/javascript"
      src="/assets/packages/flutter_inappwebview_web/assets/web/web_support.js"
      defer
    ></script>

Thanks a lot ☺️☺️

PrashanthKumarDS-yourdost commented 8 months ago

For me - updating the index.html was necessary, make sure to add

<script type="application/javascript" src="/assets/packages/flutter_inappwebview/assets/web/web_support.js" defer></script>

to the web/index.html file (in the section).

Its not working for me. Please help

yihenewaddis commented 8 months ago

it works for me, 10q

sapar-io commented 8 months ago

For me - updating the index.html was necessary, make sure to add

<script type="application/javascript" src="/assets/packages/flutter_inappwebview/assets/web/web_support.js" defer></script>

to the web/index.html file (in the section).

Its not working for me. Please help

It works for me too, just paste it before

sapar-io commented 8 months ago

One big problem with this code snippet, its dissapear every time in index.html after flutter clean command

mirza-d3x commented 8 months ago

For me - updating the index.html was necessary, make sure to add

<script type="application/javascript" src="/assets/packages/flutter_inappwebview/assets/web/web_support.js" defer></script>

to the web/index.html file (in the section).

Its not working for me. Please help

It works for me too, just paste it before

can you give me an example for where should I place this code I tried but it's doesn't works for me

t0uh33d commented 8 months ago

@sapar-io @mirza-d3x

make sure to add the line in web/index.html and not build/web/index.html

mirza-d3x commented 8 months ago

@sapar-io @mirza-d3x

make sure to add the line in web/index.html and not build/web/index.html

I did that but it's not working for me is it necessary to do flutter clean & flutter pub get after add this

t0uh33d commented 8 months ago

No, it is not. What exact issue are you facing? Is the screen going blank on launch?

mirza-d3x commented 8 months ago
image image

this is the issue I'm facing

mirza-d3x commented 8 months ago

No, it is not. What exact issue are you facing? Is the screen going blank on launch?

I added some screenshots of my issue could you check that

oukpov commented 8 months ago

for me,when i met this problem by added pakage, Example: flutter_inappwebview_web: ^1.0.8 and aba_payment: ^0.0.3 etc, becuase when i build web application ,i imported many package, like this i met it by pakage​ floor pakage

t0uh33d commented 8 months ago

@mirza-d3x which version of flutter_inappwebview_web are you using?

mirza-d3x commented 8 months ago

@mirza-d3x which version of flutter_inappwebview_web are you using?

Version 6.0.0

t0uh33d commented 8 months ago

@mirza-d3x

<script
  type="application/javascript"
  src="/assets/packages/flutter_inappwebview_web/lib/assets/web/web_support.js"
  defer
></script>

try to add this in <head> tag of your web/index.html
mirza-d3x commented 8 months ago

@mirza-d3x

<script
  type="application/javascript"
  src="/assets/packages/flutter_inappwebview_web/lib/assets/web/web_support.js"
  defer
></script>

try to add this in <head> tag of your web/index.html

I added this tag but it's not working

t0uh33d commented 8 months ago

Can you send a screenshot of Browser's console while running the app?

minhaj123456 commented 8 months ago

Rejecting promise with error: TypeError: Cannot set properties of undefined (setting 'nativeCommunication')

Akash-ptl commented 8 months ago

same Rejecting promise with error: TypeError: Cannot set properties of undefined (setting 'nativeCommunication')

kkalisz commented 8 months ago

Same here it looks that "web_support.js" is not present in the asset folder

   GET http://localhost:5300/assets/packages/flutter_inappwebview/assets/web/web_support.js net::ERR_ABORTED 404 (Not Found)

image

poringe commented 8 months ago

Same here it looks that "web_support.js" is not present in the asset folder

   GET http://localhost:5300/assets/packages/flutter_inappwebview/assets/web/web_support.js net::ERR_ABORTED 404 (Not Found)

image

change this assets/packages/flutter_inappwebview/assets/web/web_support.js

to this assets/packages/flutter_inappwebview_web/assets/web/web_support.js

add/edit this script in web/index.html

<script
  type="application/javascript"
  src="/assets/packages/flutter_inappwebview_web/assets/web/web_support.js"
  defer
></script>
Akash-ptl commented 8 months ago

`<!DOCTYPE html>

bulltrek

`

This is my index.html file

This is the Log

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:61657/sqEb_22LQhw=/ws Debug service listening on ws://127.0.0.1:61657/sqEb_22LQhw=/ws Debug service listening on ws://127.0.0.1:61657/sqEb_22LQhw=/ws The platformViewRegistry getter is deprecated and will be removed in a future release. Please import it from dart:ui_web instead. Rejecting promise with error: TypeError: Cannot set properties of undefined (setting 'nativeCommunication')

sebastianbuechler commented 8 months ago

Same here it looks that "web_support.js" is not present in the asset folder

   GET http://localhost:5300/assets/packages/flutter_inappwebview/assets/web/web_support.js net::ERR_ABORTED 404 (Not Found)

image

change this assets/packages/flutter_inappwebview/assets/web/web_support.js

to this assets/packages/flutter_inappwebview_web/assets/web/web_support.js

add/edit this script in web/index.html

<script
  type="application/javascript"
  src="/assets/packages/flutter_inappwebview_web/assets/web/web_support.js"
  defer
></script>

Thanks!

Here's the change for version >= 6.0.0 in the official docs: https://inappwebview.dev/docs/intro/#setup-web

PrashanthKumarDS-yourdost commented 8 months ago

Same here it looks that "web_support.js" is not present in the asset folder

   GET http://localhost:5300/assets/packages/flutter_inappwebview/assets/web/web_support.js net::ERR_ABORTED 404 (Not Found)

image

change this assets/packages/flutter_inappwebview/assets/web/web_support.js

to this assets/packages/flutter_inappwebview_web/assets/web/web_support.js

add/edit this script in web/index.html

<script
  type="application/javascript"
  src="/assets/packages/flutter_inappwebview_web/assets/web/web_support.js"
  defer
></script>

When i run the code in loclhost it is working fine but after giving the development its giving same error main.dart.js:4086 Uncaught TypeError: Cannot set properties of undefined (setting 'nativeCommunication') at b3H.$0 (main.dart.js:125678:46) at main.dart.js:53876:33 at b1v.a (main.dart.js:5428:62) at b1v.$2 (main.dart.js:47368:14) at Object.t (main.dart.js:5414:10) at b1Q.$0 (main.dart.js:53881:10) at main.dart.js:36275:16 at b1v.a (main.dart.js:5428:62) at b1v.$2 (main.dart.js:47368:14) at b0c.$1 (main.dart.js:47362:21)

ahmedmahershaaban commented 8 months ago

make sure you have added this package first in pubspec.yaml https://pub.dev/packages/flutter_inappwebview_web then add this line

Sahilkumar420 commented 7 months ago

<script type="application/javascript" src="/assets/packages/flutter_inappwebview_web/assets/web/web_support.js" defer

thank you its working
ravi2143 commented 7 months ago

this is working Thank you

Sahilkumar420 commented 7 months ago

Okays

On Sun, Apr 14, 2024 at 5:02 PM RAVI SHANKAR P @.***> wrote:

<script type="application/javascript" src="/assets/packages/flutter_inappwebview_web/assets/web/web_support.js" defer >

this is working Thank you

— Reply to this email directly, view it on GitHub https://github.com/pichillilorenzo/flutter_inappwebview/issues/1468#issuecomment-2054018172, or unsubscribe https://github.com/notifications/unsubscribe-auth/BBWDIDMHNADG7GRBKXVPSWDY5JSODAVCNFSM6AAAAAAS25ZN4GVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANJUGAYTQMJXGI . You are receiving this because you commented.Message ID: @.***>

bijaykumarpun commented 5 months ago

I vist here more than I'd like to admit. So I'm just going to copy-paste what worked for me.

  <script
      type="application/javascript"
      src="assets/packages/flutter_inappwebview_web/assets/web/web_support.js"
      defer
    ></script>
Sahilkumar420 commented 5 months ago

Great!

On Fri, May 24, 2024 at 4:57 PM Bijay Kumar Pun @.***> wrote:

I vist here more than I'd like to admit. So I'm just going to copy-paste what worked for me.

<script type="application/javascript" src="assets/packages/flutter_inappwebview_web/assets/web/web_support.js" defer

— Reply to this email directly, view it on GitHub https://github.com/pichillilorenzo/flutter_inappwebview/issues/1468#issuecomment-2129297216, or unsubscribe https://github.com/notifications/unsubscribe-auth/BBWDIDIRT4EGFZME2H7XPMLZD4PZ3AVCNFSM6AAAAAAS25ZN4GVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMRZGI4TOMRRGY . You are receiving this because you commented.Message ID: @.***>

GulTaskeen commented 5 months ago
<script
      type="application/javascript"
      src="/assets/packages/flutter_inappwebview_web/assets/web/web_support.js"
      defer
    ></script>

Thanks! Adding this in the head section worked for me

voxoid0 commented 4 months ago

I get the same error on version 6.0.0 (and flutter_inappwebview_web 1.0.8), tried updating the index.html with the above script element, as the last part of the <head> element, and still get the same error.

I see three instances of web_support.js in my project's folder, all in the "build" folder, e.g. /build/flutter_assets/packages/flutter_inappwebview_web/assets/web/web_support.js

Any other ideas?

robinwesterik commented 3 months ago

I get the same error on version 6.0.0 (and flutter_inappwebview_web 1.0.8), tried updating the index.html with the above script element, as the last part of the <head> element, and still get the same error.

I see three instances of web_support.js in my project's folder, all in the "build" folder, e.g. /build/flutter_assets/packages/flutter_inappwebview_web/assets/web/web_support.js

Any other ideas?

Bump, I currently have the same issue with those versions

Sahilkumar420 commented 3 months ago

<script type="application/javascript" src="/assets/packages/flutter_inappwebview_web/assets/web/web_support.js" defer > using this

On Mon, Jul 22, 2024 at 6:25 PM Robin Westerik @.***> wrote:

I get the same error on version 6.0.0 (and flutter_inappwebview_web 1.0.8), tried updating the index.html with the above script element, as the last part of the element, and still get the same error.

I see three instances of web_support.js in my project's folder, all in the "build" folder, e.g.

/build/flutter_assets/packages/flutter_inappwebview_web/assets/web/web_support.js Any other ideas? Bump, I currently have the same issue with those versions — Reply to this email directly, view it on GitHub , or unsubscribe . You are receiving this because you commented.Message ID: ***@***.***>
philvmx1 commented 3 months ago

Workaround if you're still having problems:

Remove defer from the script tag. If this loads after main.js you're still hosed. Let it parse inline so it can add the window.flutter_inappwebview object.

<script type="application/javascript"
src="/assets/packages/flutter_inappwebview_web/assets/web/web_support.js" ></script>

"If the defer attribute is set, it specifies that the script is downloaded in parallel to parsing the page, and executed after the page has finished parsing." (https://www.w3schools.com/tags/att_script_defer.asp)

Solution for the dev team: use some kind of event triggered by web_support.js script to set nativeCommunication rather than assuming window.flutter_inappwebview is already there.

tasibalint commented 2 months ago

I was looking for this for months... for me it worked well in debugger or on local flutter run -d edge.
BUT! on my server it didn't! why, because my https://server.com/web is the url for the default index, which nginx nincely forwards, but my index.html can not find <script type="application/javascript" src="/assets/packages/flutter_inappwebview_web/assets/web/web_support.js" ></script>
Solution:

  <!-- inAppWebView, for local web --->
<script type="application/javascript"
src="/assets/packages/flutter_inappwebview_web/assets/web/web_support.js" ></script>
  <!-- inAppWebView, for remote https://server.com/web --->
<script type="application/javascript"
src="/web/assets/packages/flutter_inappwebview_web/assets/web/web_support.js" ></script>

How I found this out: Under developertools/networkcalls looked for web_support.js which had a result of:

<meta http-equiv="refresh" content="0;url=https://server.com/web">

After fixing /web before the /assets it worked!

github-actions[bot] commented 1 month ago

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug and a minimal reproduction of the issue.