I upgraded Drupal Core from 10.1.8 to 10.3.2( and also 10.3.5), after that, I have an issue of console error.
Browser console says:
navigation-utils.js?v=10.3.5:147:16 Uncaught TypeError: Cannot read properties of null (reading 'classList')
I have this error only when Aggregate JS option is activated. And I debug this issue and found that below code is tried to load before DOM is created, so the body is null.
function getRootMargin() {
let rootMarginTop = 72;
const { body } = document;
if (body.classList.contains('toolbar-fixed')) {
rootMarginTop -= 39;
}
if (
body.classList.contains('toolbar-horizontal') &&
body.classList.contains('toolbar-tray-open')
) {
rootMarginTop -= 40;
}
return `${rootMarginTop}px 0px 0px 0px`;
}Install Drupal 10.3.2 or 10.3.5 and choose Olivero, then activate JS aggregation.
Below code solved the issue. I hope JS aggregation could be put at the bottom of Body tag, though some of js code like gtag are needed in head tag.
function getRootMargin() {
document.addEventListener('DOMContentLoaded', function () {
let rootMarginTop = 72;
const { body } = document;
if (body.classList.contains('toolbar-fixed')) {
rootMarginTop -= 39;
}
if (
body.classList.contains('toolbar-horizontal') &&
body.classList.contains('toolbar-tray-open')
) {
rootMarginTop -= 40;
}
return `${rootMarginTop}px 0px 0px 0px`;
});
}
Active
10.3 ✨
Last updated
If this error of Olivero is left unchecked, other modules may also generate errors and stop working. As an example, views slide show module will generate an error and stop working.
I tried to reproduce issue , not able to reproduce.
Drupal Version - 10.3.2 , 10.3.5
Themes - Olivero
As issue is not reproducible adding screenshot for reference.
Please add clear steps to reproduce.|