TypeError in onloadwff using object for SVG

Question

I'm trying to display SVG-images on a webpage. The SVG image contain a custom font. To get Chrome (and other browsers) to load the WebFont used in the SVG I have added the following in the SVG.

<defs>
    <style>
        @import url('https://fonts.googleapis.com/css?family=<font>');
    </style>
</defs>

The image is added to the HTML-page by adding an object element. This works as the font is loaded and the text in the image is rendered with the defined WebFont in both Chrome and Firefox.

But in Chrome the following error is logged in the console:

Uncaught (in promise) TypeError: Cannot read property 'querySelectorAll' of null
    at e.getInputs (onloadwff.js:71)
    at e.<anonymous> (onloadwff.js:71)
    at onloadwff.js:71
    at Object.next (onloadwff.js:71)
    at a (onloadwff.js:71)

I have tried to search for similar issues but have come up short in finding an answer. Any ideas on what might be the issue in Chrome or how I can investigate the issue further?

Answer 1

I got same issue as this one and the root cause was from Chrome extension LastPass. Removing it worked for me.

the bug is reported: https://forums.lastpass.com/viewtopic.php?f=12&t=323095&p=1080525&hilit=Cannot+read+property+%27querySelectorAll%27+of+null#p1080525

Hope it will help.

Answer 2

Also encountered this issue and for me it was also LastPass that caused it.

If you don't want to remove or disable LastPass you can right-click the error in the console and choose to hide the error messages coming from that script.