>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3219569. --> Reported by: [szeidler](https://www.drupal.org/user/767652) >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>Gutenberg stuck loading when using it on Drupal 9.2 and have JS aggregation enabled. The reason is a wrong order of jquery_ui JS files, which speaks for an underlying Drupal core issue.</p> <p>The screenshot beneath shows the errors in non aggregation mode.</p> <div class="codeblock"> <pre><span style="color: #000000"><span style="color: #0000BB">&lt;?php<br>&#65279;<br>controlgroup</span><span style="color: #007700">-</span><span style="color: #0000BB">min</span><span style="color: #007700">.</span><span style="color: #0000BB">js</span><span style="color: #007700">?</span><span style="color: #0000BB">v</span><span style="color: #007700">=</span><span style="color: #0000BB">9.2.0</span><span style="color: #007700">:</span><span style="color: #0000BB">9 Uncaught TypeError</span><span style="color: #007700">: </span><span style="color: #0000BB">t</span><span style="color: #007700">.</span><span style="color: #0000BB">widget is not a </span><span style="color: #007700">function<br>&nbsp;&nbsp;&nbsp; </span><span style="color: #0000BB">at controlgroup</span><span style="color: #007700">-</span><span style="color: #0000BB">min</span><span style="color: #007700">.</span><span style="color: #0000BB">js</span><span style="color: #007700">?</span><span style="color: #0000BB">v</span><span style="color: #007700">=</span><span style="color: #0000BB">9.2.0</span><span style="color: #007700">:</span><span style="color: #0000BB">9<br>&nbsp;&nbsp;&nbsp; at controlgroup</span><span style="color: #007700">-</span><span style="color: #0000BB">min</span><span style="color: #007700">.</span><span style="color: #0000BB">js</span><span style="color: #007700">?</span><span style="color: #0000BB">v</span><span style="color: #007700">=</span><span style="color: #0000BB">9.2.0</span><span style="color: #007700">:</span><span style="color: #0000BB">9<br>&nbsp;&nbsp;&nbsp; at controlgroup</span><span style="color: #007700">-</span><span style="color: #0000BB">min</span><span style="color: #007700">.</span><span style="color: #0000BB">js</span><span style="color: #007700">?</span><span style="color: #0000BB">v</span><span style="color: #007700">=</span><span style="color: #0000BB">9.2.0</span><span style="color: #007700">:</span><span style="color: #0000BB">9<br>mouse</span><span style="color: #007700">-</span><span style="color: #0000BB">min</span><span style="color: #007700">.</span><span style="color: #0000BB">js</span><span style="color: #007700">?</span><span style="color: #0000BB">v</span><span style="color: #007700">=</span><span style="color: #0000BB">9.2.0</span><span style="color: #007700">:</span><span style="color: #0000BB">9 Uncaught TypeError</span><span style="color: #007700">: </span><span style="color: #0000BB">e</span><span style="color: #007700">.</span><span style="color: #0000BB">widget is not a </span><span style="color: #007700">function<br>&nbsp;&nbsp;&nbsp; </span><span style="color: #0000BB">at mouse</span><span style="color: #007700">-</span><span style="color: #0000BB">min</span><span style="color: #007700">.</span><span style="color: #0000BB">js</span><span style="color: #007700">?</span><span style="color: #0000BB">v</span><span style="color: #007700">=</span><span style="color: #0000BB">9.2.0</span><span style="color: #007700">:</span><span style="color: #0000BB">9<br>&nbsp;&nbsp;&nbsp; at mouse</span><span style="color: #007700">-</span><span style="color: #0000BB">min</span><span style="color: #007700">.</span><span style="color: #0000BB">js</span><span style="color: #007700">?</span><span style="color: #0000BB">v</span><span style="color: #007700">=</span><span style="color: #0000BB">9.2.0</span><span style="color: #007700">:</span><span style="color: #0000BB">9<br>&nbsp;&nbsp;&nbsp; at mouse</span><span style="color: #007700">-</span><span style="color: #0000BB">min</span><span style="color: #007700">.</span><span style="color: #0000BB">js</span><span style="color: #007700">?</span><span style="color: #0000BB">v</span><span style="color: #007700">=</span><span style="color: #0000BB">9.2.0</span><span style="color: #007700">:</span><span style="color: #0000BB">9<br>widget</span><span style="color: #007700">-</span><span style="color: #0000BB">min</span><span style="color: #007700">.</span><span style="color: #0000BB">js</span><span style="color: #007700">?</span><span style="color: #0000BB">v</span><span style="color: #007700">=</span><span style="color: #0000BB">9.2.0</span><span style="color: #007700">:</span><span style="color: #0000BB">9 Uncaught TypeError</span><span style="color: #007700">: </span><span style="color: #0000BB">i is not a constructor<br>&nbsp;&nbsp;&nbsp; at </span><span style="color: #007700">Function.</span><span style="color: #0000BB">t</span><span style="color: #007700">.</span><span style="color: #0000BB">widget </span><span style="color: #007700">(</span><span style="color: #0000BB">widget</span><span style="color: #007700">-</span><span style="color: #0000BB">min</span><span style="color: #007700">.</span><span style="color: #0000BB">js</span><span style="color: #007700">?</span><span style="color: #0000BB">v</span><span style="color: #007700">=</span><span style="color: #0000BB">9.2.0</span><span style="color: #007700">:</span><span style="color: #0000BB">9</span><span style="color: #007700">)<br>&nbsp;&nbsp;&nbsp; </span><span style="color: #0000BB">at draggable</span><span style="color: #007700">-</span><span style="color: #0000BB">min</span><span style="color: #007700">.</span><span style="color: #0000BB">js</span><span style="color: #007700">?</span><span style="color: #0000BB">v</span><span style="color: #007700">=</span><span style="color: #0000BB">9.2.0</span><span style="color: #007700">:</span><span style="color: #0000BB">9<br>&nbsp;&nbsp;&nbsp; at draggable</span><span style="color: #007700">-</span><span style="color: #0000BB">min</span><span style="color: #007700">.</span><span style="color: #0000BB">js</span><span style="color: #007700">?</span><span style="color: #0000BB">v</span><span style="color: #007700">=</span><span style="color: #0000BB">9.2.0</span><span style="color: #007700">:</span><span style="color: #0000BB">9<br>&nbsp;&nbsp;&nbsp; at draggable</span><span style="color: #007700">-</span><span style="color: #0000BB">min</span><span style="color: #007700">.</span><span style="color: #0000BB">js</span><span style="color: #007700">?</span><span style="color: #0000BB">v</span><span style="color: #007700">=</span><span style="color: #0000BB">9.2.0</span><span style="color: #007700">:</span><span style="color: #0000BB">9<br>widget</span><span style="color: #007700">-</span><span style="color: #0000BB">min</span><span style="color: #007700">.</span><span style="color: #0000BB">js</span><span style="color: #007700">?</span><span style="color: #0000BB">v</span><span style="color: #007700">=</span><span style="color: #0000BB">9.2.0</span><span style="color: #007700">:</span><span style="color: #0000BB">9 Uncaught TypeError</span><span style="color: #007700">: </span><span style="color: #0000BB">i is not a constructor<br>&nbsp;&nbsp;&nbsp; at </span><span style="color: #007700">Function.</span><span style="color: #0000BB">t</span><span style="color: #007700">.</span><span style="color: #0000BB">widget </span><span style="color: #007700">(</span><span style="color: #0000BB">widget</span><span style="color: #007700">-</span><span style="color: #0000BB">min</span><span style="color: #007700">.</span><span style="color: #0000BB">js</span><span style="color: #007700">?</span><span style="color: #0000BB">v</span><span style="color: #007700">=</span><span style="color: #0000BB">9.2.0</span><span style="color: #007700">:</span><span style="color: #0000BB">9</span><span style="color: #007700">)<br>&nbsp;&nbsp;&nbsp; </span><span style="color: #0000BB">at resizable</span><span style="color: #007700">-</span><span style="color: #0000BB">min</span><span style="color: #007700">.</span><span style="color: #0000BB">js</span><span style="color: #007700">?</span><span style="color: #0000BB">v</span><span style="color: #007700">=</span><span style="color: #0000BB">9.2.0</span><span style="color: #007700">:</span><span style="color: #0000BB">9<br>&nbsp;&nbsp;&nbsp; at resizable</span><span style="color: #007700">-</span><span style="color: #0000BB">min</span><span style="color: #007700">.</span><span style="color: #0000BB">js</span><span style="color: #007700">?</span><span style="color: #0000BB">v</span><span style="color: #007700">=</span><span style="color: #0000BB">9.2.0</span><span style="color: #007700">:</span><span style="color: #0000BB">9<br>&nbsp;&nbsp;&nbsp; at resizable</span><span style="color: #007700">-</span><span style="color: #0000BB">min</span><span style="color: #007700">.</span><span style="color: #0000BB">js</span><span style="color: #007700">?</span><span style="color: #0000BB">v</span><span style="color: #007700">=</span><span style="color: #0000BB">9.2.0</span><span style="color: #007700">:</span><span style="color: #0000BB">9<br>?&gt;</span></span></pre></div> <p>There is a "hacky" workaround for Gutenberg in [3219569#comment-14146442] and a workaround for Drupal core at [3219569#comment-14153148].</p> <p>Please check the Drupal core issue at <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/drupal/issues/3222107" title="Status: Closed (fixed)">#3222107: Library order asset weights do not work properly when a large number of javascript files is loaded between two jQuery UI libraries</a></span> for further progress.</p> <p><strong>Why does it happen after the Drupal 9.2 deprecation?</strong><br> Because of the jquery.ui deprecation process the core libraries and dependencies have been slightly changed.</p> <p><strong>Is it a core problem?</strong><br> Quite likely. The problem does not seem to appear with Drupal core and e.g. CKEditor. But the bug seem to have been introduced by the jquery.ui changes. Until now I only found another issue, that describes a similar problem (see below).</p> <p><strong>Why does it "only" happening with Gutenberg?</strong><br> It's not related to Gutenberg. It happens when there are a lot of Javascript files going to be used (more than 100) on a page. Gutenberg is using a lot of individual Javascriipt files. Therefore we see it there. </p> <h4 id="summary-steps-reproduce">Steps to reproduce</h4> <ol> <li>Install Drupal 9.2</li> <li>Install Gutenberg 8.x-2.x</li> <li>Enable the Gutenberg Experience for the article content type at <code>/admin/structure/types/manage/article</code></li> <li>Open the add node page at <code>/node/add/article</code></li> <li>You should see the error. Disable JS aggregation check the file order. </li></ol> <p>The problem is, that <code>controlgroup-min.js</code> and other jquery.ui files depending on jquery.ui <code>widget-min.js</code> are invoked before the widget-min.js file.</p> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <h3 id="summary-remaining-tasks">Remaining tasks</h3> <h3 id="summary-ui-changes">User interface changes</h3> <h3 id="summary-api-changes">API changes</h3> <h3 id="summary-data-model-changes">Data model changes</h3> >>> [!note] Pre-migration files - [image.png](https://www.drupal.org/files/issues/2021-06-18/image.png) >>>