Remove userbars dependency on the vendor bundle

Fixes #6657

client/src/entrypoints/admin/userbar.js

@@ -1,3 +1,7 @@
+// This entrypoint is not bundled with any polyfills to keep it as light as possible
+// Please stick to old JS APIs and avoid importing anything that might require a vendored module
+// More background can be found in webpack.config.js
+
 document.addEventListener('DOMContentLoaded', (e) => {
   const userbar = document.querySelector('[data-wagtail-userbar]');
   const trigger = userbar.querySelector('[data-wagtail-userbar-trigger]');

client/webpack.config.js

@@ -59,12 +59,17 @@ module.exports = function exports() {
   for (const [appName, moduleNames] of Object.entries(entrypoints)) {
     moduleNames.forEach(moduleName => {
       entry[moduleName] = {
-        import: [
-          `./client/src/entrypoints/${appName}/${moduleName}.js`,
-          './client/src/utils/polyfills.js',
-        ],
+        import: [`./client/src/entrypoints/${appName}/${moduleName}.js`],
         filename: getOutputPath(appName, moduleName) + '.js',
       };
+
+      // Add polyfills to all bundles except userbar
+      // polyfills.js imports from node_modules, which adds a dependency on vendor.js (produced by splitChunks)
+      // Because userbar is supposed to run on peoples frontends, we code it using portable JS so we don't need
+      // to pull in all the additional JS that the vendor bundle has (such as React).
+      if (moduleName !== 'userbar') {
+        entry[moduleName].import.push('./client/src/utils/polyfills.js');
+      }
     });
   }