Aggregating JavaScript generates errors and breaks JS functionality

Question

My website is working well but I was required to aggregate CSS/JS by enabling the system.performance.js.preprocess config key. Once the JS code is within one single file I got some errors that doesn't show up when JavaScript is not aggregated:

Uncaught TypeError: Cannot read property 'bindAjaxLinks' of undefined
    at HTMLDocument.<anonymous> (js_gQksidT9DzO4kWsJTVsAaOllA_i35znbvgoaoo5Ut8c.js:579)
    at HTMLDocument.dispatch (js_gQksidT9DzO4kWsJTVsAaOllA_i35znbvgoaoo5Ut8c.js:3)
    at HTMLDocument.q.handle (js_gQksidT9DzO4kWsJTVsAaOllA_i35znbvgoaoo5Ut8c.js:3)
    at Object.trigger (js_gQksidT9DzO4kWsJTVsAaOllA_i35znbvgoaoo5Ut8c.js:4)
    at HTMLDocument.<anonymous> (js_gQksidT9DzO4kWsJTVsAaOllA_i35znbvgoaoo5Ut8c.js:4)
    at Function.each (js_gQksidT9DzO4kWsJTVsAaOllA_i35znbvgoaoo5Ut8c.js:2)
    at r.fn.init.each (js_gQksidT9DzO4kWsJTVsAaOllA_i35znbvgoaoo5Ut8c.js:2)
    at r.fn.init.trigger (js_gQksidT9DzO4kWsJTVsAaOllA_i35znbvgoaoo5Ut8c.js:4)
    at initContextual (js_gQksidT9DzO4kWsJTVsAaOllA_i35znbvgoaoo5Ut8c.js:500)
    at js_gQksidT9DzO4kWsJTVsAaOllA_i35znbvgoaoo5Ut8c.js:532
Uncaught TypeError: $autocomplete.autocomplete is not a function
    at Object.attach (js_gQksidT9DzO4kWsJTVsAaOllA_i35znbvgoaoo5Ut8c.js:899)
    at js_gQksidT9DzO4kWsJTVsAaOllA_i35znbvgoaoo5Ut8c.js:174
    at Array.forEach (<anonymous>)
    at Object.Drupal.attachBehaviors (js_gQksidT9DzO4kWsJTVsAaOllA_i35znbvgoaoo5Ut8c.js:171)
    at js_gQksidT9DzO4kWsJTVsAaOllA_i35znbvgoaoo5Ut8c.js:356
    at HTMLDocument.t (js_BKcMdIbOMdbTdLn9dkUq3KCJfIKKo2SvKoQ1AnB8D-g.js:4)

This breaks the entire JS functionality of my site like drop-down menus and slideshows.

I'm using a custom theme based on Acquia's Cog. My theme looks like this:

name: 'My Theme'
type: theme
description: 'Custom Cog subtheme for my website.'
core: 8.x
base theme: cog
libraries:
  - mytheme/fonts
  - mytheme/fontawesome
  - mytheme/global_styles
  - mytheme/slick
regions:
...

And my theme's libraries file:

global_styles:
  css:
    theme:
      css/styles.css: {}
  js:
    js/dist/scripts.js: {}

The js/dist/scripts.js file is a JS file built with npm and gulp.

I have read in other answers this may be caused of undeclared dependencies since the undefined variables could be loading before the Drupal ones. I tried to split it into another library and set dependencies like this:

global_scripts:
  js:
    js/dist/scripts.js: {}
  dependencies:
    - core/drupal
    - core/drupalSettings
    - core/jquery
    - core/jquery.once

But there's no effect at all. Any hints on how to solve this?

Answer 1

This issue is usually -- but not always -- because someone has written Javascript without adding semicolons in the appropriate places. JS is valid without them but only when there is also a line-end at that point. Many JS preprocessors remove line breaks, so making the JS invalid.

This can be resolved by examining the JS source for missing semicolons and adding them; a good JS IDE will be able to guide you as to where.

Another issue that sometimes occurs is when the JS code has not been properly context-wrapped. Drupal standard practice is to include a function() { js(); code(); here(); } (); wrapper around code blocks because that limits the scope of names to that block; without it, the scope could be global and thus can be interfered with by other blocks of code.

The Drupal solution, which also solves another problem, is to use the "Drupal.behaviours". construct. Check the Drupal JS files for that string for examples.