dynamically import socket.io-client when needed (#1631)

src/components/App.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 
-import socketIOClient from "socket.io-client";
 import rough from "roughjs/bin/rough";
 import { RoughCanvas } from "roughjs/bin/canvas";
 import { simplify, Point } from "points-on-curve";
@@ -804,7 +803,9 @@ class App extends React.Component<any, AppState> {
     this.portal.close();
   };
 
-  private initializeSocketClient = (opts: { showLoadingState: boolean }) => {
+  private initializeSocketClient = async (opts: {
+    showLoadingState: boolean;
+  }) => {
     if (this.portal.socket) {
       return;
     }
@@ -925,6 +926,10 @@ class App extends React.Component<any, AppState> {
         }
       };
 
+      const { default: socketIOClient }: any = await import(
+        /* webpackChunkName: "socketIoClient" */ "socket.io-client"
+      );
+
       this.portal.open(
         socketIOClient(SOCKET_SERVER),
         roomMatch[1],

src/index.tsx

@@ -18,7 +18,7 @@ if (
   /\b(iPad|iPhone|iPod)\b/.test(navigator.userAgent) &&
   !matchMedia("(display-mode: standalone)").matches
 ) {
-  import("pwacompat");
+  import(/* webpackChunkName: "pwacompat" */ "pwacompat");
 }
 
 const SentryEnvHostnameMap: { [key: string]: string } = {