Convert imports to ES6 from CommonJS

This is needed because `require()` means something different in webpack - it ends up importing the module as something we didn't expect (and is occasionally async)

src/components/structures/InteractiveAuth.js

@@ -15,9 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import Matrix from 'matrix-js-sdk';
-const InteractiveAuth = Matrix.InteractiveAuth;
-
+import {InteractiveAuth} from "matrix-js-sdk";
 import React, {createRef} from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';

src/components/structures/MatrixChat.js

@@ -20,7 +20,7 @@ limitations under the License.
 import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
-import Matrix from "matrix-js-sdk";
+import * as Matrix from "matrix-js-sdk";
 
 // focus-visible is a Polyfill for the :focus-visible CSS pseudo-attribute used by _AccessibleButton.scss
 import 'focus-visible';

src/components/structures/NotificationPanel.js

@@ -19,8 +19,7 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 import { _t } from '../../languageHandler';
 import {MatrixClientPeg} from "../../MatrixClientPeg";
-
-const sdk = require('../../index');
+import * as sdk from "../../index";
 
 /*
  * Component which shows the global notification list using a TimelinePanel

src/components/structures/RoomDirectory.js

@@ -20,11 +20,9 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 import {ContentRepo} from "matrix-js-sdk";
 import {MatrixClientPeg} from "../../MatrixClientPeg";
-
-const Modal = require('../../Modal');
-const sdk = require('../../index');
-const dis = require('../../dispatcher');
-
+import * as sdk from "../../index";
+import dis from "../../dispatcher";
+import Modal from "../../Modal";
 import { linkifyAndSanitizeHtml } from '../../HtmlUtils';
 import PropTypes from 'prop-types';
 import { _t } from '../../languageHandler';

src/components/structures/TimelinePanel.js

@@ -18,22 +18,19 @@ limitations under the License.
 */
 
 import SettingsStore from "../../settings/SettingsStore";
-
 import React, {createRef} from 'react';
 import createReactClass from 'create-react-class';
 import ReactDOM from "react-dom";
 import PropTypes from 'prop-types';
-
-const Matrix = require("matrix-js-sdk");
-const EventTimeline = Matrix.EventTimeline;
-
-const sdk = require('../../index');
+import {EventTimeline} from "matrix-js-sdk";
+import * as Matrix from "matrix-js-sdk";
 import { _t } from '../../languageHandler';
 import {MatrixClientPeg} from "../../MatrixClientPeg";
-const dis = require("../../dispatcher");
 import * as ObjectUtils from "../../ObjectUtils";
-const Modal = require("../../Modal");
-const UserActivity = require("../../UserActivity");
+import UserActivity from "../../UserActivity";
+import Modal from "../../Modal";
+import dis from "../../dispatcher";
+import * as sdk from "../../index";
 import { KeyCode } from '../../Keyboard';
 import Timer from '../../utils/Timer';
 import shouldHideEvent from '../../shouldHideEvent';

src/components/structures/UploadBar.js

@@ -18,8 +18,8 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import ContentMessages from '../../ContentMessages';
-const dis = require('../../dispatcher');
-const filesize = require('filesize');
+import dis from "../../dispatcher";
+import filesize from "filesize";
 import { _t } from '../../languageHandler';
 
 module.exports = createReactClass({

src/components/views/avatars/MemberAvatar.js

@@ -18,8 +18,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import * as Avatar from '../../../Avatar';
-const sdk = require("../../../index");
-const dispatcher = require("../../../dispatcher");
+import * as sdk from "../../../index";
+import dis from "../../../dispatcher";
 
 module.exports = createReactClass({
     displayName: 'MemberAvatar',

src/components/views/elements/ImageView.js

@@ -21,11 +21,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import {formatDate} from '../../../DateUtils';
-const filesize = require('filesize');
-const AccessibleButton = require('../../../components/views/elements/AccessibleButton');
-const Modal = require('../../../Modal');
-const sdk = require('../../../index');
 import { _t } from '../../../languageHandler';
+import filesize from "filesize";
+import AccessibleButton from "./AccessibleButton";
+import Modal from "../../../Modal";
+import * as sdk from "../../../index";
 
 export default class ImageView extends React.Component {
     static propTypes = {

src/components/views/room_settings/AliasSettings.js

@@ -15,14 +15,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-const React = require('react');
+import React from "react";
 import PropTypes from 'prop-types';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
-const sdk = require("../../../index");
+import * as sdk from "../../../index";
 import { _t } from '../../../languageHandler';
 import Field from "../elements/Field";
 import ErrorDialog from "../dialogs/ErrorDialog";
-const Modal = require("../../../Modal");
+import Modal from "../../../Modal";
 
 export default class AliasSettings extends React.Component {
     static propTypes = {

src/components/views/rooms/EventTile.js

@@ -18,17 +18,14 @@ limitations under the License.
 */
 
 import ReplyThread from "../elements/ReplyThread";
-
 import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
-const classNames = require("classnames");
+import classNames from "classnames";
 import { _t, _td } from '../../../languageHandler';
 import * as TextForEvent from "../../../TextForEvent";
-const Modal = require('../../../Modal');
-
-const sdk = require('../../../index');
-
+import Modal from "../../../Modal";
+import * as sdk from "../../../index";
 import dis from '../../../dispatcher';
 import SettingsStore from "../../../settings/SettingsStore";
 import {EventStatus, MatrixClient} from 'matrix-js-sdk';

src/components/views/rooms/LinkPreviewWidget.js

@@ -20,10 +20,9 @@ import createReactClass from 'create-react-class';
 import { linkifyElement } from '../../../HtmlUtils';
 import SettingsStore from "../../../settings/SettingsStore";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
-
-const sdk = require('../../../index');
-const ImageUtils = require('../../../ImageUtils');
-const Modal = require('../../../Modal');
+import * as sdk from "../../../index";
+import Modal from "../../../Modal";
+import * as ImageUtils from "../../../ImageUtils";
 
 module.exports = createReactClass({
     displayName: 'LinkPreviewWidget',

src/components/views/rooms/MemberList.js

@@ -25,8 +25,8 @@ import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import {isValid3pidInvite} from "../../../RoomInvite";
 import rate_limited_func from "../../../ratelimitedfunc";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
-const sdk = require('../../../index');
-const CallHandler = require("../../../CallHandler");
+import * as sdk from "../../../index";
+import CallHandler from "../../../CallHandler";
 
 const INITIAL_LOAD_NUM_MEMBERS = 30;
 const INITIAL_LOAD_NUM_INVITED = 5;

src/components/views/rooms/MemberTile.js

@@ -15,13 +15,11 @@ limitations under the License.
 */
 
 import SettingsStore from "../../../settings/SettingsStore";
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
-
-const sdk = require('../../../index');
-const dis = require('../../../dispatcher');
+import * as sdk from "../../../index";
+import dis from "../../../dispatcher";
 import { _t } from '../../../languageHandler';
 
 module.exports = createReactClass({

src/components/views/rooms/ReadReceiptMarker.js

@@ -18,14 +18,11 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
-
-const sdk = require('../../../index');
-
-const Velociraptor = require('../../../Velociraptor');
-require('../../../VelocityBounce');
+import('../../../VelocityBounce');
 import { _t } from '../../../languageHandler';
-
 import {formatDate} from '../../../DateUtils';
+import Velociraptor from "../../../Velociraptor";
+import * as sdk from "../../../index";
 
 let bounce = false;
 try {

src/components/views/rooms/RoomList.js

@@ -17,29 +17,28 @@ limitations under the License.
 
 import SettingsStore from "../../../settings/SettingsStore";
 import Timer from "../../../utils/Timer";
-
 import React from "react";
 import ReactDOM from "react-dom";
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
-const CallHandler = require('../../../CallHandler');
-const dis = require("../../../dispatcher");
-const sdk = require('../../../index');
 import rate_limited_func from "../../../ratelimitedfunc";
 import * as Rooms from '../../../Rooms';
 import DMRoomMap from '../../../utils/DMRoomMap';
-const Receipt = require('../../../utils/Receipt');
 import TagOrderStore from '../../../stores/TagOrderStore';
 import RoomListStore from '../../../stores/RoomListStore';
 import CustomRoomTagStore from '../../../stores/CustomRoomTagStore';
 import GroupStore from '../../../stores/GroupStore';
 import RoomSubList from '../../structures/RoomSubList';
 import ResizeHandle from '../elements/ResizeHandle';
-
+import CallHandler from "../../../CallHandler";
+import dis from "../../../dispatcher";
+import * as sdk from "../../../index";
+import * as Receipt from "../../../utils/Receipt";
 import {Resizer} from '../../../resizer';
 import {Layout, Distributor} from '../../../resizer/distributors/roomsublist2';
+
 const HIDE_CONFERENCE_CHANS = true;
 const STANDARD_TAGS_REGEX = /^(m\.(favourite|lowpriority|server_notice)|im\.vector\.fake\.(invite|recent|direct|archived))$/;
 const HOVER_MOVE_TIMEOUT = 1000;

src/components/views/rooms/RoomNameEditor.js

@@ -18,7 +18,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
-const sdk = require('../../../index');
+import * as sdk from "../../../index";
 import { _t } from '../../../languageHandler';
 
 module.exports = createReactClass({

src/components/views/rooms/SearchBar.js

@@ -16,8 +16,8 @@ limitations under the License.
 
 import React, {createRef} from 'react';
 import createReactClass from 'create-react-class';
-const classNames = require('classnames');
-const AccessibleButton = require('../../../components/views/elements/AccessibleButton');
+import AccessibleButton from "../elements/AccessibleButton";
+import classNames from "classnames";
 import { _t } from '../../../languageHandler';
 
 module.exports = createReactClass({

src/components/views/rooms/UserTile.js

@@ -18,8 +18,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import * as Avatar from '../../../Avatar';
-
-const sdk = require('../../../index');
+import * as sdk from "../../../index";
 
 module.exports = createReactClass({
     displayName: 'UserTile',

src/components/views/settings/ChangePassword.js

@@ -16,17 +16,15 @@ limitations under the License.
 */
 
 import Field from "../elements/Field";
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
-const Modal = require("../../../Modal");
-const sdk = require("../../../index");
-
 import dis from "../../../dispatcher";
 import AccessibleButton from '../elements/AccessibleButton';
 import { _t } from '../../../languageHandler';
+import * as sdk from "../../../index";
+import Modal from "../../../Modal";
 
 import sessionStore from '../../../stores/SessionStore';
 

src/components/views/settings/tabs/user/LabsUserSettingsTab.js

@@ -19,7 +19,7 @@ import {_t} from "../../../../../languageHandler";
 import PropTypes from "prop-types";
 import SettingsStore, {SettingLevel} from "../../../../../settings/SettingsStore";
 import LabelledToggleSwitch from "../../../elements/LabelledToggleSwitch";
-const sdk = require("../../../../..");
+import * as sdk from "../../../../../index";
 
 export class LabsSettingToggle extends React.Component {
     static propTypes = {

src/components/views/settings/tabs/user/MjolnirUserSettingsTab.js

@@ -21,8 +21,7 @@ import {ListRule} from "../../../../../mjolnir/ListRule";
 import {BanList, RULE_SERVER, RULE_USER} from "../../../../../mjolnir/BanList";
 import Modal from "../../../../../Modal";
 import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
-
-const sdk = require("../../../../..");
+import * as sdk from "../../../../../index";
 
 export default class MjolnirUserSettingsTab extends React.Component {
     constructor() {

src/components/views/settings/tabs/user/NotificationUserSettingsTab.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import {_t} from "../../../../../languageHandler";
-const sdk = require("../../../../..");
+import * as sdk from "../../../../../index";
 
 export default class NotificationUserSettingsTab extends React.Component {
     constructor() {

src/components/views/settings/tabs/user/VoiceUserSettingsTab.js

@@ -21,8 +21,8 @@ import Field from "../../../elements/Field";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import {SettingLevel} from "../../../../../settings/SettingsStore";
 import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
-const Modal = require("../../../../../Modal");
-const sdk = require("../../../../..");
+import * as sdk from "../../../../../index";
+import Modal from "../../../../../Modal";
 
 export default class VoiceUserSettingsTab extends React.Component {
     constructor() {