Fix app when built in production mode

The recent typescripting appears to have caused the typescript
compiler to get confused about dependency references and start
refwrencing things like CRYPTO_ENABLED in the js-sdk before it's
defined them.

This avoids using things from the (javascript) browser-index import
and instead pulls everything in from the typescript files, then
fixes the resulting type failures, (in some cases with hacks).

src/auth/useInteractiveLogin.ts

@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 import { useCallback } from "react";
-import matrix, { InteractiveAuth } from "matrix-js-sdk/src/browser-index";
-import { MatrixClient } from "matrix-js-sdk";
+import { InteractiveAuth } from "matrix-js-sdk/src/interactive-auth";
+import { createClient, MatrixClient } from "matrix-js-sdk/src/matrix";
 
 import { initClient, defaultHomeserver } from "../matrix-utils";
 import { Session } from "../ClientContext";
@@ -29,7 +29,7 @@ export const useInteractiveLogin = () =>
       password: string
     ) => Promise<[MatrixClient, Session]>
   >(async (homeserver: string, username: string, password: string) => {
-    const authClient = matrix.createClient(homeserver);
+    const authClient = createClient(homeserver);
 
     const interactiveAuth = new InteractiveAuth({
       matrixClient: authClient,
@@ -41,11 +41,15 @@ export const useInteractiveLogin = () =>
           },
           password,
         }),
+      stateUpdated: null,
+      requestEmailToken: null,
     });
 
+    // XXX: This claims to return an IAuthData which contains none of these
+    // things - the js-sdk types may be wrong?
     /* eslint-disable camelcase */
     const { user_id, access_token, device_id } =
-      await interactiveAuth.attemptAuth();
+      (await interactiveAuth.attemptAuth()) as any;
     const session = {
       user_id,
       access_token,

src/auth/useInteractiveRegistration.ts

@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 import { useState, useEffect, useCallback, useRef } from "react";
-import matrix, { InteractiveAuth } from "matrix-js-sdk/src/browser-index";
-import { MatrixClient } from "matrix-js-sdk/src/client";
+import { InteractiveAuth } from "matrix-js-sdk/src/interactive-auth";
+import { createClient, MatrixClient } from "matrix-js-sdk/src/matrix";
 
 import { initClient, defaultHomeserver } from "../matrix-utils";
 import { Session } from "../ClientContext";
@@ -37,7 +37,7 @@ export const useInteractiveRegistration = (): [
 
   const authClient = useRef<MatrixClient>();
   if (!authClient.current) {
-    authClient.current = matrix.createClient(defaultHomeserver);
+    authClient.current = createClient(defaultHomeserver);
   }
 
   useEffect(() => {
@@ -81,11 +81,14 @@ export const useInteractiveRegistration = (): [
             });
           }
         },
+        requestEmailToken: null,
       });
 
+      // XXX: This claims to return an IAuthData which contains none of these
+      // things - the js-sdk types may be wrong?
       /* eslint-disable camelcase */
       const { user_id, access_token, device_id } =
-        await interactiveAuth.attemptAuth();
+        (await interactiveAuth.attemptAuth()) as any;
 
       const client = await initClient({
         baseUrl: defaultHomeserver,

src/main.jsx

@@ -14,6 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+// We need to import this somewhere, once, so that the correct 'request'
+// function gets set. It needs to be not in the same file as we use
+// createClient, or the typescript transpiler gets confused about
+// dependency references.
+import "matrix-js-sdk/src/browser-index";
+
 import React from "react";
 import ReactDOM from "react-dom";
 import { createBrowserHistory } from "history";