Replace Webpack with Vite (#4765)

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

app/components/AuthenticatedLayout.tsx

@@ -25,26 +25,12 @@ import {
 import Fade from "./Fade";
 
 const DocumentHistory = React.lazy(
-  () =>
-    import(
-      /* webpackChunkName: "document-history" */
-      "~/scenes/Document/components/History"
-    )
+  () => import("~/scenes/Document/components/History")
 );
 const DocumentInsights = React.lazy(
-  () =>
-    import(
-      /* webpackChunkName: "document-insights" */
-      "~/scenes/Document/components/Insights"
-    )
-);
-const CommandBar = React.lazy(
-  () =>
-    import(
-      /* webpackChunkName: "command-bar" */
-      "~/components/CommandBar"
-    )
+  () => import("~/scenes/Document/components/Insights")
 );
+const CommandBar = React.lazy(() => import("~/components/CommandBar"));
 
 const AuthenticatedLayout: React.FC = ({ children }) => {
   const { ui, auth } = useStores();

app/components/Collaborators.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
 import Document from "~/models/Document";
-import { AvatarWithPresence } from "~/components/Avatar";
+import AvatarWithPresence from "~/components/Avatar/AvatarWithPresence";
 import DocumentViews from "~/components/DocumentViews";
 import Facepile from "~/components/Facepile";
 import NudeButton from "~/components/NudeButton";

app/components/Editor.tsx

@@ -30,13 +30,7 @@ import { sharedDocumentPath } from "~/utils/routeHelpers";
 import { isHash } from "~/utils/urls";
 import DocumentBreadcrumb from "./DocumentBreadcrumb";
 
-const LazyLoadedEditor = React.lazy(
-  () =>
-    import(
-      /* webpackChunkName: "preload-shared-editor" */
-      "~/editor"
-    )
-);
+const LazyLoadedEditor = React.lazy(() => import("~/editor"));
 
 export type Props = Optional<
   EditorProps,

app/components/ErrorBoundary.tsx

@@ -30,7 +30,7 @@ class ErrorBoundary extends React.Component<Props> {
     if (
       this.props.reloadOnChunkMissing &&
       error.message &&
-      error.message.match(/chunk/)
+      error.message.match(/dynamically imported module/)
     ) {
       // If the editor bundle fails to load then reload the entire window. This
       // can happen if a deploy happens between the user loading the initial JS
@@ -60,7 +60,9 @@ class ErrorBoundary extends React.Component<Props> {
     if (this.error) {
       const error = this.error;
       const isReported = !!env.SENTRY_DSN && isCloudHosted;
-      const isChunkError = this.error.message.match(/chunk/);
+      const isChunkError = this.error.message.match(
+        /dynamically imported module/
+      );
 
       if (isChunkError) {
         return (

app/components/IconPicker.tsx

@@ -53,11 +53,7 @@ const style = {
 };
 
 const TwitterPicker = React.lazy(
-  () =>
-    import(
-      /* webpackChunkName: "twitter-picker" */
-      "react-color/lib/components/twitter/Twitter"
-    )
+  () => import("react-color/lib/components/twitter/Twitter")
 );
 
 export const icons = {

app/components/TableFromParams.tsx

@@ -5,13 +5,7 @@ import scrollIntoView from "smooth-scroll-into-view-if-needed";
 import useQuery from "~/hooks/useQuery";
 import type { Props } from "./Table";
 
-const Table = React.lazy(
-  () =>
-    import(
-      /* webpackChunkName: "table" */
-      "~/components/Table"
-    )
-);
+const Table = React.lazy(() => import("~/components/Table"));
 
 const TableFromParams = (
   props: Omit<Props, "onChangeSort" | "onChangePage" | "topRef">

app/components/Time.tsx

@@ -1,13 +1,7 @@
 import { formatDistanceToNow } from "date-fns";
 import * as React from "react";
 
-const LocaleTime = React.lazy(
-  () =>
-    import(
-      /* webpackChunkName: "locale-time" */
-      "~/components/LocaleTime"
-    )
-);
+const LocaleTime = React.lazy(() => import("~/components/LocaleTime"));
 
 type Props = React.ComponentProps<typeof LocaleTime> & {
   onClick?: () => void;