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:
Install Drupal with composer create-project drupal/recommended-project <project-name>
Install Emulsify with emulsify init <theme name>
Go into the newly created theme and run emulsify system install compound
Also from within the theme directory, run npm install and npm run build
Enable the new theme in Drupal and clear caches
Visit the front-end as a logged in user
Open the console and verify the error message
View the site as a logged out user and open the console
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):
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 themain-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:
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 onweb/themes/custom/MY_THEME/components/02-molecules/menus/main-menu/main-menu.js
. In the original, thecontext
variable is used and that should normally representdocument
so thecontext.getElementById
ordocument.getElementById
is valid. In the compiled file, it is replaced withe
. 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:
composer create-project drupal/recommended-project <project-name>
emulsify init <theme name>
emulsify system install compound
npm install
andnpm run build
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):