emulsify-ds / compound

Compound is the default component collection for Emulsify
https://emulsify-ds.github.io/compound/
GNU General Public License v2.0
13 stars 10 forks source link

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

Open codechefmarc opened 8 months ago

codechefmarc commented 8 months ago

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 (https://github.com/emulsify-ds/emulsify-cli/issues/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):