Exception with Flutter 3.10

[cksoft0807]

with flutter 3.10 i get this exception on startup:

TypeError: Cannot set properties of null (setting 'AbstractExpandedDecoder') https://unpkg.com/@zxing/library@0.19.1 15:288561 https://unpkg.com/@zxing/library@0.19.1 1:69 https://unpkg.com/@zxing/library@0.19.1 1:206

reproduce: Add mobile_scanner to pubspec.yaml

[MBjoern]

I observe the same thing, ... additionally, handling the permissions doesn't work on web anymore. The library appears to be not able to gather the permissions

You get a warning saying ... even if the permissions are manually added in the browser's page settings.

mobile_scanner: MobileScannerException: code permissionDenied, message: TypeError: Cannot read properties of undefined (reading 'BrowserMultiFormatReader')

Tested on chrome and safari browsers

[Amphaal]

https://github.com/juliansteenbakker/mobile_scanner/pull/376#issuecomment-1334897696

Seems like some king of regression happened outside of the package, works again after enforcing library early-loading in index.html.

Please note I migrated this specific project to Dart 3 / Flutter 3.10 today.

[Nephim]

Im having the same problem, did you make it work?

What do you mean eager loading? Did you add https://unpkg.com/@zxing/library@0.19.1/umd/index.min.js as a script to index.html or what?

[Amphaal]

Im having the same problem, did you make it work?

What do you mean eager loading? Did you add https://unpkg.com/@zxing/library@0.19.1/umd/index.min.js as a script to index.html or what?

Yes, that's exactly the workaround. This lib since 3.0.0 include a classical automatic script injection (à-la-Firebase), which for unknown reasons does make at least Chrome's V8 throw an exception as it tries to parse the zxing lib file. Hardcoding the script dependency as recommanded < 3.0.0 (cf my pinned comment) does fix the issue for me. Let me know if it also works for you !

[Solutionstbd]

Yes. the following script added to my web/index.html file allows the scanner to work for me.

<script type="text/javascript" src="https://unpkg.com/@zxing/library@0.19.1/umd/index.min.js"></script>

Thanks for the easy work around!

[gslender]

So is this likely to be resolved some other way, or is the perm fix to add the script to the HTML index file for flutter web apps? I don't use the mobile scanner package on the web, but its included in the pubspec because, like all flutter projects, shares the same code base of the iOS/Android app that does.

[gslender]

Would seem, that even with including the workaround above, I still have the console throw the type error shown in the OP. So not sure what the workaround solves, as I'm still seeing errors being produced.

[Amphaal]

Would seem, that even with including the workaround above, I still have the console throw the type error shown in the OP. So not sure what the workaround solves, as I'm still seeing errors being produced.

The current implementation is not able to detect the absence or presence of hard-coded script tag of the lib, hence still trying to inject it, resulting in an error being thrown. But the workaround still works !

[aliaksei-liavonik]

After adding to the index.html "Uncaught TypeError: Cannot set properties of null (setting 'AbstractExpandedDecoder')" error still persists, any updates?

[Amphaal]

After adding to the index.html "Uncaught TypeError: Cannot set properties of null (setting 'AbstractExpandedDecoder')" error still persists, any updates?

cf https://github.com/juliansteenbakker/mobile_scanner/issues/622#issuecomment-1557052785, if the error still showing is bothering you: in the meantime, you can use my fork https://github.com/Amphaal/mobile_scanner instead of the official package.

Please note that I am taking advantage of a newer version of Zxing-js, so the lib to be manually added to index.html would be:

<script type="text/javascript" src="https://unpkg.com/@zxing/library@0.20.0/umd/index.min.js"></script>

[fhuonder]

@Amphaal I changed my pubspec to use your fork and now I get this error

TypeError: Cannot read properties of null (reading 'DataMatrixSymbolShapeHint')
https://unpkg.com/@zxing/library@0.20.0 1:286818  <fn>
https://unpkg.com/@zxing/library@0.20.0 1:69      <fn>
https://unpkg.com/@zxing/library@0.20.0 1:206     <fn>

Any hints?

[Henrik84]

@Amphaal I changed my pubspec to use your fork and now I get this error

TypeError: Cannot read properties of null (reading 'DataMatrixSymbolShapeHint')
https://unpkg.com/@zxing/library@0.20.0 1:286818  <fn>
https://unpkg.com/@zxing/library@0.20.0 1:69      <fn>
https://unpkg.com/@zxing/library@0.20.0 1:206     <fn>

Any hints?

Got the same error ... :(

[Amphaal]

@Henrik84 @fhuonder the only way I could reproduce your issue is by NOT adding <script type="text/javascript" src="https://unpkg.com/@zxing/library@0.20.0"></script> in my web/index.html > html > head.

Please try adding that line, let me know if that was the issue.

[fhuonder]

I have it working now. I included the following in my head <script type="text/javascript" src="https://unpkg.com/@zxing/library@0.20.0/umd/index.min.js"></script>. After chaning to your line it works. Thanks.

[Henrik84]

Still remains the error. I added your repo like below dependencies: mobile_scanner: git: url: https://github.com/Amphaal/mobile_scanner.git

and also added the <script type="text/javascript" src="https://unpkg.com/@zxing/library@0.20.0/umd/index.min.js"></script> to the web/index.html header but the error remains :(

I also tried flutter clean without success. The error TypeError: Cannot read properties of null (reading 'DataMatrixSymbolShapeHint') https://unpkg.com/@zxing/library@0.20.0 1:286818 <fn> https://unpkg.com/@zxing/library@0.20.0 1:69 <fn> https://unpkg.com/@zxing/library@0.20.0 1:206 <fn> still remains.

[markbreuss]

Hi @juliansteenbakker,

we also need this issue fixed as soon as possible. Injecting the package script into the head did unfortunetely not fix the issue for us.

If anyone has a workaround let me know.

Great package by the way and left a tip for you! -Mark

[realviewch]

This works on my side:

pubspec mobile_scanner: ^3.0.0

web/index.html add <script type="text/javascript" src="https://unpkg.com/@zxing/library@0.20.0/umd/index.min.js"></script> before/above <base href="$FLUTTER_BASE_HREF">

Still get the error: https://unpkg.com/@zxing/library@0.19.1 15:288561 <fn> https://unpkg.com/@zxing/library@0.19.1 1:69 <fn> https://unpkg.com/@zxing/library@0.19.1 1:206 <fn> but it works like a charm :)

[Pablo-Aldana]

I have tried with version 3.2.0 and version 3.0.0 as suggested. Also with @Amphaal git and with the different versions of the library 0.20.0 and 0.19.1 and nothing worked, I still have the issue and the app isn't working on Chrome

this is my html

<!DOCTYPE html>
<html>

<head>
  <!--
    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 name="description" content="A new Flutter project.">

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

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

  <title>vive_events_manager</title>
  <link rel="manifest" href="manifest.json">
  <script type="text/javascript" src="https://unpkg.com/@zxing/library@0.20.0/umd/index.min.js"></script>

  <!-- <script type="text/javascript" src="https://unpkg.com/@zxing/library@0.19.1/umd/index.min.js"></script> -->

  <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 src="flutter.js" defer></script>

</head>

<body>
  <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>
</body>

</html>

[pom11]

[✓] Flutter (Channel master, 3.12.0-7.0.pre.8, on macOS 13.4 22F66 darwin-x64, locale en-RO)
    • Flutter version 3.12.0-7.0.pre.8 on channel master at /Users/desac/git-clones/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 323c296922 (5 days ago), 2023-06-19 03:24:11 -0400
    • Engine revision 280491d4cc
    • Dart version 3.1.0 (build 3.1.0-227.0.dev)
    • DevTools version 2.24.0

tried all suggestions from above and is not working on release or in debug.

The platformViewRegistry getter is deprecated and will be removed in a future release. Please import it from `dart:ui_web` instead.
The platformViewRegistry getter is deprecated and will be removed in a future release. Please import it from `dart:ui_web` instead.
TypeError: Cannot set properties of null (setting 'AbstractExpandedDecoder')
https://unpkg.com/@zxing/library@0.19.1 15:288561  <fn>
https://unpkg.com/@zxing/library@0.19.1 1:69       <fn>
https://unpkg.com/@zxing/library@0.19.1 1:206      <fn>

[pom11]

using the fork https://github.com/Amphaal/mobile_scanner.git with the above flutter version i get a new error

library@0.20.0:1 Uncaught TypeError: Cannot read properties of null (reading 'DataMatrixSymbolShapeHint')
    at library@0.20.0:1:286818
    at library@0.20.0:1:69
    at library@0.20.0:1:206

[diegomors]

The fork worked for me, but I needed to use this in the index.html

<script src="https://unpkg.com/@zxing/library@0.20.0"></script>
<script src="https://unpkg.com/@zxing/library@0.20.0/umd/index.min.js"></script>

[fhuonder]

@juliansteenbakker when will this fix be available from pub?