Skip to content
This repository was archived by the owner on Nov 6, 2024. It is now read-only.
This repository was archived by the owner on Nov 6, 2024. It is now read-only.

[BUG] Console errors about main-menu.js #106

@codechefmarc

Description

@codechefmarc

Describe the bug
After starting up a new install of Emulsify and Compound (default components), I had to change the attach_library lines in a few files including the main-menu.twig due to this bug (emulsify-ds/emulsify-cli#191). The change was from {{ attach_library('emulsify/main-menu') }} to {{ attach_library('MY_THEME/main-menu') }}.

In loading the new theme, when logged in to Drupal, I get console errors now with this library. Here is the error:

Uncaught TypeError: e.getElementById is not a function
    at Object.attach (main-menu.js?s7433c:1:55)
    at drupal.js?v=10.2.0:166:24
    at Array.forEach (<anonymous>)
    at Drupal.attachBehaviors (drupal.js?v=10.2.0:162:34)
    at HTMLAnchorElement.<anonymous> (ajax.js?v=10.2.0:1387:20)
    at Function.each (jquery.min.js?v=3.7.1:2:3129)
    at ce.fn.init.each (jquery.min.js?v=3.7.1:2:1594)
    at Drupal.AjaxCommands.insert (ajax.js?v=10.2.0:1385:21)
    at ajax.js?v=10.2.0:1046:41

I traced it to the compiled JS file web/themes/custom/MY_THEME/dist/js/02-molecules/menus/main-menu/main-menu.js which is based on web/themes/custom/MY_THEME/components/02-molecules/menus/main-menu/main-menu.js. In the original, the context variable is used and that should normally represent document so the context.getElementById or document.getElementById is valid. In the compiled file, it is replaced with e. I'm not sure if this is the cause of it, but what I found in my initial research.

This error does not show up when logged out as an anonymous user.

To Reproduce
Steps to reproduce the behavior:

  1. Install Drupal with composer create-project drupal/recommended-project <project-name>
  2. Install Emulsify with emulsify init <theme name>
  3. Go into the newly created theme and run emulsify system install compound
  4. Also from within the theme directory, run npm install and npm run build
  5. Enable the new theme in Drupal and clear caches
  6. Visit the front-end as a logged in user
  7. Open the console and verify the error message
  8. View the site as a logged out user and open the console
  9. Verify there is no error message.

Expected behavior
No console.log errors. Also, it appears that due to this, the main menu mobile open/close does not work when logged in.

Desktop (please complete the following information):

  • OS: macOS 14.2.1
  • Browser Arc 1.25.1, Safari 17.2.1

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions