Uncaught TypeError: Cannot read properties of null

Created on 22 September 2021, about 3 years ago
Updated 8 October 2024, 2 months ago

Problem/Motivation

When AdvAgg module's setting "Enable preprocess on all JS" is enabled, the following JS error is thrown in the browser console.log:
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

It's referring to line 10 in etracker.js:
document.querySelector('body').addEventListener( ... )
Somehow document.querySelector('body') seems to be not available yet (it returns null), so it fails to attach the event listener.

Steps to reproduce

Steps to reproduce

  1. Install etracker beta2 and AdvAgg (8.x-4.1) and advagg_mod submodule
  2. Move to config page at /admin/config/development/performance/advagg/mod
  3. Enable Enable preprocess on all JS
  4. Enable Move all external scripts to the top of the execution order
  5. Clear caches
  6. Check the browser console log on a page that you're tracking*

* I'm tracking only anonymous users, so I had to test it being logged out, ie. in an incognito browser window.

Proposed resolution

I quickly tested an idea and could fix it by attaching it directly to the document, so that line 10 looks now like this:
document.addEventListener(e, function (event) {

That worked well for me.

PS: beta2 is not available in the issues' "version" select list yet, so I selected dev as the targeted "version", in case you were wondering.

🐛 Bug report
Status

Active

Version

3.0

Component

Code

Created by

🇩🇪Germany design.er

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇩🇪Germany sunlix Wesel

    Hey there,

    I just came back to this because I was thinking if this is outdated.

    I applied all settings from the screenshot and now I can reproduce this error.
    The error occurs by set the config "Move all external scripts to the top of the execution order".
    If you disable this kind of forcing the script order no error occurs.

    Do you have some insights why do you have this setting enabled and by what parameter a script is considered as "external"?
    I try to understand in what way we could manage the script to be "unbreakable" if there is some external forces involved.

  • 🇩🇪Germany sunlix Wesel

    Okay got it. We extended the library definition of etracker/etracker.js if event tracking is enabled in the settings.
    This adds the etracker.js to our library. But it is affected by the "force moving external scripts" settings from advagg.
    The source of the problem is not the advagg setting but the more the interaction with all library definitions and the removal of the defer attribute, which is mandatory.

    The solution

    We split the library definition of the vendor script and our default event tracking into two seperate one with dependency definition.
    So we can guarantee to script order will be stable and the script will work without defer

  • 🇩🇪Germany Anybody Porta Westfalica

    Thanks @sunlix. I'm a bit afraid of removing the defer, because it might degrade performance?
    https://pagespeedchecklist.com/async-and-defer

    Don't have the time to think about it too much now, so just a warning so far.

  • 🇩🇪Germany sunlix Wesel

    @Anybody
    I should not have a high impact. The default Drupal js library behavior is already "load the scripts and the end of the <body>" So it is nearly at DOMContentLoaded. In default Drupal installation with olivero I get in both cases a Lighthouse Performance of 100%.
    In comparision with matomo, they load their event tracking without defer too.

  • Pipeline finished with Skipped
    2 months ago
    #303968
    • sunlix committed 7491f991 on 8.x-3.x
      Issue #3238489 by sunlix, design.er: Uncaught TypeError: Cannot read...
  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024