Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
2 tasks done
Binozo opened this issue Dec 11, 2022 · 48 comments
Labels
bug Something isn't working

Comments

@Binozo
Copy link

Binozo commented Dec 11, 2022

  • I have read the Getting Started section
  • I have already searched for the same problem

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>

@Binozo Binozo added the bug Something isn't working label Dec 11, 2022
@github-actions
Copy link

👋 @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
Copy link
Author

Binozo commented Dec 12, 2022

I am stupid

@ayushkadbe
Copy link

@Binozo What's the solution?

@Binozo
Copy link
Author

Binozo commented Dec 16, 2022

@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
Copy link

sugur commented Apr 17, 2023

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
Copy link

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
Copy link

xdkaka commented Apr 23, 2023

+1

@sugur
Copy link

sugur commented May 8, 2023

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
Copy link

oscardcd commented Sep 25, 2023

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
Copy link

t0uh33d commented Nov 28, 2023

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
Copy link

Mounix99 commented Jan 2, 2024

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

@sujit471
Copy link

sujit471 commented Feb 5, 2024

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

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
Copy link

it works for me, 10q

@sapar-io
Copy link

sapar-io commented Feb 27, 2024

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
Copy link

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

@mirza-d3x
Copy link

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
Copy link

t0uh33d commented Feb 27, 2024

@sapar-io @mirza-d3x

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

@mirza-d3x
Copy link

@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
Copy link

t0uh33d commented Feb 27, 2024

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

@mirza-d3x
Copy link

image image

this is the issue I'm facing

@mirza-d3x
Copy link

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
Copy link

oukpov commented Feb 28, 2024

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
Copy link

t0uh33d commented Feb 28, 2024

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

@mirza-d3x
Copy link

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

Version 6.0.0

@t0uh33d
Copy link

t0uh33d commented Feb 28, 2024

@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
Copy link

@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
Copy link

t0uh33d commented Feb 28, 2024

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

@minhaj123456
Copy link

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

@Akash-ptl
Copy link

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

@kkalisz
Copy link

kkalisz commented Feb 29, 2024

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
Copy link

poringe commented Mar 5, 2024

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
Copy link

`

<script defer src="/assets/packages/flutter_inappwebview_web/assets/web/web_support.js" type="application/javascript" ></script>
<!--
  If you are serving your web app in a path other than the root, change the
  href value below to reflect the base path you are serving from.

  The path provided below has to start and end with a slash "/" in order for
  it to work correctly.

  For more details:
  * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

  This is a placeholder for base href that will be replaced by the value of
  the `--base-href` argument provided to `flutter build`.
-->
<base href="$FLUTTER_BASE_HREF">

<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta content="A new Flutter project." name="description">

<!-- iOS meta tags & icons -->
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="bulltrek" name="apple-mobile-web-app-title">
<link href="icons/Icon-192.png" rel="apple-touch-icon">

<!-- Favicon -->
<link href="favicon.png" rel="icon" type="image/png"/>

<title>bulltrek</title>
<link href="manifest.json" rel="manifest">

<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = null;


</script>
<!-- This script adds the flutter initialization JS code -->
<script defer src="flutter.js"></script>
<style>
  .container {
    width: 100vw;
    height: 100vh;
    display: flex; /* Default Axis is X*/
    justify-content: center; /* Main Axis */
    align-items: center; /* Cross Axis */
  }
  .indicator{
    width: 6vw;
  }


</style>
<script> window.addEventListener('load', function(ev) { // Download main.dart.js _flutter.loader.loadEntrypoint({ serviceWorker: { serviceWorkerVersion: serviceWorkerVersion, }, onEntrypointLoaded: function(engineInitializer) { engineInitializer.initializeEngine().then(function(appRunner) { appRunner.runApp(); }); } }); }); </script> `

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
Copy link

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
Copy link

PrashanthKumarDS-yourdost commented Mar 7, 2024

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
Copy link

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

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

@Sahilkumar420
Copy link

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

@ravi2143
Copy link

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

this is working Thank you

@Sahilkumar420
Copy link

Sahilkumar420 commented Apr 15, 2024 via email

@bijaykumarpun
Copy link

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
Copy link

Sahilkumar420 commented May 25, 2024 via email

@GulTaskeen
Copy link

GulTaskeen commented May 31, 2024

<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
Copy link

voxoid0 commented Jul 10, 2024

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. <my_project_folder>/build/flutter_assets/packages/flutter_inappwebview_web/assets/web/web_support.js

Any other ideas?

@robinwesterik
Copy link

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. <my_project_folder>/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
Copy link

Sahilkumar420 commented Jul 23, 2024 via email

@philvmx1
Copy link

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
Copy link

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!

Copy link

github-actions bot commented Oct 3, 2024

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Oct 3, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests