document.querySelector is null

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?

Please create a merge request.

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.

Issue summary appears incomplete and missing steps.

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

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.

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');
}