Olivero theme have an error for Drupal 10.3

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.|

I have the same problem as @sheetal.pathak and I couldn't reproduce the error. In my case I used a 10.3.5 environment.

OK. My description of Steps to reproduce is not right.
Maybe pre-installed some modules are related to this issue, I'm using only major modules though.
And I myself solved this issue as I said so it is not serious issue for me.
I think it is good to pending this issue and wait someone else has same issue.

I did clean-install of Drupal 10.1.8 and upgdade it to 10.3.5. I couldn't reproduce the issue. But I found that navigation-utils.js is loaded at the bottom of Body tag on the project, while it is loaded in the head tag on the issued project. So something is wrong.

I have the same issue. I am using a sub-theme of Olivero.
Upgrading drupal/core (10.3.1 => 10.3.6)

Once JS is aggregated, it throws errors and causes javascript to stop working for other modules

The code change suggested in the description worked to fix my issue.
I opened up a merge request with those changes.
Thank you lionsea

The changes are not passing the lint test. I'll leave that for someone else... I used the Web Browser IDE and I don't know hot to use prettier there.

Looked like maybe just in indenting issued. Maybe it will pass

@_kash_ is the file also loaded in the header for you? If so can you specify which files are also loaded in the header alongside it? Same question to @lionsea.

Could both of you attach lists of your enabled modules too?

This is likely a side-effect from 🐛 Logic error in Drupal's lazy load for asset aggregation Active but given it can't be reproduced with a clean install of core, it must be contrib or custom library definitions contributing to this somehow.

JS files included in the head tag:

When Aggregation is on and it breaks:

    <script src="/sites/default/files/js/js_K8Mo2AaDmJRTx-xL2V8u4FwqcVJzlADxVY5f7DaH2Lw.js?scope=header&amp;delta=0&amp;language=en&amp;theme=CUSTOM_olivero&amp;include=eJx9UEFywyAM_BCBN_QljAwqUawgRsiJn1-c2p1J2uaEVrtarUhSDVdbgEPWpQH79NM5MdW5uySKBwnJ6IYPwhWRwhgNSih2fYZQXrGHC6zDixlap4klzWFzdjfCe48ZDCKuTdTCr46b0Az1gTrm-Ek8YA8FKyrwf_RwwEZpHvXTEXsIdMLjGJXQETSdT3fK6EyEJ9Cwvw7ylWrcUfxW7gNDu2zCRV16941_Wh0LvCniG8qfZWSkYVbtNZzHnqDhxzbsJiqxUcNwFF9ekrpi"></script>
    <script src="/modules/contrib/google_tag/js/gtm.js?sksl22"></script>
    <script src="/modules/contrib/google_tag/js/gtag.js?sksl22"></script>
    <script src="/sites/default/files/js/js_RzaCuAcclrup1zj-6jwLbIM8SzabRtiGnvg1ZzSx2mc.js?scope=header&amp;delta=3&amp;language=en&amp;theme=CUSTOM_olivero&amp;include=eJx9UEFywyAM_BCBN_QljAwqUawgRsiJn1-c2p1J2uaEVrtarUhSDVdbgEPWpQH79NM5MdW5uySKBwnJ6IYPwhWRwhgNSih2fYZQXrGHC6zDixlap4klzWFzdjfCe48ZDCKuTdTCr46b0Az1gTrm-Ek8YA8FKyrwf_RwwEZpHvXTEXsIdMLjGJXQETSdT3fK6EyEJ9Cwvw7ylWrcUfxW7gNDu2zCRV16941_Wh0LvCniG8qfZWSkYVbtNZzHnqDhxzbsJiqxUcNwFF9ekrpi"></script>

When aggregation is off and it is fine:

<script src="/core/misc/touchevents-test.js?v=10.3.6"></script>
<script src="/core/assets/vendor/jquery/jquery.min.js?v=3.7.1"></script>
<script src="/core/assets/vendor/once/once.min.js?v=1.0.1"></script>
<script src="/core/misc/drupalSettingsLoader.js?v=10.3.6"></script>
<script src="/core/misc/drupal.js?v=10.3.6"></script>
<script src="/core/misc/drupal.init.js?v=10.3.6"></script>
<script src="/core/assets/vendor/tabbable/index.umd.min.js?v=6.2.0"></script>
<script src="/core/misc/progress.js?v=10.3.6"></script>
<script src="/core/assets/vendor/loadjs/loadjs.min.js?v=4.3.0"></script>
<script src="/core/misc/debounce.js?v=10.3.6"></script>
<script src="/core/misc/announce.js?v=10.3.6"></script>
<script src="/core/themes/olivero/js/navigation-utils.js?v=10.3.6"></script>
<script src="/core/themes/olivero/js/checkbox.js?v=10.3.6"></script>
<script src="/core/themes/olivero/js/messages.js?v=10.3.6"></script>
<script src="/core/misc/message.js?v=10.3.6"></script>
<script src="/core/themes/olivero/js/message.theme.js?v=10.3.6"></script>
<script src="/core/misc/ajax.js?v=10.3.6"></script>
<script src="/modules/contrib/google_tag/js/gtm.js?sksnk5"></script>
<script src="/modules/contrib/google_tag/js/gtag.js?sksnk5"></script>
<script src="/modules/contrib/google_tag/js/gtag.ajax.js?sksnk5"></script>
<script src="/core/modules/toolbar/js/toolbar.anti-flicker.js?v=10.3.6"></script>

:/opt/drupal# drush pm:list --status=enabled
--------------------- --------------------------------------------------------- --------- --------------
Package Name Status Version
--------------------- --------------------------------------------------------- --------- --------------
Core Automated Cron (automated_cron) Enabled 10.3.6
Core BigPipe (big_pipe) Enabled 10.3.6
Core Block (block) Enabled 10.3.6
Core Block Content (block_content) Enabled 10.3.6
Core Breakpoint (breakpoint) Enabled 10.3.6
Core CKEditor 5 (ckeditor5) Enabled 10.3.6
Core Comment (comment) Enabled 10.3.6
Core Configuration Manager (config) Enabled 10.3.6
Core Contact (contact) Enabled 10.3.6
Core Content Moderation (content_moderation) Enabled 10.3.6
Core Contextual Links (contextual) Enabled 10.3.6
Field types Datetime (datetime) Enabled 10.3.6
Field types Datetime Range (datetime_range) Enabled 10.3.6
Core Database Logging (dblog) Enabled 10.3.6
Core Internal Dynamic Page Cache (dynamic_page_cache) Enabled 10.3.6
Core Text Editor (editor) Enabled 10.3.6
Core Field (field) Enabled 10.3.6
Core (Experimental) Field Layout (field_layout) Enabled 10.3.6
Core Field UI (field_ui) Enabled 10.3.6
Field types File (file) Enabled 10.3.6
Core Filter (filter) Enabled 10.3.6
Core Help (help) Enabled 10.3.6
Core History (history) Enabled 10.3.6
Field types Image (image) Enabled 10.3.6
Core Layout Builder (layout_builder) Enabled 10.3.6
Core Layout Builder Expose All Field Blocks Enabled 10.3.6
(layout_builder_expose_all_field_blocks)
Core Layout Discovery (layout_discovery) Enabled 10.3.6
Field types Link (link) Enabled 10.3.6
Core Media (media) Enabled 10.3.6
Core Media Library (media_library) Enabled 10.3.6
Core Custom Menu Links (menu_link_content) Enabled 10.3.6
Core Menu UI (menu_ui) Enabled 10.3.6
Migration Migrate (migrate) Enabled 10.3.6
Migration Migrate Drupal (migrate_drupal) Enabled 10.3.6
Migration Migrate Drupal UI (migrate_drupal_ui) Enabled 10.3.6
Core MySQL (mysql) Enabled 10.3.6
Core Node (node) Enabled 10.3.6
Field types Options (options) Enabled 10.3.6
Core Internal Page Cache (page_cache) Enabled 10.3.6
Core Path (path) Enabled 10.3.6
Core Path alias (path_alias) Enabled 10.3.6
Core Password Compatibility (phpass) Enabled 10.3.6
Web services RESTful Web Services (rest) Enabled 10.3.6
Core Search (search) Enabled 10.3.6
Web services Serialization (serialization) Enabled 10.3.6
Core Shortcut (shortcut) Enabled 10.3.6
Core System (system) Enabled 10.3.6
Core Taxonomy (taxonomy) Enabled 10.3.6
Field types Text (text) Enabled 10.3.6
Core Toolbar (toolbar) Enabled 10.3.6
Core Tour (tour) Enabled 10.3.6
Core Update Manager (update) Enabled 10.3.6
Core User (user) Enabled 10.3.6
Core Views (views) Enabled 10.3.6
Core Views UI (views_ui) Enabled 10.3.6
Core Workflows (workflows) Enabled 10.3.6
Administration Admin Toolbar (admin_toolbar) Enabled 3.5.0
Administration Admin Toolbar Search (admin_toolbar_search) Enabled 3.5.0
Administration Admin Toolbar Extra Tools (admin_toolbar_tools) Enabled 3.5.0
Views Better Exposed Filters (better_exposed_filters) Enabled 6.0.6
User interface Collapsiblock (collapsiblock) Enabled 4.3.0
Other Comment Notify (comment_notify) Enabled 8.x-1.4
Other Components (components) Enabled 3.1.0
Fields Conditional Fields (conditional_fields) Enabled 4.0.0-alpha5
Config Config Split (config_split) Enabled 2.0.1
Web services Serialization (CSV) (csv_serialization) Enabled 4.0.1
Navigation Easy Breadcrumb (easy_breadcrumb) Enabled 2.0.8
Encryption Encrypt (encrypt) Enabled 8.x-3.2
Entity Print Entity Print (entity_print) Enabled 8.x-2.15
Field types Entity Reference Revisions (entity_reference_revisions) Enabled 8.x-1.12
Search Facets (facets) Enabled 2.0.8
FAQ Frequently Asked Questions (faq) Enabled 8.x-1.2
Fields Field Group (field_group) Enabled 8.x-3.6
Administration Fast Permissions Administration (fpa) Enabled 4.0.0
Other Google Tag (google_tag) Enabled 2.0.6
Spam control Honeypot (honeypot) Enabled 2.2.0
jQuery UI jQuery UI (jquery_ui) Enabled 8.x-1.7
jQuery UI jQuery UI Datepicker (jquery_ui_datepicker) Enabled 2.1.0
jQuery UI jQuery UI Slider (jquery_ui_slider) Enabled 2.1.0
jQuery UI jQuery UI Touch Punch (jquery_ui_touch_punch) Enabled 1.1.1
Other JavaScript Cookie Library (js_cookie) Enabled 1.0.1
Security Key (key) Enabled 8.x-1.19
Administration Mail Login (mail_login) Enabled 3.0.0
Mail Mail System (mailsystem) Enabled 8.x-4.5
Other Masquerade (masquerade) Enabled 8.x-2.0
Migration Migrate Files (extended) (migrate_file) Enabled 2.1.2
Migration Migrate Plus (migrate_plus) Enabled 6.0.4
Migration Migrate Tools (migrate_tools) Enabled 6.0.4
Paragraphs Paragraphs (paragraphs) Enabled 8.x-1.18
Other Pathauto (pathauto) Enabled 8.x-1.13
Permissions by Term Permissions by Term (permissions_by_term) Enabled 3.1.33
Other Redirect 403 to User Login (r4032login) Enabled 2.2.2
Fields Read-only Field Widget (readonly_field_widget) Enabled 8.x-1.6
Security Real AES (real_aes) Enabled 8.x-2.6
Other Redirect (redirect) Enabled 8.x-1.10
Content Authoring Require on Publish (require_on_publish) Enabled 8.x-1.10
Permissions Role Delegation (role_delegation) Enabled 8.x-1.3
SAML SAML Drupal Login (saml_sp_drupal_login) Enabled 4.2.3
SAML SAML Service Provider (saml_sp) Enabled 4.2.3
Search Database Search (search_api_db) Enabled 8.x-1.35
Search Search API (search_api) Enabled 8.x-1.35
Fields Smart Trim (smart_trim) Enabled 2.2.0
Mail SMTP Authentication Support (smtp) Enabled 8.x-1.4
Fields Term Reference Tree (term_reference_tree) Enabled 2.0.1
Security Two-factor Authentication (TFA) (tfa) Enabled 8.x-1.8
Other Token (token) Enabled 8.x-1.15
Administration Upgrade Status (upgrade_status) Enabled
Views Views Data Export (views_data_export) Enabled 8.x-1.4
Workbench Workbench (workbench) Enabled 8.x-1.5
Custom Launchpad And TFA (launchpad_and_tfa) Enabled
Custom Bookmark Paragraphs (bookmark_paragraphs) Enabled
Custom CUSTOM_access (CUSTOM_access) Enabled
Custom CUSTOM_analytics (CUSTOM_analytics) Enabled
Custom CUSTOM_comment_mail (CUSTOM_comment_mail) Enabled
Custom CUSTOM Email Notifications (CUSTOM_email_notifications) Enabled
Custom CUSTOM_form_update (CUSTOM_form_update) Enabled
Custom CUSTOM_menu (CUSTOM_menu) Enabled
Custom CUSTOM_migration (CUSTOM_migration) Enabled
Custom CUSTOM_result (CUSTOM_result) Enabled
Custom permissions_by_term_extra (permissions_by_term_extra) Enabled
Core Claro (claro) Enabled 10.3.6
Core Olivero (olivero) Enabled 10.3.6
Bootstrap Barrio (bootstrap_barrio) Enabled 5.5.17
CUSTOM Bootstrap (CUSTOM_bootstrap) Enabled 5.0.10
Custom CUSTOM Claro (CUSTOM_claro) Enabled
CUSTOM Olivero (CUSTOM_olivero) Enabled 10.3.6

I found suspicious modules.
On the project where the issue happens, some js files are loaded in head tag even with aggregation unchecked.
The bottom of the list of js files in head tag, Toolbar Anti-flicker module exists and before that, Google Tag module exists.
I cloned the project, and on the cloned test site, I uninstall Toolbar module. Nothing improves. Then I uninstalled Google Tag module and the issue dissapeared. After that I reinstalled Toolbar modules and Google Tag modules, but problem didn't occur. Then I visit the config page for Google Tag, no ID was set by default, so I tried to set ID but error returned, perhaps it is due to local environment or using ID with multiple environment; prod and dev.
I had Google Tag module active on my site before Drupal Core upgrade and updated core and module with the command composer update. There is no serious bug is reported on Google Tag module page; https://www.drupal.org/project/google_tag → .

It looks like when aggregation is on, that only

<script src="/modules/contrib/google_tag/js/gtag.ajax.js?sksnk5"></script>
<script src="/core/modules/toolbar/js/toolbar.anti-flicker.js?v=10.3.6"></script>

these two files should appear in the final aggregate, given how they show up when it's off - can you check whether that is the case?

Also can you try uninstalling big pipe to see whether that makes any difference?

>Also can you try uninstalling big pipe to see whether that makes any difference?
On test site, I uninstalled big pipe and did cache refresh, but the issue still persists.
Then I reinstalled big pipe, and the problem disappeared, just as like Google Tag #16 case.

We run quite a few of projects with Olivero as a base theme are have been starting to see this on some of our sites [also on D10.2].
I narrowed this down to Google Tag Manager module:

Summary

• Olivero as basetheme + our small subtheme
• D10.2
• Google Tag manager 2.0.6

Issue: Olivero menu does not work
Workaround: turn Aggregate JavaScript files OFF

• Olivero as basetheme + our small subtheme
• D10.2
• Google Tag manager 8.x-1.7

Issue: Olivero menu works (and Aggregate JavaScript files can be ON)

And just confirmed the above by uninstalling their Google Tag manager 2.0.6 [Olivero menu starts working], replacing the code base with Google Tag manager 8.x-1.7 and installing it [Olivero menu still works]

Following up Karin's observation about google tag module, this looks likely:

https://www.drupal.org/project/google_tag/issues/3468036 🐛 Problems with google tag i think after it upgraded to 2.0.6 Active

Adding

• Olivero as basetheme + our small subtheme
• D10.1
• Google Tag manager 2.0.6

Issue: Olivero menu works (and Aggregate JavaScript files can be ON)

Thanks Alan -> confirming that reverting that google_tag project patch:

https://www.drupal.org/files/issues/2024-07-23/3452712-8_google_tag_outp... →

fixes the issue described here

#22
For information, Olivero menu on my site has not been working, that is the function in which navigation should move left side of the screen and three bar menu should appear after scrolling down on PC size. So now navigation is just fixed like a simple html site. Actually I don't need that function so I have not fixed it. It occurs when I upgrade Drupal version using Olivero, or maybe it is related Google tags module, I don't know.

Try this: downgrade your Google Tag module to 2.0.5

This bug should be fixed by https://www.drupal.org/project/google_tag/issues/3491175 🐛 Loading the library gtag.ajax in the header causes issues with other JS Active (which is now merged and a new release has tagged). Updating google_tag to 2.0.7 should help.