Problem/Motivation

After upgrading to drupal core 10.1.x that is many errors in the console like

Uncaught TypeError: document.querySelector(...) is null
and 

    Uncaught TypeError: Drupal.toolbar is undefined

And this makes the toolbar misplaced.
It seems that inside the Toolbar.js file, there is a missing class 'toolbar-oriented' in the toolbar:

if (isOriented) {
      document
        .querySelector('#toolbar-administration')
        .classList.add('toolbar-oriented');
    }

I could reproduce this issue using landing pages builder with layout builder.
But also document.querySelector('#toolbar-administration').classList.add('toolbar-oriented') is giving null using Claro admin theme.

Steps to reproduce

  1. Use a theme or module that always requires the toolbar/toolbar library
  2. Log in as a user who has permission to see a horizontal toolbar
  3. Log out again

The error now appears because the Session Storage still contains a value for "Drupal.toolbar.toolbarState". This object contains information about the state of the toolbar, even though the anonymous user doesn't see a toolbar. Other parts of Drupal then act upon this information, assuming a toolbar must be present.

Usually, this doesn't happen because the toolbar.js file is only included when the toolbar is actually displayed. Unless some theme or module of course lists it as a dependency and thus always includes the file.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#19 3456835-nr-bot_s8dxqms7.txt853 bytesneeds-review-queue-bot
#18 3456835-media-library-js-error-with-hidden-toolbar.patch723 bytessiegrist
#9 3456835-toolbarjs-document-querySelector-error.patch577 byteszahord
#6 3456835-Uncaught-TypeError-documentquerySelector-is-null.patch374 bytesandreadruiz
#4 toolbar js errors querySelector.png347.03 KBandreadruiz

Issue fork drupal-3456835

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

andreadruiz created an issue. See original summary.

andreadruiz’s picture

andreadruiz commented
Title: document.querySelector is null » Uncaught TypeError: document.querySelector is null
andreadruiz’s picture

andreadruiz commented
Issue summary: View changes
andreadruiz’s picture

andreadruiz commented
Issue summary: View changes
StatusFileSize
new toolbar js errors querySelector.png347.03 KB
cilefen’s picture

cilefen commented
Issue tags: -toolbar +Needs steps to reproduce, +JavaScript

Can you please update the issue summary with instructions to build a site that exhibits this bug in Drupal 10.3?

Could you include the complete JavaScript stack trace too?

andreadruiz’s picture

andreadruiz commented
Status: Active » Needs review
Issue tags: -JavaScript +JavaScript
StatusFileSize
new 3456835-Uncaught-TypeError-documentquerySelector-is-null.patch374 bytes
andreadruiz’s picture

andreadruiz commented
Issue summary: View changes
Issue tags: -JavaScript +JavaScript
cilefen’s picture

cilefen commented
Version: 10.1.x-dev » 11.x-dev
Status: Needs review » Needs work
Issue tags: -JavaScript +JavaScript

Please create a merge request.

zahord’s picture

zahord commented
StatusFileSize
new 3456835-toolbarjs-document-querySelector-error.patch577 bytes

I've seen a similar error in toolbar.js file where `document.querySelector` is not defined, so I added a validation to avoid the error.

zahord’s picture

zahord commented
Status: Needs work » Needs review
Issue tags: -JavaScript +JavaScript
smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work
Issue tags: -JavaScript +JavaScript

Issue summary appears incomplete and missing steps.

Also all fixes should be in an MR against 11.x please

ammaletu’s picture

ammaletu commented
Issue summary: View changes
Issue tags: -Needs steps to reproduce

I just ran into this on Drupal 10.2.8. It seems to happen always once you logged in as a user who can see the toolbar and then log out again. After comparing this with a clean Drupal 10.2 installation with Claro theme, I found the source of the problem: A colleague required the "toolbar/toolbar" library as a dependency in our theme, unconditionally. This way, the toolbar.js file was always loaded, even when no toolbar was being displayed.

I added steps to reproduce in the issue summary. This is more or less a user error, but maybe it helps somebody else in the future. Of course, it would be nice if there was a way to clear this session storage value when switching sessions. Maybe add something after the "Add anti-flicker functionality." block, starting in toolbar.js on line 241. If "#toolbar-administration" is not a part of the page, can we then delete the session storage value? This would help in cases where this library is loaded withput a toolbar.

mdsohaib4242’s picture

mdsohaib4242 commented

To fix this issue, update Toolbar.js to first check if #toolbar-administration actually exists before trying to apply any classes to it. This way, the script won’t attempt to modify elements that aren’t there, something like this

const toolbarElement = document.querySelector('#toolbar-administration');
if (toolbarElement && isOriented) {
  toolbarElement.classList.add('toolbar-oriented');
}
anybody’s picture

anybody
Primary language German
Location Porta Westfalica
commented

I can also confirm the issue. Could someone maybe turn the patch into a MR and follow the steps described in the comments? Thanks!

liam morland made their first commit to this issue’s fork.

liam morland opened merge request !13296

liam morland’s picture

liam morland
Primary language English
Location Ontario, CA 🇨🇦
commented

I ported the patch in #9, but I'm not sure it will do anything anymore since there is now a question mark after the querySelector() call.

siegrist’s picture

siegrist
Primary language German
commented
Status: Needs work » Needs review
StatusFileSize
new 3456835-media-library-js-error-with-hidden-toolbar.patch723 bytes

The following fix works for us. We have run into this issue since 11.2. and in combination with blokk.li because it uses the backend in iframes, and in those, does not render the admin toolbar.

needs-review-queue-bot’s picture

needs-review-queue-bot commented
Status: Needs review » Needs work
StatusFileSize
new 3456835-nr-bot_s8dxqms7.txt853 bytes

The Needs Review Queue Bot tested this issue. It fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

pfrenssen’s picture

pfrenssen
Location Sofia
commented
Status: Needs work » Closed (duplicate)

I reviewed the MR but it looks like the problem was already fixed. I checked the git log and indeed it was fixed recently in #3536350: Fix a JS error when toolbar element is missing. Marking as a duplicate.

Now that this issue is closed, please review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, please credit people who helped resolve this issue.