diff --git a/.eslintrc.js b/.eslintrc.js
index 6d2cf1905..d72d9e0d6 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -47,7 +47,6 @@ module.exports = {
         '@typescript-eslint/no-empty-function': 0,
         '@typescript-eslint/no-use-before-define': 0,
         '@typescript-eslint/no-explicit-any': 0,
-        '@typescript-eslint/no-var-requires': 0,
         '@typescript-eslint/no-unused-vars': 2,
         '@typescript-eslint/explicit-module-boundary-types': 0,
         '@typescript-eslint/ban-types': 0,
diff --git a/scripts/generate-keyfile.ts b/scripts/generate-keyfile.ts
index 889a1c74a..b7a6add73 100644
--- a/scripts/generate-keyfile.ts
+++ b/scripts/generate-keyfile.ts
@@ -1,8 +1,8 @@
 #! /usr/bin/env ts-node
 
-import ora = require('ora');
-import fs = require('fs');
-import path = require('path');
+import ora from 'ora';
+import fs from 'fs';
+import path from 'path';
 import { resolve } from 'path';
 import { config } from 'dotenv';
 import { promisify } from 'util';
diff --git a/src/connectionController.ts b/src/connectionController.ts
index 328dd7095..2c1c195e5 100644
--- a/src/connectionController.ts
+++ b/src/connectionController.ts
@@ -27,9 +27,10 @@ import {
 import { StorageController, StorageVariables } from './storage';
 import { StatusView } from './views';
 import TelemetryService from './telemetry/telemetryService';
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const packageJSON = require('../package.json');
 
 const log = createLogger('connection controller');
-const packageJSON = require('../package.json');
 
 const MAX_CONNECTION_NAME_LENGTH = 512;
 
diff --git a/src/editors/memoryFileSystemProvider.ts b/src/editors/memoryFileSystemProvider.ts
index 9157c2983..805cad072 100644
--- a/src/editors/memoryFileSystemProvider.ts
+++ b/src/editors/memoryFileSystemProvider.ts
@@ -1,5 +1,5 @@
 /* eslint-disable new-cap */
-import * as path from 'path';
+import path from 'path';
 import * as vscode from 'vscode';
 
 export class File implements vscode.FileStat {
diff --git a/src/editors/mongoDBDocumentService.ts b/src/editors/mongoDBDocumentService.ts
index da6699bd7..cbaa8c3ae 100644
--- a/src/editors/mongoDBDocumentService.ts
+++ b/src/editors/mongoDBDocumentService.ts
@@ -1,4 +1,4 @@
-import * as util from 'util';
+import util from 'util';
 import * as vscode from 'vscode';
 import { EJSON } from 'bson';
 import type { Document } from 'bson';
diff --git a/src/editors/playgroundController.ts b/src/editors/playgroundController.ts
index d0c2773bc..91ed1bb3c 100644
--- a/src/editors/playgroundController.ts
+++ b/src/editors/playgroundController.ts
@@ -2,7 +2,8 @@ import * as vscode from 'vscode';
 import path from 'path';
 import { OutputChannel, ProgressLocation, TextEditor } from 'vscode';
 import vm from 'vm';
-import * as os from 'os';
+import os from 'os';
+import transpiler from 'bson-transpilers';
 
 import ActiveConnectionCodeLensProvider from './activeConnectionCodeLensProvider';
 import PlaygroundSelectedCodeActionProvider from './playgroundSelectedCodeActionProvider';
@@ -42,7 +43,6 @@ import TelemetryService from '../telemetry/telemetryService';
 import { isPlayground } from '../utils/playground';
 
 const log = createLogger('playground controller');
-const transpiler = require('bson-transpilers');
 
 interface ToCompile {
   filter?: string;
diff --git a/src/explorer/collectionTreeItem.ts b/src/explorer/collectionTreeItem.ts
index 60242a1bd..20b3fb1c4 100644
--- a/src/explorer/collectionTreeItem.ts
+++ b/src/explorer/collectionTreeItem.ts
@@ -1,4 +1,4 @@
-import * as util from 'util';
+import util from 'util';
 import * as vscode from 'vscode';
 import path from 'path';
 import type { DataService } from 'mongodb-data-service';
diff --git a/src/explorer/databaseTreeItem.ts b/src/explorer/databaseTreeItem.ts
index 5cff71aaa..8c31171a6 100644
--- a/src/explorer/databaseTreeItem.ts
+++ b/src/explorer/databaseTreeItem.ts
@@ -1,4 +1,4 @@
-import * as util from 'util';
+import util from 'util';
 import * as vscode from 'vscode';
 import path from 'path';
 
diff --git a/src/explorer/documentListTreeItem.ts b/src/explorer/documentListTreeItem.ts
index a4ab15003..809a7ef9a 100644
--- a/src/explorer/documentListTreeItem.ts
+++ b/src/explorer/documentListTreeItem.ts
@@ -1,5 +1,6 @@
 import * as vscode from 'vscode';
 import numeral from 'numeral';
+import path from 'path';
 
 import { createLogger } from '../logging';
 import DocumentTreeItem from './documentTreeItem';
@@ -8,7 +9,6 @@ import { getImagesPath } from '../extensionConstants';
 import TreeItemParent from './treeItemParentInterface';
 import type { DataService } from 'mongodb-data-service';
 
-const path = require('path');
 const log = createLogger('documents tree item');
 
 // We fetch 1 more than this in order to see if there are more to fetch.
diff --git a/src/explorer/helpTree.ts b/src/explorer/helpTree.ts
index b3c9e74d5..5211757a0 100644
--- a/src/explorer/helpTree.ts
+++ b/src/explorer/helpTree.ts
@@ -1,9 +1,9 @@
 import * as vscode from 'vscode';
-import { openLink } from '../utils/linkHelper';
-const path = require('path');
+import path from 'path';
 
 import { getImagesPath } from '../extensionConstants';
 import { TelemetryService } from '../telemetry';
+import { openLink } from '../utils/linkHelper';
 
 const HELP_LINK_CONTEXT_VALUE = 'HELP_LINK';
 
diff --git a/src/explorer/indexListTreeItem.ts b/src/explorer/indexListTreeItem.ts
index c4faca9de..ec899df10 100644
--- a/src/explorer/indexListTreeItem.ts
+++ b/src/explorer/indexListTreeItem.ts
@@ -1,4 +1,4 @@
-import * as util from 'util';
+import util from 'util';
 import * as vscode from 'vscode';
 import { DataService } from 'mongodb-data-service';
 import path from 'path';
diff --git a/src/explorer/indexTreeItem.ts b/src/explorer/indexTreeItem.ts
index 2bebba929..0d6314b37 100644
--- a/src/explorer/indexTreeItem.ts
+++ b/src/explorer/indexTreeItem.ts
@@ -1,5 +1,5 @@
 import * as vscode from 'vscode';
-const path = require('path');
+import path from 'path';
 
 import { getImagesPath } from '../extensionConstants';
 import TreeItemParent from './treeItemParentInterface';
diff --git a/src/explorer/playgroundsTreeItem.ts b/src/explorer/playgroundsTreeItem.ts
index fa64e16d7..46fa6fbae 100644
--- a/src/explorer/playgroundsTreeItem.ts
+++ b/src/explorer/playgroundsTreeItem.ts
@@ -1,5 +1,5 @@
 import * as vscode from 'vscode';
-import path = require('path');
+import path from 'path';
 import { getImagesPath } from '../extensionConstants';
 
 export const PLAYGROUND_ITEM = 'playgroundsTreeItem';
diff --git a/src/logging.ts b/src/logging.ts
index 070e3618c..f2204edf2 100644
--- a/src/logging.ts
+++ b/src/logging.ts
@@ -1,6 +1,6 @@
 import { Logger as ILogger } from 'ts-log';
 import * as vscode from 'vscode';
-import * as util from 'util';
+import util from 'util';
 
 class Logger implements ILogger {
   static channel: vscode.OutputChannel =
diff --git a/src/telemetry/connectionTelemetry.ts b/src/telemetry/connectionTelemetry.ts
index 37b4f42ce..e14ab650a 100644
--- a/src/telemetry/connectionTelemetry.ts
+++ b/src/telemetry/connectionTelemetry.ts
@@ -6,6 +6,7 @@ import { ConnectionTypes } from '../connectionController';
 import { createLogger } from '../logging';
 
 const log = createLogger('connection telemetry helper');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { version } = require('../../package.json');
 
 export type NewConnectionTelemetryEventProperties = {
diff --git a/src/telemetry/telemetryService.ts b/src/telemetry/telemetryService.ts
index 5898c92fd..fdfa5fda2 100644
--- a/src/telemetry/telemetryService.ts
+++ b/src/telemetry/telemetryService.ts
@@ -1,4 +1,4 @@
-import * as path from 'path';
+import path from 'path';
 import * as vscode from 'vscode';
 import { config } from 'dotenv';
 import { DataService } from 'mongodb-data-service';
@@ -14,6 +14,7 @@ import type { ShellEvaluateResult } from '../types/playgroundType';
 import { StorageController } from '../storage';
 
 const log = createLogger('telemetry');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { version } = require('../../package.json');
 
 type PlaygroundTelemetryEventProperties = {
diff --git a/src/test/runTest.ts b/src/test/runTest.ts
index 1b426f0b6..15383d9a9 100644
--- a/src/test/runTest.ts
+++ b/src/test/runTest.ts
@@ -1,5 +1,4 @@
-import path = require('path');
-
+import path from 'path';
 import { runTests } from '@vscode/test-electron';
 
 // More information on vscode specific tests: https://github.com/microsoft/vscode-test
diff --git a/src/test/suite/connectionController.test.ts b/src/test/suite/connectionController.test.ts
index b93e4d90e..de15f8baa 100644
--- a/src/test/suite/connectionController.test.ts
+++ b/src/test/suite/connectionController.test.ts
@@ -1,6 +1,6 @@
 import sinon from 'sinon';
 import type { SinonStub } from 'sinon';
-import * as util from 'util';
+import util from 'util';
 import * as vscode from 'vscode';
 import { afterEach, beforeEach } from 'mocha';
 import assert from 'assert';
diff --git a/src/test/suite/dbTestHelper.ts b/src/test/suite/dbTestHelper.ts
index 35d2b34d5..7c406a8b0 100644
--- a/src/test/suite/dbTestHelper.ts
+++ b/src/test/suite/dbTestHelper.ts
@@ -1,6 +1,6 @@
 import { connect, DataService } from 'mongodb-data-service';
+import util from 'util';
 import type { Document } from 'bson';
-import * as util from 'util';
 
 export const TEST_USER_USERNAME = 'testUser';
 export const TEST_USER_PASSWORD = 'password';
diff --git a/src/test/suite/editors/editDocumentCodeLensProvider.test.ts b/src/test/suite/editors/editDocumentCodeLensProvider.test.ts
index 748e96bf9..843454350 100644
--- a/src/test/suite/editors/editDocumentCodeLensProvider.test.ts
+++ b/src/test/suite/editors/editDocumentCodeLensProvider.test.ts
@@ -3,7 +3,7 @@ import assert from 'assert';
 import { afterEach } from 'mocha';
 import { ObjectId } from 'bson';
 import sinon from 'sinon';
-import * as util from 'util';
+import util from 'util';
 
 import ConnectionController from '../../../connectionController';
 import { DocumentSource } from '../../../documentSource';
diff --git a/src/test/suite/editors/playgroundController.test.ts b/src/test/suite/editors/playgroundController.test.ts
index ad09afb92..256f9c842 100644
--- a/src/test/suite/editors/playgroundController.test.ts
+++ b/src/test/suite/editors/playgroundController.test.ts
@@ -6,6 +6,7 @@ import sinon from 'sinon';
 import type { SinonSpy, SinonStub } from 'sinon';
 import { v4 as uuidv4 } from 'uuid';
 import path from 'path';
+import chaiAsPromised from 'chai-as-promised';
 
 import ActiveDBCodeLensProvider from '../../../editors/activeConnectionCodeLensProvider';
 import PlaygroundSelectedCodeActionProvider from '../../../editors/playgroundSelectedCodeActionProvider';
@@ -25,7 +26,7 @@ import { ExtensionContextStub, LanguageServerControllerStub } from '../stubs';
 
 const expect = chai.expect;
 
-chai.use(require('chai-as-promised'));
+chai.use(chaiAsPromised);
 
 suite('Playground Controller Test Suite', function () {
   this.timeout(5000);
diff --git a/src/test/suite/explorer/collectionTreeItem.test.ts b/src/test/suite/explorer/collectionTreeItem.test.ts
index 2aaa57c51..4e6f0e63f 100644
--- a/src/test/suite/explorer/collectionTreeItem.test.ts
+++ b/src/test/suite/explorer/collectionTreeItem.test.ts
@@ -5,6 +5,7 @@ import { CollectionTypes } from '../../../explorer/documentListTreeItem';
 import { ext } from '../../../extensionConstants';
 import { ExtensionContextStub, DataServiceStub } from '../stubs';
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { contributes } = require('../../../../package.json');
 
 suite('CollectionTreeItem Test Suite', () => {
diff --git a/src/test/suite/explorer/connectionTreeItem.test.ts b/src/test/suite/explorer/connectionTreeItem.test.ts
index 391115fa6..4cc703491 100644
--- a/src/test/suite/explorer/connectionTreeItem.test.ts
+++ b/src/test/suite/explorer/connectionTreeItem.test.ts
@@ -11,6 +11,7 @@ import { DataServiceStub } from '../stubs';
 import formatError from '../../../utils/formatError';
 import { mdbTestExtension } from '../stubbableMdbExtension';
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { contributes } = require('../../../../package.json');
 
 suite('ConnectionTreeItem Test Suite', () => {
diff --git a/src/test/suite/explorer/databaseTreeItem.test.ts b/src/test/suite/explorer/databaseTreeItem.test.ts
index c635d7bfd..dcd06f9c2 100644
--- a/src/test/suite/explorer/databaseTreeItem.test.ts
+++ b/src/test/suite/explorer/databaseTreeItem.test.ts
@@ -14,6 +14,7 @@ import {
   TEST_DATABASE_URI,
 } from '../dbTestHelper';
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { contributes } = require('../../../../package.json');
 
 suite('DatabaseTreeItem Test Suite', () => {
diff --git a/src/test/suite/explorer/documentListTreeItem.test.ts b/src/test/suite/explorer/documentListTreeItem.test.ts
index 707bb141b..b65203641 100644
--- a/src/test/suite/explorer/documentListTreeItem.test.ts
+++ b/src/test/suite/explorer/documentListTreeItem.test.ts
@@ -3,6 +3,7 @@ import { before } from 'mocha';
 import assert from 'assert';
 import type { DataService } from 'mongodb-data-service';
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { contributes } = require('../../../../package.json');
 
 import DocumentListTreeItem, {
diff --git a/src/test/suite/explorer/fieldTreeItem.test.ts b/src/test/suite/explorer/fieldTreeItem.test.ts
index f99884087..c89836ff6 100644
--- a/src/test/suite/explorer/fieldTreeItem.test.ts
+++ b/src/test/suite/explorer/fieldTreeItem.test.ts
@@ -18,6 +18,7 @@ import {
 import SchemaTreeItem from '../../../explorer/schemaTreeItem';
 import { ExtensionContextStub } from '../stubs';
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { contributes } = require('../../../../package.json');
 
 suite('FieldTreeItem Test Suite', function () {
diff --git a/src/test/suite/explorer/indexListTreeItem.test.ts b/src/test/suite/explorer/indexListTreeItem.test.ts
index cf62d347e..5a277329e 100644
--- a/src/test/suite/explorer/indexListTreeItem.test.ts
+++ b/src/test/suite/explorer/indexListTreeItem.test.ts
@@ -8,6 +8,7 @@ import { DataService } from 'mongodb-data-service';
 import formatError from '../../../utils/formatError';
 import IndexListTreeItem from '../../../explorer/indexListTreeItem';
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { contributes } = require('../../../../package.json');
 
 suite('IndexListTreeItem Test Suite', () => {
diff --git a/src/test/suite/explorer/playgroundsExplorer.test.ts b/src/test/suite/explorer/playgroundsExplorer.test.ts
index 55ec58b97..380bd6eb7 100644
--- a/src/test/suite/explorer/playgroundsExplorer.test.ts
+++ b/src/test/suite/explorer/playgroundsExplorer.test.ts
@@ -1,7 +1,7 @@
 import assert from 'assert';
 import * as vscode from 'vscode';
 import { before, afterEach } from 'mocha';
-import * as path from 'path';
+import path from 'path';
 import { mdbTestExtension } from '../stubbableMdbExtension';
 import PlaygroundsTree from './../../../explorer/playgroundsTree';
 
diff --git a/src/test/suite/explorer/schemaTreeItem.test.ts b/src/test/suite/explorer/schemaTreeItem.test.ts
index 7ef0fc52b..6a119199a 100644
--- a/src/test/suite/explorer/schemaTreeItem.test.ts
+++ b/src/test/suite/explorer/schemaTreeItem.test.ts
@@ -1,5 +1,5 @@
 import * as vscode from 'vscode';
-import * as sinon from 'sinon';
+import sinon from 'sinon';
 import { after, afterEach, before } from 'mocha';
 import assert from 'assert';
 import { inspect } from 'util';
@@ -21,6 +21,7 @@ import SchemaTreeItem, {
 } from '../../../explorer/schemaTreeItem';
 import { ExtensionContextStub } from '../stubs';
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { contributes } = require('../../../../package.json');
 
 suite('SchemaTreeItem Test Suite', function () {
diff --git a/src/test/suite/extension.test.ts b/src/test/suite/extension.test.ts
index 97be06fd7..f0379aded 100644
--- a/src/test/suite/extension.test.ts
+++ b/src/test/suite/extension.test.ts
@@ -2,6 +2,7 @@ import assert from 'assert';
 import * as vscode from 'vscode';
 import EXTENSION_COMMANDS from '../../commands';
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { contributes } = require('../../../package.json');
 
 suite('Extension Test Suite', () => {
diff --git a/src/test/suite/index.ts b/src/test/suite/index.ts
index 33777b621..a21c915e0 100644
--- a/src/test/suite/index.ts
+++ b/src/test/suite/index.ts
@@ -1,6 +1,6 @@
 import Mocha from 'mocha';
 import glob from 'glob';
-import path = require('path');
+import path from 'path';
 import MDBExtensionController from '../../mdbExtensionController';
 import { ext } from '../../extensionConstants';
 import KeytarStub from './keytarStub';
@@ -33,7 +33,7 @@ export async function run(): Promise<void> {
   await mdbTestExtension.testExtensionController.activate();
 
   return new Promise((c, e) => {
-    glob(
+    void glob(
       '**/**.test.js',
       {
         cwd: testsRoot,
diff --git a/src/test/suite/language/languageServerController.test.ts b/src/test/suite/language/languageServerController.test.ts
index 2f6de32b3..726a7cf75 100644
--- a/src/test/suite/language/languageServerController.test.ts
+++ b/src/test/suite/language/languageServerController.test.ts
@@ -5,6 +5,7 @@ import fs from 'fs';
 import path from 'path';
 import sinon from 'sinon';
 import type { DataService } from 'mongodb-data-service';
+import chaiAsPromised from 'chai-as-promised';
 
 import ActiveDBCodeLensProvider from '../../../editors/activeConnectionCodeLensProvider';
 import PlaygroundSelectedCodeActionProvider from '../../../editors/playgroundSelectedCodeActionProvider';
@@ -24,7 +25,7 @@ import { ExtensionContextStub } from '../stubs';
 
 const expect = chai.expect;
 
-chai.use(require('chai-as-promised'));
+chai.use(chaiAsPromised);
 
 suite('Language Server Controller Test Suite', () => {
   const extensionContextStub = new ExtensionContextStub();
diff --git a/src/test/suite/playground.test.ts b/src/test/suite/playground.test.ts
index 2244f9745..e8b329e88 100644
--- a/src/test/suite/playground.test.ts
+++ b/src/test/suite/playground.test.ts
@@ -2,6 +2,7 @@ import * as vscode from 'vscode';
 import { afterEach, beforeEach } from 'mocha';
 import chai from 'chai';
 import sinon from 'sinon';
+import chaiAsPromised from 'chai-as-promised';
 
 import { mdbTestExtension } from './stubbableMdbExtension';
 import {
@@ -12,7 +13,7 @@ import {
 } from './suggestTestHelpers';
 
 const expect = chai.expect;
-chai.use(require('chai-as-promised'));
+chai.use(chaiAsPromised);
 
 const TEST_DATABASE_URI = 'mongodb://localhost:27018';
 
diff --git a/src/test/suite/snippets/stageAutocompleter.test.ts b/src/test/suite/snippets/stageAutocompleter.test.ts
index 6b5ea6d09..06b476165 100644
--- a/src/test/suite/snippets/stageAutocompleter.test.ts
+++ b/src/test/suite/snippets/stageAutocompleter.test.ts
@@ -1,6 +1,6 @@
 import * as chai from 'chai';
-import chaiFs = require('chai-fs');
-import chaiJsonSchema = require('chai-json-schema');
+import chaiFs from 'chai-fs';
+import chaiJsonSchema from 'chai-json-schema';
 
 chai.use(chaiFs);
 chai.use(chaiJsonSchema);
diff --git a/src/test/suite/stubs.ts b/src/test/suite/stubs.ts
index 2a0704359..6aed72f5a 100644
--- a/src/test/suite/stubs.ts
+++ b/src/test/suite/stubs.ts
@@ -6,7 +6,7 @@ import type {
 } from 'vscode-languageclient/node';
 import { LanguageClient, TransportKind } from 'vscode-languageclient/node';
 import { Duplex } from 'stream';
-import path = require('path');
+import path from 'path';
 import type { Document, Filter, FindOptions } from 'mongodb';
 
 import { StorageController } from '../../storage';
diff --git a/src/test/suite/telemetry/connectionTelemetry.test.ts b/src/test/suite/telemetry/connectionTelemetry.test.ts
index 8c6c7cdfe..0c5e5976d 100644
--- a/src/test/suite/telemetry/connectionTelemetry.test.ts
+++ b/src/test/suite/telemetry/connectionTelemetry.test.ts
@@ -7,7 +7,7 @@ import type { DataService } from 'mongodb-data-service';
 import getCloudInfoModule from 'mongodb-cloud-info';
 
 import { ConnectionTypes } from '../../../connectionController';
-import * as connectionTelemetry from '../../../telemetry/connectionTelemetry';
+import { getConnectionTelemetryProperties } from '../../../telemetry/connectionTelemetry';
 
 const TEST_DATABASE_URI = 'mongodb://localhost:27018';
 
@@ -49,11 +49,10 @@ suite('ConnectionTelemetry Controller Test Suite', function () {
     });
 
     test('it returns is_used_connect_screen true when the connection type is form', async () => {
-      const instanceTelemetry =
-        await connectionTelemetry.getConnectionTelemetryProperties(
-          dataServiceStub,
-          ConnectionTypes.CONNECTION_FORM
-        );
+      const instanceTelemetry = await getConnectionTelemetryProperties(
+        dataServiceStub,
+        ConnectionTypes.CONNECTION_FORM
+      );
 
       expect(instanceTelemetry.is_used_connect_screen).to.equal(true);
       expect(instanceTelemetry.is_used_command_palette).to.equal(false);
@@ -61,11 +60,10 @@ suite('ConnectionTelemetry Controller Test Suite', function () {
     });
 
     test('it returns is_used_command_palette true when the connection type is string', async () => {
-      const instanceTelemetry =
-        await connectionTelemetry.getConnectionTelemetryProperties(
-          dataServiceStub,
-          ConnectionTypes.CONNECTION_STRING
-        );
+      const instanceTelemetry = await getConnectionTelemetryProperties(
+        dataServiceStub,
+        ConnectionTypes.CONNECTION_STRING
+      );
 
       expect(instanceTelemetry.is_used_connect_screen).to.equal(false);
       expect(instanceTelemetry.is_used_command_palette).to.equal(true);
@@ -73,11 +71,10 @@ suite('ConnectionTelemetry Controller Test Suite', function () {
     });
 
     test('it returns is_used_saved_connection true when the connection type is id', async () => {
-      const instanceTelemetry =
-        await connectionTelemetry.getConnectionTelemetryProperties(
-          dataServiceStub,
-          ConnectionTypes.CONNECTION_ID
-        );
+      const instanceTelemetry = await getConnectionTelemetryProperties(
+        dataServiceStub,
+        ConnectionTypes.CONNECTION_ID
+      );
 
       expect(instanceTelemetry.is_used_connect_screen).to.equal(false);
       expect(instanceTelemetry.is_used_command_palette).to.equal(false);
@@ -85,31 +82,28 @@ suite('ConnectionTelemetry Controller Test Suite', function () {
     });
 
     test('it has is_localhost false for a remote connection', async () => {
-      const instanceTelemetry =
-        await connectionTelemetry.getConnectionTelemetryProperties(
-          dataServiceStub,
-          ConnectionTypes.CONNECTION_STRING
-        );
+      const instanceTelemetry = await getConnectionTelemetryProperties(
+        dataServiceStub,
+        ConnectionTypes.CONNECTION_STRING
+      );
 
       expect(instanceTelemetry.is_localhost).to.equal(false);
     });
 
     test('it has a default is atlas false', async () => {
-      const instanceTelemetry =
-        await connectionTelemetry.getConnectionTelemetryProperties(
-          dataServiceStub,
-          ConnectionTypes.CONNECTION_STRING
-        );
+      const instanceTelemetry = await getConnectionTelemetryProperties(
+        dataServiceStub,
+        ConnectionTypes.CONNECTION_STRING
+      );
 
       expect(instanceTelemetry.is_atlas).to.equal(false);
     });
 
     test('it has a default driver auth mechanism undefined', async () => {
-      const instanceTelemetry =
-        await connectionTelemetry.getConnectionTelemetryProperties(
-          dataServiceStub,
-          ConnectionTypes.CONNECTION_STRING
-        );
+      const instanceTelemetry = await getConnectionTelemetryProperties(
+        dataServiceStub,
+        ConnectionTypes.CONNECTION_STRING
+      );
 
       expect(instanceTelemetry.auth_strategy).to.equal('DEFAULT');
     });
@@ -128,11 +122,10 @@ suite('ConnectionTelemetry Controller Test Suite', function () {
     });
 
     test('track new connection event fetches the connection instance information', async () => {
-      const instanceTelemetry =
-        await connectionTelemetry.getConnectionTelemetryProperties(
-          dataServ,
-          ConnectionTypes.CONNECTION_STRING
-        );
+      const instanceTelemetry = await getConnectionTelemetryProperties(
+        dataServ,
+        ConnectionTypes.CONNECTION_STRING
+      );
 
       expect(instanceTelemetry.is_localhost).to.equal(true);
       expect(instanceTelemetry.is_atlas).to.equal(false);
diff --git a/src/test/suite/telemetry/telemetryService.test.ts b/src/test/suite/telemetry/telemetryService.test.ts
index c99c1463c..dc0e7f20e 100644
--- a/src/test/suite/telemetry/telemetryService.test.ts
+++ b/src/test/suite/telemetry/telemetryService.test.ts
@@ -109,6 +109,7 @@ suite('Telemetry Controller Test Suite', () => {
 
     try {
       const segmentKeyFileLocation = '../../../../constants';
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
       segmentKey = require(segmentKeyFileLocation)?.segmentKey;
     } catch (error) {
       expect(error).to.be.undefined;
diff --git a/src/test/suite/views/webview-app/components/app.test.tsx b/src/test/suite/views/webview-app/components/app.test.tsx
index b0fde7f44..0b954231d 100644
--- a/src/test/suite/views/webview-app/components/app.test.tsx
+++ b/src/test/suite/views/webview-app/components/app.test.tsx
@@ -1,7 +1,7 @@
 import assert from 'assert';
 import * as React from 'react';
 import { mount, shallow } from 'enzyme';
-import * as sinon from 'sinon';
+import sinon from 'sinon';
 import { Provider } from 'react-redux';
 import { createStore } from 'redux';
 
diff --git a/src/test/suite/views/webview-app/components/atlas-cta/atlas-cta.test.tsx b/src/test/suite/views/webview-app/components/atlas-cta/atlas-cta.test.tsx
index c0e60e8e5..33d280750 100644
--- a/src/test/suite/views/webview-app/components/atlas-cta/atlas-cta.test.tsx
+++ b/src/test/suite/views/webview-app/components/atlas-cta/atlas-cta.test.tsx
@@ -1,7 +1,7 @@
 import assert from 'assert';
 import * as React from 'react';
 import { mount } from 'enzyme';
-import * as sinon from 'sinon';
+import sinon from 'sinon';
 import { createStore } from 'redux';
 import { Provider } from 'react-redux';
 
diff --git a/src/test/suite/views/webview-app/components/connect-form-modal/connect-form-modal.test.tsx b/src/test/suite/views/webview-app/components/connect-form-modal/connect-form-modal.test.tsx
index 392b7e4ee..6eef393e1 100644
--- a/src/test/suite/views/webview-app/components/connect-form-modal/connect-form-modal.test.tsx
+++ b/src/test/suite/views/webview-app/components/connect-form-modal/connect-form-modal.test.tsx
@@ -1,7 +1,7 @@
 import assert from 'assert';
 import * as React from 'react';
 import { mount, shallow } from 'enzyme';
-import * as sinon from 'sinon';
+import sinon from 'sinon';
 import { Provider } from 'react-redux';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { createStore } from 'redux';
diff --git a/src/test/suite/views/webview-app/components/connect-helper/connect-helper.test.tsx b/src/test/suite/views/webview-app/components/connect-helper/connect-helper.test.tsx
index b44ade55f..c3165efde 100644
--- a/src/test/suite/views/webview-app/components/connect-helper/connect-helper.test.tsx
+++ b/src/test/suite/views/webview-app/components/connect-helper/connect-helper.test.tsx
@@ -1,6 +1,6 @@
 import assert from 'assert';
 import * as React from 'react';
-import * as sinon from 'sinon';
+import sinon from 'sinon';
 import { mount } from 'enzyme';
 import { Provider } from 'react-redux';
 import { createStore } from 'redux';
diff --git a/src/test/suite/views/webview-app/components/connection-status/connection-status.test.tsx b/src/test/suite/views/webview-app/components/connection-status/connection-status.test.tsx
index d512dbb89..c0c6c919f 100644
--- a/src/test/suite/views/webview-app/components/connection-status/connection-status.test.tsx
+++ b/src/test/suite/views/webview-app/components/connection-status/connection-status.test.tsx
@@ -1,6 +1,6 @@
 import assert from 'assert';
 import * as React from 'react';
-import * as sinon from 'sinon';
+import sinon from 'sinon';
 import { mount, shallow } from 'enzyme';
 import { createStore } from 'redux';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
diff --git a/src/test/suite/views/webview-app/components/form/form-actions.test.tsx b/src/test/suite/views/webview-app/components/form/form-actions.test.tsx
index fe50041d3..5be69d110 100644
--- a/src/test/suite/views/webview-app/components/form/form-actions.test.tsx
+++ b/src/test/suite/views/webview-app/components/form/form-actions.test.tsx
@@ -1,6 +1,6 @@
 import assert from 'assert';
 import * as React from 'react';
-import * as sinon from 'sinon';
+import sinon from 'sinon';
 import { mount } from 'enzyme';
 import { Provider } from 'react-redux';
 import { createStore } from 'redux';
diff --git a/src/test/suite/views/webview-app/components/resources-panel/resources-panel.test.tsx b/src/test/suite/views/webview-app/components/resources-panel/resources-panel.test.tsx
index 0ad6754d5..fcd2e1aa2 100644
--- a/src/test/suite/views/webview-app/components/resources-panel/resources-panel.test.tsx
+++ b/src/test/suite/views/webview-app/components/resources-panel/resources-panel.test.tsx
@@ -1,7 +1,7 @@
 import assert from 'assert';
 import * as React from 'react';
 import { mount } from 'enzyme';
-import * as sinon from 'sinon';
+import sinon from 'sinon';
 import { createStore } from 'redux';
 import { Provider } from 'react-redux';
 
diff --git a/src/test/suite/views/webviewController.test.ts b/src/test/suite/views/webviewController.test.ts
index 0cfd848e4..cc0fdf949 100644
--- a/src/test/suite/views/webviewController.test.ts
+++ b/src/test/suite/views/webviewController.test.ts
@@ -1,8 +1,9 @@
-import * as linkHelper from '../../../utils/linkHelper';
-import * as sinon from 'sinon';
+import sinon from 'sinon';
 import * as vscode from 'vscode';
 import assert from 'assert';
 import { beforeEach, afterEach } from 'mocha';
+import fs from 'fs';
+import path from 'path';
 
 import ConnectionController from '../../../connectionController';
 import { mdbTestExtension } from '../stubbableMdbExtension';
@@ -15,9 +16,7 @@ import { TEST_DATABASE_URI } from '../dbTestHelper';
 import WebviewController, {
   getWebviewContent,
 } from '../../../views/webviewController';
-
-const fs = require('fs');
-const path = require('path');
+import * as linkHelper from '../../../utils/linkHelper';
 
 suite('Webview Test Suite', () => {
   afterEach(() => {
diff --git a/src/utils/keytar.ts b/src/utils/keytar.ts
index 1c4ce7053..232950e88 100644
--- a/src/utils/keytar.ts
+++ b/src/utils/keytar.ts
@@ -43,6 +43,7 @@ export const createKeytar = (): KeytarInterface | undefined => {
   // We load keytar in two different ways. This is because when the
   // extension is webpacked it requires the vscode external keytar dependency
   // differently then our development environment.
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
   let keytarModule: KeytarInterface | undefined = require('keytar');
 
   if (!keytarModule) {
diff --git a/src/utils/playground.ts b/src/utils/playground.ts
index f9b061783..a6db9c41e 100644
--- a/src/utils/playground.ts
+++ b/src/utils/playground.ts
@@ -1,7 +1,7 @@
 import * as vscode from 'vscode';
 import micromatch from 'micromatch';
-import * as fs from 'fs';
-import * as path from 'path';
+import fs from 'fs';
+import path from 'path';
 
 import { createLogger } from '../logging';
 
diff --git a/src/views/webview-app/components/app.tsx b/src/views/webview-app/components/app.tsx
index dce6ae56b..4cc756288 100644
--- a/src/views/webview-app/components/app.tsx
+++ b/src/views/webview-app/components/app.tsx
@@ -15,7 +15,7 @@ import {
   MESSAGE_TYPES,
 } from '../extension-app-message-constants';
 
-const styles = require('../connect.module.less');
+import styles from '../connect.module.less';
 
 import './app.less';
 
diff --git a/src/views/webview-app/components/atlas-cta/atlas-cta.tsx b/src/views/webview-app/components/atlas-cta/atlas-cta.tsx
index 55d31c85a..11e957e21 100644
--- a/src/views/webview-app/components/atlas-cta/atlas-cta.tsx
+++ b/src/views/webview-app/components/atlas-cta/atlas-cta.tsx
@@ -9,7 +9,7 @@ import {
 import { VSCODE_EXTENSION_SEGMENT_ANONYMOUS_ID } from '../../extension-app-message-constants';
 import AtlasLogo from './atlas-logo';
 
-const styles = require('./atlas-cta.less');
+import styles from './atlas-cta.less';
 
 type DispatchProps = {
   onLinkClicked: (screen: string, linkId: string) => void;
diff --git a/src/views/webview-app/components/connect-form-modal/connect-form-modal.tsx b/src/views/webview-app/components/connect-form-modal/connect-form-modal.tsx
index 094527ae3..93e41a147 100644
--- a/src/views/webview-app/components/connect-form-modal/connect-form-modal.tsx
+++ b/src/views/webview-app/components/connect-form-modal/connect-form-modal.tsx
@@ -1,15 +1,15 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
 
 import ConnectionForm from '../connect-form/connection-form';
 import {
   ActionTypes,
   ToggleShowConnectionFormAction,
 } from '../../store/actions';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
 
-const styles = require('./connect-form-modal.less');
+import styles from './connect-form-modal.less';
 
 type DispatchProps = {
   toggleShowConnectForm: () => void;
diff --git a/src/views/webview-app/components/connect-form/connection-form-tabs.tsx b/src/views/webview-app/components/connect-form/connection-form-tabs.tsx
index 31487715f..12ae27dd0 100644
--- a/src/views/webview-app/components/connect-form/connection-form-tabs.tsx
+++ b/src/views/webview-app/components/connect-form/connection-form-tabs.tsx
@@ -6,7 +6,7 @@ import { ActionTypes, SetConnectionFormTabAction } from '../../store/actions';
 import { AppState } from '../../store/store';
 import { CONNECTION_FORM_TABS } from '../../store/constants';
 
-const styles = require('./connection-form.less');
+import styles from './connection-form.less';
 
 type StateProps = {
   connectionFormTab: CONNECTION_FORM_TABS;
diff --git a/src/views/webview-app/components/connect-form/connection-form.tsx b/src/views/webview-app/components/connect-form/connection-form.tsx
index 651f27ad1..3e9c8d836 100644
--- a/src/views/webview-app/components/connect-form/connection-form.tsx
+++ b/src/views/webview-app/components/connect-form/connection-form.tsx
@@ -11,7 +11,7 @@ import AdvancedTab from './advanced-tab/advanced-tab';
 import GeneralTab from './general-tab/general-tab';
 import ConnectionFormTabs from './connection-form-tabs';
 
-const styles = require('./connection-form.less');
+import styles from './connection-form.less';
 
 type StateProps = {
   connectionFormTab: CONNECTION_FORM_TABS;
diff --git a/src/views/webview-app/components/connect-form/general-tab/authentication/kerberos.tsx b/src/views/webview-app/components/connect-form/general-tab/authentication/kerberos.tsx
index 667aacfc5..a9c45de70 100644
--- a/src/views/webview-app/components/connect-form/general-tab/authentication/kerberos.tsx
+++ b/src/views/webview-app/components/connect-form/general-tab/authentication/kerberos.tsx
@@ -9,7 +9,7 @@ import {
 } from '../../../../store/actions';
 import FormInput from '../../../form/form-input';
 
-const styles = require('../../../../connect.module.less');
+import styles from '../../../../connect.module.less';
 
 type DispatchProps = {
   kerberosParametersChanged: (newParams: KerberosParameters) => void;
diff --git a/src/views/webview-app/components/connect-form/general-tab/host/host.tsx b/src/views/webview-app/components/connect-form/general-tab/host/host.tsx
index 58a4a1db5..4784b2c0a 100644
--- a/src/views/webview-app/components/connect-form/general-tab/host/host.tsx
+++ b/src/views/webview-app/components/connect-form/general-tab/host/host.tsx
@@ -22,7 +22,7 @@ import ReplicaSetInput from './replica-set-input';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPlus, faMinus } from '@fortawesome/free-solid-svg-icons';
 
-const styles = require('./host.less');
+import styles from './host.less';
 
 enum CONNECTION_TYPE {
   STANDALONE = 'STANDALONE',
diff --git a/src/views/webview-app/components/connect-form/ssl-tab/ssl-server-client-validation.tsx b/src/views/webview-app/components/connect-form/ssl-tab/ssl-server-client-validation.tsx
index 3d7d4da40..5a05e94e5 100644
--- a/src/views/webview-app/components/connect-form/ssl-tab/ssl-server-client-validation.tsx
+++ b/src/views/webview-app/components/connect-form/ssl-tab/ssl-server-client-validation.tsx
@@ -11,7 +11,7 @@ import {
 } from '../../../store/actions';
 import { AppState } from '../../../store/store';
 
-const styles = require('../../../connect.module.less');
+import styles from '../../../connect.module.less';
 
 type StateProps = {
   isValid: boolean;
diff --git a/src/views/webview-app/components/connect-form/ssl-tab/ssl-server-validation.tsx b/src/views/webview-app/components/connect-form/ssl-tab/ssl-server-validation.tsx
index c8ae589ce..8a1d3375e 100644
--- a/src/views/webview-app/components/connect-form/ssl-tab/ssl-server-validation.tsx
+++ b/src/views/webview-app/components/connect-form/ssl-tab/ssl-server-validation.tsx
@@ -6,7 +6,7 @@ import FileInputButton from '../../form/file-input-button';
 import { ActionTypes, OnChangeSSLCAAction } from '../../../store/actions';
 import { AppState } from '../../../store/store';
 
-const styles = require('../../../connect.module.less');
+import styles from '../../../connect.module.less';
 
 type StateProps = {
   isValid: boolean;
diff --git a/src/views/webview-app/components/connect-helper/connect-helper.tsx b/src/views/webview-app/components/connect-helper/connect-helper.tsx
index 131ef1caf..b59fbf7b2 100644
--- a/src/views/webview-app/components/connect-helper/connect-helper.tsx
+++ b/src/views/webview-app/components/connect-helper/connect-helper.tsx
@@ -7,7 +7,7 @@ import {
   ToggleShowConnectionFormAction,
 } from '../../store/actions';
 
-const styles = require('./connect-helper.less');
+import styles from './connect-helper.less';
 
 type DispatchProps = {
   onOpenConnectionStringInput: () => void;
diff --git a/src/views/webview-app/components/connection-status/connection-status.tsx b/src/views/webview-app/components/connection-status/connection-status.tsx
index 746e68139..76a6da799 100644
--- a/src/views/webview-app/components/connection-status/connection-status.tsx
+++ b/src/views/webview-app/components/connection-status/connection-status.tsx
@@ -1,6 +1,8 @@
 import classnames from 'classnames';
 import * as React from 'react';
 import { connect } from 'react-redux';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 
 import { AppState } from '../../store/store';
 import {
@@ -11,10 +13,8 @@ import {
 } from '../../store/actions';
 import InfoSprinkle from '../info-sprinkle/info-sprinkle';
 import { CONNECTION_STATUS } from '../../extension-app-message-constants';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 
-const styles = require('./connection-status.less');
+import styles from './connection-status.less';
 
 const CONNECTION_STATUS_POLLING_FREQ_MS = 1000;
 
diff --git a/src/views/webview-app/components/form/file-input-button.tsx b/src/views/webview-app/components/form/file-input-button.tsx
index 541499f11..b9098bbae 100644
--- a/src/views/webview-app/components/form/file-input-button.tsx
+++ b/src/views/webview-app/components/form/file-input-button.tsx
@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faInfoCircle, faFileUpload } from '@fortawesome/free-solid-svg-icons';
 
-const styles = require('./form.less');
+import styles from './form.less';
 
 type props = {
   error: boolean;
diff --git a/src/views/webview-app/components/form/form-actions.tsx b/src/views/webview-app/components/form/form-actions.tsx
index a89949a68..af01d67e4 100644
--- a/src/views/webview-app/components/form/form-actions.tsx
+++ b/src/views/webview-app/components/form/form-actions.tsx
@@ -9,7 +9,7 @@ import {
 } from '../../store/actions';
 import FormGroup from './form-group';
 
-const styles = require('./form.less');
+import styles from './form.less';
 
 type DispatchProps = {
   onConnectClicked: () => void;
diff --git a/src/views/webview-app/components/form/form-group.tsx b/src/views/webview-app/components/form/form-group.tsx
index ab02e0035..323773d6a 100644
--- a/src/views/webview-app/components/form/form-group.tsx
+++ b/src/views/webview-app/components/form/form-group.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classnames from 'classnames';
 
-const styles = require('./form.less');
+import styles from './form.less';
 
 type props = {
   id: string;
diff --git a/src/views/webview-app/components/form/form-input.tsx b/src/views/webview-app/components/form/form-input.tsx
index 0438e26fe..b3eb75a5a 100644
--- a/src/views/webview-app/components/form/form-input.tsx
+++ b/src/views/webview-app/components/form/form-input.tsx
@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 
-const styles = require('./form.less');
+import styles from './form.less';
 
 type props = {
   changeHandler: (evt: React.ChangeEvent<HTMLInputElement>) => void;
diff --git a/src/views/webview-app/components/form/form-item-select.tsx b/src/views/webview-app/components/form/form-item-select.tsx
index 167658308..35ea2e3ef 100644
--- a/src/views/webview-app/components/form/form-item-select.tsx
+++ b/src/views/webview-app/components/form/form-item-select.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-const styles = require('./form.less');
+import styles from './form.less';
 
 type props = {
   label: string;
diff --git a/src/views/webview-app/components/form/radio-box-group/radio-box-group.tsx b/src/views/webview-app/components/form/radio-box-group/radio-box-group.tsx
index 80362eeba..83f54839c 100644
--- a/src/views/webview-app/components/form/radio-box-group/radio-box-group.tsx
+++ b/src/views/webview-app/components/form/radio-box-group/radio-box-group.tsx
@@ -1,8 +1,8 @@
 import classnames from 'classnames';
 import * as React from 'react';
 
-const styles = require('./radio-box-group.less');
-const formStyles = require('../form.less');
+import styles from './radio-box-group.less';
+import formStyles from '../form.less';
 
 type props = {
   label: string;
diff --git a/src/views/webview-app/components/info-sprinkle/info-sprinkle.tsx b/src/views/webview-app/components/info-sprinkle/info-sprinkle.tsx
index 052505361..74c288b97 100644
--- a/src/views/webview-app/components/info-sprinkle/info-sprinkle.tsx
+++ b/src/views/webview-app/components/info-sprinkle/info-sprinkle.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 
-const styles = require('./info-sprinkle.less');
+import styles from './info-sprinkle.less';
 
 type props = {
   linkTo: string;
diff --git a/src/views/webview-app/components/mongodb-logo/mongodb-logo.tsx b/src/views/webview-app/components/mongodb-logo/mongodb-logo.tsx
index d9ab5bbf9..cb57a7f1f 100644
--- a/src/views/webview-app/components/mongodb-logo/mongodb-logo.tsx
+++ b/src/views/webview-app/components/mongodb-logo/mongodb-logo.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { MongoDBLogo as LeafyGreenMongoDBLogo } from '@leafygreen-ui/logo';
 
-const styles = require('./mongodb-logo.less');
+import styles from './mongodb-logo.less';
 
 class MongoDBLogo extends React.PureComponent {
   render(): React.ReactNode {
diff --git a/src/views/webview-app/components/overview-page/overview-header/overview-header.tsx b/src/views/webview-app/components/overview-page/overview-header/overview-header.tsx
index 69d8fd2c3..c1d36fc61 100644
--- a/src/views/webview-app/components/overview-page/overview-header/overview-header.tsx
+++ b/src/views/webview-app/components/overview-page/overview-header/overview-header.tsx
@@ -9,7 +9,7 @@ import {
   ToggleShowResourcesPanelAction,
 } from '../../../store/actions';
 
-const styles = require('./overview-header.less');
+import styles from './overview-header.less';
 
 type DispatchProps = {
   toggleShowResourcesPanel: () => void;
diff --git a/src/views/webview-app/components/overview-page/overview-page.tsx b/src/views/webview-app/components/overview-page/overview-page.tsx
index c62a45d28..38701cd2b 100644
--- a/src/views/webview-app/components/overview-page/overview-page.tsx
+++ b/src/views/webview-app/components/overview-page/overview-page.tsx
@@ -9,7 +9,7 @@ import ConnectionStatus from '../connection-status/connection-status';
 import AtlasCTA from '../atlas-cta/atlas-cta';
 import ResourcesPanel from '../resources-panel/resources-panel';
 
-const styles = require('./overview-page.less');
+import styles from './overview-page.less';
 
 type StateProps = {
   showConnectForm?: boolean;
diff --git a/src/views/webview-app/components/resources-panel/resources-panel.tsx b/src/views/webview-app/components/resources-panel/resources-panel.tsx
index 038b9f74d..ee5034512 100644
--- a/src/views/webview-app/components/resources-panel/resources-panel.tsx
+++ b/src/views/webview-app/components/resources-panel/resources-panel.tsx
@@ -11,7 +11,7 @@ import {
   ToggleShowResourcesPanelAction,
 } from '../../store/actions';
 
-const styles = require('./resources-panel.less');
+import styles from './resources-panel.less';
 
 const ResourceLinks = [
   {