WebKitWebViewController.runJavaScriptReturningResult This exception occured every time in app

[abdelrahman-abied]

[ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: Invalid argument(s): Result of JavaScript execution returned a null value. Use runJavascript when expecting a null return value.
#0 WebKitWebViewController.runJavaScriptReturningResult (package:webview_flutter_wkwebview/src/webkit_webview_controller.dart:425:7)

[Shahxad-Akram]

Could you show, how are you using it, and which version are you using?

[dmseo1]

I have a same error with iOS in both virtual and physical devices. It has not occured in Android.
The TeX looks fine after the error is shown though, but it's just a little inconvenient because I have to skip the error during debugging every time.

My flutter_tex version is 4.0.6.

Here is my flutter doctor.

[✓] Flutter (Channel stable, 3.16.5, on macOS 14.1.1 23B81 darwin-arm64, locale ko-KR)
    • Flutter version 3.16.5 on channel stable at /opt/homebrew/Caskroom/flutter/3.10.0/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 78666c8dc5 (2 weeks ago), 2023-12-19 16:14:14 -0800
    • Engine revision 3f3e560236
    • Dart version 3.2.3
    • DevTools version 2.28.4

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    • Android SDK at /Users/seodongmin/Library/Android/sdk
    • Platform android-33, build-tools 33.0.2
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C65
    • CocoaPods version 1.12.1

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

[✓] Android Studio (version 2022.2)
    • 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 17.0.6+0-17.0.6b802.4-9586694)

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

[✓] Connected device (6 available)
    • SM M205N (mobile)      • ***(physical device)                          • android-arm64  • Android 10 (API 29)
    • My iPad (mobile)  • ***(physical device)            • ios            • iOS 17.1.2 21B101
    • My Phone (mobile)       • ***(physical device)            • ios            • iOS 17.1.2 21B101
    • iPhone 15 Pro (mobile) • ***(virtual device) • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-17-0 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 14.1.1 23B81
      darwin-arm64
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome
      119.0.6045.105

[✓] Network resources
    • All expected network resources are available.

Here is my sample code.

TeXView(
        renderingEngine: TeXViewRenderingEngine.katex(),
        fonts: [
          TeXViewFont(
            src: 'assets/fonts/NanumMyeongjo.otf',
            fontFamily: 'NanumMyeongjo',
          ),
        ],
        style: TeXViewStyle.fromCSS(
          "font-family: 'NanumMyeongjo'; line-height: 1.6; overflow: hidden;",
        ),
        child: TeXViewColumn(
          children: [
            TeXViewDocument(
              r"""
                $$ \frac { -b \pm \sqrt{ b^2 - 4ac }} { 2a }  $$
              """,
            ),
          ],
        ),
      );

[MorosophDude]

Hello @shah-xad, I am also facing this issue.

First time user, so I cloned this project and ran example to understand it. Please see the attached clip.

Screen.Recording.2024-01-08.at.14.24.53.mov

This happens in every example (regardless of the selected rendering engine), couldn't show it all because damn GitHub limits video size to 10MB. :(

BTW this is my flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.16.5, on macOS 14.2.1 23C71 darwin-arm64, locale en-NP)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 15.1)
[✗] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google
    Chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Android Studio (version 2023.1)
[✓] VS Code (version 1.85.1)
[✓] Connected device (3 available)
    ! Error: Browsing on the local area network for iPhone. Ensure the device is unlocked and attached with a cable or
      associated with the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)
[✓] Network resources

! Doctor found issues in 1 category.

Oh, 1 more things, this is how I use this package in my app.

import 'package:connect/widgets/loading_animation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_tex/flutter_tex.dart';

class MathFormulaViewer extends StatelessWidget {
  const MathFormulaViewer({super.key, required this.text});

  final String text;

  @override
  Widget build(BuildContext context) {
    return TeXView(
      child: TeXViewDocument(text),
      loadingWidgetBuilder: (_) => const LoadingAnimation(),
      renderingEngine: const TeXViewRenderingEngine.katex(),
    );
  }
}

This has to be the simplest usage (without any TeXViewColumn, TeXViewStyle, ...) and I am still getting this issue.

Hope this helps you diagnose this issue. Please let me know if you need anything else from me.

[flexboni]

Is any updates?

[rmshin]

I also ran into the issue on iOS with flutter_tex == 4.0.6. After digging around a bit, it seems as if the problem is getting triggered here where a return value is expected from calling this initView function despite nothing being returned.

I made a local hot fix by changing the following:

void _initTeXView() {
    if (_pageLoaded && getRawData(widget) != _lastData) {
      if (widget.loadingWidgetBuilder != null) _height = minHeight;
      _controller
          .runJavaScriptReturningResult("initView(${getRawData(widget)})");
       ...
    }

to

void _initTeXView() {
    if (_pageLoaded && getRawData(widget) != _lastData) {
      if (widget.loadingWidgetBuilder != null) _height = minHeight;
      _controller
          .runJavaScript("initView(${getRawData(widget)})");
       ...
    }

in the linked code above. Not sure if this is the right long-term solution, but posting here for anyone who's currently blocked by this issue as I am.

[charbeltechlab]

any updates on this issue?

[vvviettt]

I also ran into the issue on iOS with flutter_tex == 4.0.6. After digging around a bit, it seems as if the problem is getting triggered here where a return value is expected from calling this initView function despite nothing being returned.

I made a local hot fix by changing the following:

void _initTeXView() {
    if (_pageLoaded && getRawData(widget) != _lastData) {
      if (widget.loadingWidgetBuilder != null) _height = minHeight;
      _controller
          .runJavaScriptReturningResult("initView(${getRawData(widget)})");
       ...
    }

to

void _initTeXView() {
    if (_pageLoaded && getRawData(widget) != _lastData) {
      if (widget.loadingWidgetBuilder != null) _height = minHeight;
      _controller
          .runJavaScript("initView(${getRawData(widget)})");
       ...
    }

in the linked code above. Not sure if this is the right long-term solution, but posting here for anyone who's currently blocked by this issue as I am.

Thank you so much
It worked for me.