Flutter Web : Cannot read property 'Symbol(dartx.postMessage)' of null.

I am having a HtmlElementView which will have Html content to render it, so when i open it first time its works fine as expected when i go back and open again its showing error.Here i have attached the reproducing example repo https://github.com/ThalapathySiva/flutter_html_reproducing_repo which will have two buttons on home page first click any one of those it will open the html render screen and it will work first time just go back and click the button again it will throw error without rendering and if you go back and refresh the whole window and tapped the button again it works this is the scenario by the way the contentwindow is getting null thats the issue.How can we handle this case. Thank you

Error :

TypeError: Cannot read property 'Symbol(dartx.postMessage)' of null
at http://localhost:55601/dart_sdk.js:33443:33
at internalCallback (http://localhost:55601/dart_sdk.js:25104:11)

I can reproduce this on latest stable channel.

logs

Running "flutter pub get" in flutter_html_reproducing_repo...
Launching lib/main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome...
Debug service listening on ws://127.0.0.1:60866/jbnq1PkMUck=/ws

Running with unsound null safety
For more information see https://dart.dev/null-safety/unsound-null-safety
Debug service listening on ws://127.0.0.1:60866/jbnq1PkMUck=/ws
[object Window]Content
[object Window]Content
TypeError: Cannot read property 'Symbol(dartx.postMessage)' of null
    at http://localhost:60754/packages/flutter_application_1/main.dart.lib.js:434:39
    at http://localhost:60754/dart_sdk.js:33443:33
    at internalCallback (http://localhost:60754/dart_sdk.js:25104:11)
[object Window]Content
[object Window]Content
[object Window]Content
[object Window]Content
TypeError: Cannot read property 'Symbol(dartx.postMessage)' of null
    at http://localhost:60754/packages/flutter_application_1/main.dart.lib.js:434:39
    at http://localhost:60754/dart_sdk.js:33443:33
    at internalCallback (http://localhost:60754/dart_sdk.js:25104:11)

flutter doctor -v

[✓] Flutter (Channel stable, 2.0.2, on macOS 11.2.2 20D80 darwin-x64, locale en-AO)
    • Flutter version 2.0.2 at /Users/pedromassango/Code/flutter_stable
    • Framework revision 8962f6dc68 (4 days ago), 2021-03-11 13:22:20 -0800
    • Engine revision 5d8bf811b3
    • Dart version 2.12.1

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/pedromassango/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • ANDROID_HOME = /Users/pedromassango/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[!] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.4, Build version 12D4e
    ! CocoaPods 1.9.3 out of date (1.10.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

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

[✓] Android Studio (version 4.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 1.8.0_242-release-1644-b3-6915495)

[✓] IntelliJ IDEA Community Edition (version 2020.3.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 54.0.3
    • Dart plugin version 203.7759

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 11.2.2 20D80 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 89.0.4389.82

! Doctor found issues in 1 category.

Any update on this ?

This is next in my queue after #80524

@ditman

Thanks for your reply @ditman Cool

+1 Any update on this?

Currently working on this, I'll update this ticket tomorrow with more info!

main.dart

import 'package:flutter/material.dart';
import 'package:universal_html/html.dart' as html;
import 'package:universal_html/js.dart' as js;
import 'fake_ui.dart' if (dart.library.html) 'real_ui.dart' as ui;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHome(),
    );
  }
}

class HtmlDisplay extends StatefulWidget {
  final String htmlText;

  const HtmlDisplay(this.htmlText);
  @override
  _HtmlDisplayState createState() => _HtmlDisplayState();
}

class _HtmlDisplayState extends State<HtmlDisplay> {
  js.JsObject connector;
  String createdViewId = 'map_element';
  html.IFrameElement element;

  @override
  void initState() {
    js.context["connect_content_to_flutter"] = (js.JsObject content) {
      print(content.toString() + "Content");
      connector = content;
    };
    element = html.IFrameElement()
      ..src = "/assets/view_editor.html"
      ..style.border = 'none';
    ui.platformViewRegistry
        .registerViewFactory(createdViewId, (int viewId) => element);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: showView()),
    );
  }

  Widget showView() {
    Future.delayed(const Duration(seconds: 2), () {
      if (widget.htmlText != null && connector != null) {
        connector.callMethod(
          'getViewValue',
        ) as String;
        element.contentWindow.postMessage({
          'id': 'question',
          'msg': widget.htmlText,
        }, "*");
      }
    });
    return SizedBox(
      height: 340,
      child: HtmlElementView(
        viewType: createdViewId,
      ),
    );
  }
}

class MyHome extends StatefulWidget {
  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  String htmlText = """<!DOCTYPE html>
<html>
<body>

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser 
ignores it.
</p>

<p>
This paragraph
contains      a lot of spaces
in the source     code,
but the    browser 
ignores it.
</p>

<p>
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.
</p>

</body>
</html>
""";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: 2,
        itemBuilder: (BuildContext context, int index) {
          return ElevatedButton(
            onPressed: () {
              Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => HtmlDisplay(htmlText)));
            },
            child: Text('Tap'),
          );
        },
      ),
    );
  }
}

assets/view_editor.html (iframe contents)

<!DOCTYPE html>
<html>
   <title>Sample</title>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
      <style>
         .hide {
            display: none im !important;
         }
      </style>
   </head>
   <body>
      <div id="questionView"></div>
      <div id="explanationView"></div>
      <div id="referenceView"></div>
      <div id="caseView"></div>
      <div id="abstractionView"></div>
      <script>
            parent.connect_content_to_flutter && parent.connect_content_to_flutter(window)
            function getViewValue(){
            var justHtml = document.getElementById('questionView').innerHTML;
            if(justHtml!=null) {
               return justHtml;
            }
            }
                  window.addEventListener("message", (message) => {
                  if (message.data.id === "question") {
                  document.getElementById('questionView').innerHTML= message.data.msg;
                  }
                  if (message.data.id === "reference") {
                  document.getElementById('referenceView').innerHTML= message.data.msg;
                  }
                  if (message.data.id === "explanation") {
                  document.getElementById('explanationView').innerHTML= message.data.msg;
                  }
                  if (message.data.id === "case") {
                  document.getElementById('caseView').innerHTML= message.data.msg;
                  } if (message.data.id === "abstract") {
                  document.getElementById('abstractionView').innerHTML= message.data.msg;
                  }
                }) 
      </script>
   </body>
</html>

The non-minified error is not much more helpful:

Uncaught TypeError: Cannot read property 'postMessage' of null
    at _DOMWindowCrossFrame.postMessage$2 (html_dart2js.dart:40346)
    at Object.postMessage$2$x (main.dart.js:15080)
    at _HtmlDisplayState_showView_closure.call$0 (main.dart:60)
    at Future_Future$delayed_closure.call$0 (future.dart:315)
    at _TimerImpl_internalCallback.call$0 (async_patch.dart:131)
    at invokeClosure (js_helper.dart:1805)
    at js_helper.dart:1839

Diving deeper.

I'll keep this issue open, so I can bring this up with the team some time next week.

I think we should re-evaluate that "silent failure" of the registerViewFactory method. IMO the API would be more usable if it allowed overriding the factory every time you call registerFactory, or we failed with a more explicit assertion error.

(In any case, this'd be a breaking change on the current API and would need to be released carefully 😄)

@ditman

@ditman Thanks for the possible solution, I have tried it works fine but the only problem that occurs is if I resize the window the view is not displaying it got disappeared, any solution for this?

And thanks for your valuable time.

@ThalapathySiva what flutter channel are you using? I think the issue you're describing should be resolved in master.

@ditman

@ditman I haven't checked the master channel yet, I am using the latest stable channel.

@ThalapathySiva the fixes haven't been published to Stable definitely, but they might be available in beta. Please try a newer channel (or wait for the next stable release!)

@ditman

@ditman Sure man thank you.

Navigation Menu

Repository navigation

Flutter Web : Cannot read property 'Symbol(dartx.postMessage)' of null. #78294

1 remaining item

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Flutter Web : Cannot read property 'Symbol(dartx.postMessage)' of null. #78294

Description

Activity

pedromassangocode commented on Mar 16, 2021

sivaram16 commented on May 2, 2021

ditman commented on May 3, 2021

sivaram16 commented on May 4, 2021

vineeshvk commented on Jul 22, 2021

ditman commented on Jul 28, 2021

ditman commented on Jul 29, 2021

1 remaining item

ditman commented on Jul 29, 2021

sivaram16 commented on Aug 11, 2021

ditman commented on Aug 11, 2021

sivaram16 commented on Aug 12, 2021

ditman commented on Aug 12, 2021

sivaram16 commented on Aug 13, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions