Replace Webpack with Vite (#4765)

Co-authored-by: Tom Moor <tom@getoutline.com>
Co-authored-by: Vio <vio@beanon.com>

app/utils/plugins.ts

@@ -13,25 +13,31 @@ export function loadPlugins(): { [id: string]: Plugin } {
   const plugins = {};
 
   function importAll(r: any, property: string) {
-    r.keys().forEach((key: string) => {
-      const id = key.split("/")[1];
+    Object.keys(r).forEach((key: string) => {
+      const id = key.split("/")[3];
       plugins[id] = plugins[id] || {
         id,
       };
-
-      const plugin = r(key);
-      plugins[id][property] = "default" in plugin ? plugin.default : plugin;
+      plugins[id][property] = r[key].default;
     });
   }
+
   importAll(
-    require.context("../../plugins", true, /client\/Settings\.[tj]sx?$/),
+    import.meta.glob("../../plugins/*/client/Settings.{ts,js,tsx,jsx}", {
+      eager: true,
+    }),
     "settings"
   );
   importAll(
-    require.context("../../plugins", true, /client\/Icon\.[tj]sx?$/),
+    import.meta.glob("../../plugins/*/client/Icon.{ts,js,tsx,jsx}", {
+      eager: true,
+    }),
     "icon"
   );
-  importAll(require.context("../../plugins", true, /plugin\.json?$/), "config");
+  importAll(
+    import.meta.glob("../../plugins/*/plugin.json", { eager: true }),
+    "config"
+  );
 
   return plugins;
 }

app/utils/polyfills.ts

@@ -8,10 +8,7 @@ export async function loadPolyfills() {
 
   if (!supportsResizeObserver()) {
     polyfills.push(
-      import(
-        /* webpackChunkName: "resize-observer" */
-        "@juggle/resize-observer"
-      ).then((module) => {
+      import("@juggle/resize-observer").then((module) => {
         window.ResizeObserver = module.ResizeObserver;
       })
     );
@@ -27,8 +24,8 @@ export async function loadPolyfills() {
  */
 function supportsResizeObserver() {
   return (
-    "ResizeObserver" in global &&
-    "ResizeObserverEntry" in global &&
+    "ResizeObserver" in window &&
+    "ResizeObserverEntry" in window &&
     "contentRect" in ResizeObserverEntry.prototype
   );
 }

app/utils/sentry.ts

@@ -16,6 +16,7 @@ export function initSentry(history: History) {
     ],
     tracesSampleRate: env.ENVIRONMENT === "production" ? 0.1 : 1,
     ignoreErrors: [
+      "Failed to fetch dynamically imported module",
       "ResizeObserver loop completed with undelivered notifications",
       "ResizeObserver loop limit exceeded",
       "AuthorizationError",
@@ -26,8 +27,8 @@ export function initSentry(history: History) {
       "RateLimitExceededError",
       "ServiceUnavailableError",
       "UpdateRequiredError",
-      "ChunkLoadError",
       "file://",
+      "chrome-extension://",
     ],
   });
 }