How an Unclosed HTML Tag Broke Drupal JavaScript on a Single Page
In a detailed debugging story, Mike Herchel recounts how Drupal’s JavaScript broke during a live demo—on a single theme settings page. Console errors pointed to missing drupalSettings values, yet the relevant JSON script existed in the HTML source. After disabling BigPipe and removing injected scripts, Mike traced the problem to the drupalSettingsLoader.js file, which failed to locate the expected <script> tag in the DOM. This ruled out core failure and pointed to a structural issue with the markup.
Closer inspection revealed the drupalSettings script was wrapped inside an <em> element in the DOM—though this tag didn’t exist in the source HTML. The browser had restructured the DOM due to an unclosed <em> tag elsewhere in the markup, breaking the JavaScript loader’s selector that requires the script to be a direct child of <body>.
Once the rogue tag was closed, all functionality returned instantly. This case illustrates how subtle markup issues can undermine major frontend systems, and highlights the value of understanding the DOM and using browser developer tools for precise debugging.


