Score:0

How to debug ccs and js aggregation problem

jp flag

I'm working on a D9 website. On my local server I have all caching and performance settings like js and css aggregation turned off. Now when I copy my site to me remote server these settings are on. Good to know is that I use advagg next to the core performance options.

But on some of the pages in the back-end of the website I get js errors resulting in problems with, for example, admin_toolbar and field_groups modules.

The errors I get are:

js_nQSC-j3xSBBFH94RLP2UNldFGFjdcQr_cdv6pqavR50.js:
263 Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')

js_XMjKep3b2Hxz8NdcZwBLPiZQ2m6qy98seMywBj9lZZ8.js:
475 Uncaught TypeError: Cannot read properties of undefined (reading 'attach')

js_XMjKep3b2Hxz8NdcZwBLPiZQ2m6qy98seMywBj9lZZ8.js:56
Uncaught TypeError: Drupal.toolbar.ToolbarModel is not a constructor

When looking at the log messages there are no messages related to my issues.

When I disable the core JS and CSS aggregation in the Performance page of the site the problems disappear and all is working look they should. After I did this new message appear in the message log. These messages point to missing js.map files. I don't know if this has something to do with my problem. So I add them below.

/sites/default/files/js/optimized/maps/script.min.js.map
/sites/default/files/js/optimized/html5sortable.min.js.map
/sites/default/files/js/optimized/index.umd.min.js.map
/sites/default/files/js/optimized/jquery.once.min.js.map
/sites/default/files/js/optimized/backbone-min.map

I also tried to disable advagg and use just the core js and css aggregation but this dit solve the problem. So it looks like there is a problem with the core functionality. And this is as far as my research went, and I'm stuck now. Can someone help me with the next step in finding out what is the problem?

cn flag
First, try going to the Appearance tab as an admin and re-save the settings for the admin theme you are using. Then, rebuild the cache. Sometimes this can fix JS that has been generated or synced improperly.
Joost avatar
jp flag
Thanks for the quick reply, I did what you said and this didn't solve my problem. But it did put me on a new track. I'm using a custom admin theme, switching to an other admin theme solved the problem aswell. So there is something wrong in my custom admin theme. Any idea what could cause the problem above?
cn flag
Assuming your custom admin theme is a subtheme of Seven, Claro, or Gin, I would check how you defined the theme libraries in your subtheme. If that looks ok, I would go through the subtheme guide and re-create the subtheme from scratch: https://www.drupal.org/docs/theming-drupal/creating-sub-themes
ru flag
Check for missing `; ` semicolons in your JS files. Aggregation can remove newlines `\n`, if you rely on newlines instead of semicolons for "end-of-command", then this can cause those errors.
Joost avatar
jp flag
I was able to trail it down to a specific part of js code. This code was only necessary on two pages, so I added this library to these pages only, and after doing this all is working like it should. Thanks a lot, these suggestions really helped me figuring out the problem!
mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.