diff --git a/package.json b/package.json
index dc7c145e8b0c..c6ba4c993cb5 100644
--- a/package.json
+++ b/package.json
@@ -273,6 +273,7 @@
     "**/sharp": "0.29.3",
     "**/socket.io-parser": "4.0.5",
     "**/ua-parser-js": "0.7.33",
+    "@types/react": "17.0.83",
     "browserify-sign": "4.2.2",
     "devtools-protocol": "0.0.1346313",
     "sharp": "0.29.3",
diff --git a/packages/driver/src/cy/commands/navigation.ts b/packages/driver/src/cy/commands/navigation.ts
index fc636fd04744..29d8f5626579 100644
--- a/packages/driver/src/cy/commands/navigation.ts
+++ b/packages/driver/src/cy/commands/navigation.ts
@@ -457,14 +457,14 @@ export default (Commands, Cypress, cy, state, config) => {
 
   Cypress.on('test:before:run', reset)
 
-  Cypress.on('stability:changed', (bool, event) => {
+  Cypress.on('stability:changed', async (bool, event) => {
     // only send up page loading events when we're
     // not stable!
-    stabilityChanged(Cypress, state, config, bool)
+    await stabilityChanged(Cypress, state, config, bool)
   })
 
-  Cypress.on('navigation:changed', (source, arg) => {
-    navigationChanged(Cypress, cy, state, source, arg)
+  Cypress.on('navigation:changed', async (source, arg) => {
+    await navigationChanged(Cypress, cy, state, source, arg)
   })
 
   Cypress.on('form:submitted', (e) => {
diff --git a/packages/driver/src/cy/net-stubbing/events/before-request.ts b/packages/driver/src/cy/net-stubbing/events/before-request.ts
index fae78c6c3a80..6d1cf85c0e11 100644
--- a/packages/driver/src/cy/net-stubbing/events/before-request.ts
+++ b/packages/driver/src/cy/net-stubbing/events/before-request.ts
@@ -34,7 +34,7 @@ export const onBeforeRequest: HandlerFn<CyHttpMessages.IncomingRequest> = (Cypre
   req.responseTimeout = Cypress.config('responseTimeout')
   const reqClone = _.cloneDeep(req)
 
-  const subscribe = (eventName, handler) => {
+  const subscribe = async (eventName, handler) => {
     const subscription: Subscription = {
       id: _.uniqueId('Subscription'),
       routeId,
@@ -49,7 +49,7 @@ export const onBeforeRequest: HandlerFn<CyHttpMessages.IncomingRequest> = (Cypre
 
     debug('created request subscription %o', { eventName, request, subscription, handler })
 
-    emitNetEvent('subscribe', { requestId, subscription } as NetEvent.ToServer.Subscribe)
+    await emitNetEvent('subscribe', { requestId, subscription } as NetEvent.ToServer.Subscribe)
   }
 
   const getCanonicalInterception = (): Interception => {
@@ -165,7 +165,7 @@ export const onBeforeRequest: HandlerFn<CyHttpMessages.IncomingRequest> = (Cypre
       queryObj = createQueryObject()
       queryProxy = createQueryProxy(queryObj)
     },
-    on (eventName, handler) {
+    async on (eventName, handler) {
       if (!validEvents.includes(eventName)) {
         $errUtils.throwErrByPath('net_stubbing.request_handling.unknown_event', {
           args: {
@@ -179,11 +179,11 @@ export const onBeforeRequest: HandlerFn<CyHttpMessages.IncomingRequest> = (Cypre
         $errUtils.throwErrByPath('net_stubbing.request_handling.event_needs_handler')
       }
 
-      subscribe(eventName, handler)
+      await subscribe(eventName, handler)
 
       return userReq
     },
-    continue (responseHandler?) {
+    async continue (responseHandler?) {
       if (resolved) {
         return $errUtils.throwErrByPath('net_stubbing.request_handling.completion_called_after_resolved', { args: { cmd: 'continue' } })
       }
@@ -203,7 +203,7 @@ export const onBeforeRequest: HandlerFn<CyHttpMessages.IncomingRequest> = (Cypre
       }
 
       // allow `req` to be sent outgoing, then pass the response body to `responseHandler`
-      subscribe('response:callback', responseHandler)
+      await subscribe('response:callback', responseHandler)
 
       return finish(true)
     },
diff --git a/packages/driver/src/cy/net-stubbing/events/index.ts b/packages/driver/src/cy/net-stubbing/events/index.ts
index dfdcced33dd6..0724d2d49fd1 100644
--- a/packages/driver/src/cy/net-stubbing/events/index.ts
+++ b/packages/driver/src/cy/net-stubbing/events/index.ts
@@ -55,8 +55,8 @@ export function registerEvents (Cypress: Cypress.Cypress, cy: Cypress.cy) {
     })
   }
 
-  function sendStaticResponse (requestId: string, staticResponse: StaticResponse) {
-    emitNetEvent('send:static:response', {
+  async function sendStaticResponse (requestId: string, staticResponse: StaticResponse) {
+    await emitNetEvent('send:static:response', {
       requestId,
       staticResponse: getBackendStaticResponse(staticResponse),
     })
@@ -93,7 +93,7 @@ export function registerEvents (Cypress: Cypress.Cypress, cy: Cypress.cy) {
       if (!route) {
         if (frame.subscription.await) {
           // route not found, just resolve so the request can continue
-          emitResolved(frame.data)
+          await emitResolved(frame.data)
         }
 
         return
diff --git a/packages/driver/src/cy/stability.ts b/packages/driver/src/cy/stability.ts
index 8e213adb3c82..8b67b3214784 100644
--- a/packages/driver/src/cy/stability.ts
+++ b/packages/driver/src/cy/stability.ts
@@ -20,11 +20,11 @@ export const create = (Cypress: ICypress, state: StateFunc) => ({
     }
 
     Cypress.action('cy:before:stability:release')
-    .then(() => {
+    .then(async () => {
       const whenStable = state('whenStable')
 
       if (whenStable) {
-        whenStable()
+        await whenStable()
       }
     })
   },
diff --git a/packages/driver/src/cy/video-recorder.ts b/packages/driver/src/cy/video-recorder.ts
index 008d4cb6c8d4..6aa6db137007 100644
--- a/packages/driver/src/cy/video-recorder.ts
+++ b/packages/driver/src/cy/video-recorder.ts
@@ -1,4 +1,4 @@
-export const initVideoRecorder = (Cypress) => {
+export const initVideoRecorder = async (Cypress) => {
   // Only start recording with getUserMedia API if we're in firefox and video-enabled and run mode.
   // TODO: this logic should be cleaned up or gotten from some video-specific config value
   if (
@@ -8,7 +8,7 @@ export const initVideoRecorder = (Cypress) => {
       // navigator.mediaDevices will be undefined if the browser does not support display capture
       && window.navigator.mediaDevices
   ) {
-    window.navigator.mediaDevices.getUserMedia({
+    await window.navigator.mediaDevices.getUserMedia({
       audio: false,
       video: {
         // mediaSource "browser" is supported by a firefox user preference
diff --git a/packages/driver/src/cypress/cy.ts b/packages/driver/src/cypress/cy.ts
index 3c350e73dd7a..cbcf391c9080 100644
--- a/packages/driver/src/cypress/cy.ts
+++ b/packages/driver/src/cypress/cy.ts
@@ -218,6 +218,8 @@ export class $Cy extends EventEmitter2 implements ITimeouts, IStability, IAssert
     this.config = config
     this.Cypress = Cypress
     this.Cookies = Cookies
+    // TODO: this should be awaited
+    /* tslint:disable:no-floating-promises */
     initVideoRecorder(Cypress)
 
     this.testConfigOverride = new TestConfigOverride()
diff --git a/packages/frontend-shared/src/custom.d.ts b/packages/frontend-shared/src/custom.d.ts
new file mode 100644
index 000000000000..a97fbda78483
--- /dev/null
+++ b/packages/frontend-shared/src/custom.d.ts
@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: string
+  export default content
+}
diff --git a/packages/reporter/package.json b/packages/reporter/package.json
index f7dc24ccde8f..5bb028f7abcd 100644
--- a/packages/reporter/package.json
+++ b/packages/reporter/package.json
@@ -18,6 +18,7 @@
     "@fontsource/open-sans": "4.3.0",
     "@fortawesome/fontawesome-free": "6.0.0",
     "@packages/driver": "0.0.0-development",
+    "@packages/frontend-shared": "0.0.0-development",
     "@packages/types": "0.0.0-development",
     "@packages/web-config": "0.0.0-development",
     "@reach/dialog": "0.10.5",
diff --git a/packages/reporter/src/agents/agents.tsx b/packages/reporter/src/agents/agents.tsx
index 877105e76bf6..771c38483de3 100644
--- a/packages/reporter/src/agents/agents.tsx
+++ b/packages/reporter/src/agents/agents.tsx
@@ -4,8 +4,8 @@ import { observer } from 'mobx-react'
 import React from 'react'
 import Collapsible from '../collapsible/collapsible'
 
-import AgentModel from './agent-model'
-import { Alias } from '../instruments/instrument-model'
+import type AgentModel from './agent-model'
+import type { Alias } from '../instruments/instrument-model'
 
 export interface AgentProps {
   model: AgentModel
diff --git a/packages/reporter/src/attempts/attempt-model.ts b/packages/reporter/src/attempts/attempt-model.ts
index 585f4fca25df..5367b51c804a 100644
--- a/packages/reporter/src/attempts/attempt-model.ts
+++ b/packages/reporter/src/attempts/attempt-model.ts
@@ -5,12 +5,12 @@ import Agent, { AgentProps } from '../agents/agent-model'
 import Command, { CommandProps } from '../commands/command-model'
 import Err from '../errors/err-model'
 import Route, { RouteProps } from '../routes/route-model'
-import Test, { UpdatableTestProps, TestProps } from '../test/test-model'
-import type { TestState } from '@packages/types'
+import type Test from '../test/test-model'
+import type { UpdatableTestProps, TestProps } from '../test/test-model'
+import type { TestState, FileDetails } from '@packages/types'
 import Hook, { HookName } from '../hooks/hook-model'
-import { FileDetails } from '@packages/types'
-import { LogProps } from '../runnables/runnables-store'
-import Log from '../instruments/instrument-model'
+import type { LogProps } from '../runnables/runnables-store'
+import type Log from '../instruments/instrument-model'
 import Session, { SessionProps } from '../sessions/sessions-model'
 
 export default class Attempt {
diff --git a/packages/reporter/src/attempts/attempts.tsx b/packages/reporter/src/attempts/attempts.tsx
index 1d86f6518db8..a1b974872986 100644
--- a/packages/reporter/src/attempts/attempts.tsx
+++ b/packages/reporter/src/attempts/attempts.tsx
@@ -2,14 +2,14 @@ import cs from 'classnames'
 import { observer } from 'mobx-react'
 import React, { Component } from 'react'
 
-import { TestState } from '@packages/types'
+import type { TestState } from '@packages/types'
 import Agents from '../agents/agents'
 import Collapsible from '../collapsible/collapsible'
 import Hooks from '../hooks/hooks'
 import Routes from '../routes/routes'
 import TestError from '../errors/test-error'
-import TestModel from '../test/test-model'
-import AttemptModel from './attempt-model'
+import type TestModel from '../test/test-model'
+import type AttemptModel from './attempt-model'
 import Sessions from '../sessions/sessions'
 
 import CollapseIcon from '@packages/frontend-shared/src/assets/icons/collapse_x16.svg'
diff --git a/packages/reporter/src/commands/command-model.ts b/packages/reporter/src/commands/command-model.ts
index c3f45a18719e..85f3a1191142 100644
--- a/packages/reporter/src/commands/command-model.ts
+++ b/packages/reporter/src/commands/command-model.ts
@@ -4,7 +4,7 @@ import { action, computed, observable, makeObservable } from 'mobx'
 import Err, { ErrProps } from '../errors/err-model'
 import Instrument, { InstrumentProps } from '../instruments/instrument-model'
 import type { TimeoutID } from '../lib/types'
-import { SessionProps } from '../sessions/sessions-model'
+import type { SessionProps } from '../sessions/sessions-model'
 
 const LONG_RUNNING_THRESHOLD = 1000
 
diff --git a/packages/reporter/src/commands/command.tsx b/packages/reporter/src/commands/command.tsx
index 77b79bba0daf..d518fddcd715 100644
--- a/packages/reporter/src/commands/command.tsx
+++ b/packages/reporter/src/commands/command.tsx
@@ -11,12 +11,13 @@ import events, { Events } from '../lib/events'
 import FlashOnClick from '../lib/flash-on-click'
 import StateIcon from '../lib/state-icon'
 import Tag from '../lib/tag'
-import { TimeoutID } from '../lib/types'
+import type { TimeoutID } from '../lib/types'
 import runnablesStore, { RunnablesStore } from '../runnables/runnables-store'
-import { Alias, AliasObject } from '../instruments/instrument-model'
+import type { Alias, AliasObject } from '../instruments/instrument-model'
 import { determineTagType } from '../sessions/utils'
 
-import CommandModel, { RenderProps } from './command-model'
+import type CommandModel from './command-model'
+import type { RenderProps } from './command-model'
 import TestError from '../errors/test-error'
 
 import ChevronIcon from '@packages/frontend-shared/src/assets/icons/chevron-down-small_x8.svg'
diff --git a/packages/reporter/src/errors/error-code-frame.tsx b/packages/reporter/src/errors/error-code-frame.tsx
index bea4d28cd572..ec4fa4bf0cde 100644
--- a/packages/reporter/src/errors/error-code-frame.tsx
+++ b/packages/reporter/src/errors/error-code-frame.tsx
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { observer } from 'mobx-react'
 import Prism from 'prismjs'
 
-import { CodeFrame } from './err-model'
+import type { CodeFrame } from './err-model'
 import FileNameOpener from '../lib/file-name-opener'
 
 interface Props {
diff --git a/packages/reporter/src/errors/error-stack.tsx b/packages/reporter/src/errors/error-stack.tsx
index bf3b65499d17..f675a3a0466e 100644
--- a/packages/reporter/src/errors/error-stack.tsx
+++ b/packages/reporter/src/errors/error-stack.tsx
@@ -3,7 +3,8 @@ import { observer } from 'mobx-react'
 import React, { ReactElement } from 'react'
 
 import FileNameOpener from '../lib/file-name-opener'
-import Err, { ParsedStackFileLine, ParsedStackMessageLine } from './err-model'
+import type Err from './err-model'
+import type { ParsedStackFileLine, ParsedStackMessageLine } from './err-model'
 
 const cypressLineRegex = /(cypress:\/\/|cypress_runner\.js)/
 
diff --git a/packages/reporter/src/errors/test-error.tsx b/packages/reporter/src/errors/test-error.tsx
index 0526e1be31af..26ee4772a0b6 100644
--- a/packages/reporter/src/errors/test-error.tsx
+++ b/packages/reporter/src/errors/test-error.tsx
@@ -11,7 +11,7 @@ import ErrorStack from '../errors/error-stack'
 import events from '../lib/events'
 import FlashOnClick from '../lib/flash-on-click'
 import { onEnterOrSpace } from '../lib/util'
-import Err from './err-model'
+import type Err from './err-model'
 import { formattedMessage } from '../commands/command'
 
 import WarningIcon from '@packages/frontend-shared/src/assets/icons/warning_x8.svg'
diff --git a/packages/reporter/src/header/controls.tsx b/packages/reporter/src/header/controls.tsx
index 5e4629d9fa9e..9e508632ee36 100755
--- a/packages/reporter/src/header/controls.tsx
+++ b/packages/reporter/src/header/controls.tsx
@@ -6,7 +6,7 @@ import React from 'react'
 import Tooltip from '@cypress/react-tooltip'
 
 import defaultEvents, { Events } from '../lib/events'
-import { AppState } from '../lib/app-state'
+import type { AppState } from '../lib/app-state'
 
 import ChevronDownIcon from '@packages/frontend-shared/src/assets/icons/chevron-down-small_x16.svg'
 import ChevronUpIcon from '@packages/frontend-shared/src/assets/icons/chevron-up-small_x16.svg'
diff --git a/packages/reporter/src/header/header.tsx b/packages/reporter/src/header/header.tsx
index fee2fb154d0f..d69a7cbca786 100644
--- a/packages/reporter/src/header/header.tsx
+++ b/packages/reporter/src/header/header.tsx
@@ -6,14 +6,14 @@ import Tooltip from '@cypress/react-tooltip'
 import MenuExpandRightIcon from '@packages/frontend-shared/src/assets/icons/menu-expand-right_x16.svg'
 
 import defaultEvents, { Events } from '../lib/events'
-import { AppState } from '../lib/app-state'
+import type { AppState } from '../lib/app-state'
 import { action } from 'mobx'
 
 import Controls from './controls'
 import Stats from './stats'
-import { StatsStore } from './stats-store'
+import type { StatsStore } from './stats-store'
 import { DebugDismiss } from './DebugDismiss'
-import { RunnablesStore } from '../runnables/runnables-store'
+import type { RunnablesStore } from '../runnables/runnables-store'
 
 export interface ReporterHeaderProps {
   appState: AppState
diff --git a/packages/reporter/src/header/stats-store.ts b/packages/reporter/src/header/stats-store.ts
index aaef3375a3a8..180d0a68775e 100644
--- a/packages/reporter/src/header/stats-store.ts
+++ b/packages/reporter/src/header/stats-store.ts
@@ -1,7 +1,7 @@
 import _ from 'lodash'
 import { action, computed, observable, makeObservable } from 'mobx'
 import { TestState } from '../test/test-model'
-import { IntervalID } from '../lib/types'
+import type { IntervalID } from '../lib/types'
 
 import type { StatsStoreStartInfo } from '@packages/types'
 
diff --git a/packages/reporter/src/header/stats.tsx b/packages/reporter/src/header/stats.tsx
index b5220abdc56c..835c3ce43d1a 100644
--- a/packages/reporter/src/header/stats.tsx
+++ b/packages/reporter/src/header/stats.tsx
@@ -2,7 +2,7 @@ import cs from 'classnames'
 import { observer } from 'mobx-react'
 import React from 'react'
 
-import { StatsStore } from './stats-store'
+import type { StatsStore } from './stats-store'
 
 import FailedIcon from '@packages/frontend-shared/src/assets/icons/status-failed_x12.svg'
 import PassedIcon from '@packages/frontend-shared/src/assets/icons/status-passed_x12.svg'
diff --git a/packages/reporter/src/hooks/hook-model.ts b/packages/reporter/src/hooks/hook-model.ts
index 02a57008f07b..d07d2220f2fc 100644
--- a/packages/reporter/src/hooks/hook-model.ts
+++ b/packages/reporter/src/hooks/hook-model.ts
@@ -1,11 +1,10 @@
 import _ from 'lodash'
 import { observable, computed, makeObservable } from 'mobx'
 
-import { FileDetails } from '@packages/types'
-
-import { Alias } from '../instruments/instrument-model'
-import Err from '../errors/err-model'
-import CommandModel from '../commands/command-model'
+import type{ FileDetails } from '@packages/types'
+import type { Alias } from '../instruments/instrument-model'
+import type Err from '../errors/err-model'
+import type CommandModel from '../commands/command-model'
 
 export type HookName = 'before all' | 'before each' | 'after all' | 'after each' | 'test body' | 'studio commands'
 
diff --git a/packages/reporter/src/hooks/hooks.tsx b/packages/reporter/src/hooks/hooks.tsx
index 41f6138a0e51..95933b4cd39c 100644
--- a/packages/reporter/src/hooks/hooks.tsx
+++ b/packages/reporter/src/hooks/hooks.tsx
@@ -2,12 +2,13 @@ import cs from 'classnames'
 import _ from 'lodash'
 import { observer } from 'mobx-react'
 import React from 'react'
-import { FileDetails } from '@packages/types'
+import type { FileDetails } from '@packages/types'
 
 import appState, { AppState } from '../lib/app-state'
 import Command from '../commands/command'
 import Collapsible from '../collapsible/collapsible'
-import HookModel, { HookName } from './hook-model'
+import type HookModel from './hook-model'
+import type { HookName } from './hook-model'
 
 import ArrowRightIcon from '@packages/frontend-shared/src/assets/icons/arrow-right_x16.svg'
 import OpenIcon from '@packages/frontend-shared/src/assets/icons/technology-code-editor_x16.svg'
diff --git a/packages/reporter/src/instruments/instrument-model.ts b/packages/reporter/src/instruments/instrument-model.ts
index 0e13d733c2ab..a655913f516d 100644
--- a/packages/reporter/src/instruments/instrument-model.ts
+++ b/packages/reporter/src/instruments/instrument-model.ts
@@ -1,5 +1,5 @@
 import { observable, makeObservable } from 'mobx'
-import { Instrument, TestState } from '@packages/types'
+import type { Instrument, TestState } from '@packages/types'
 
 export interface AliasObject {
   name: string
diff --git a/packages/reporter/src/lib/events.ts b/packages/reporter/src/lib/events.ts
index 6ee477bfe8a9..1d25f9aca4bc 100644
--- a/packages/reporter/src/lib/events.ts
+++ b/packages/reporter/src/lib/events.ts
@@ -4,8 +4,8 @@ import appState, { AppState } from './app-state'
 import runnablesStore, { RunnablesStore, LogProps, RootRunnable } from '../runnables/runnables-store'
 import statsStore, { StatsStore } from '../header/stats-store'
 import scroller, { Scroller } from './scroller'
-import { UpdatableTestProps, UpdateTestCallback, TestProps } from '../test/test-model'
-import Err from '../errors/err-model'
+import type { UpdatableTestProps, UpdateTestCallback, TestProps } from '../test/test-model'
+import type Err from '../errors/err-model'
 
 import type { ReporterStartInfo, ReporterRunState } from '@packages/types'
 
diff --git a/packages/reporter/src/lib/file-name-opener.tsx b/packages/reporter/src/lib/file-name-opener.tsx
index 7f52ce7e77b4..16052bba9681 100644
--- a/packages/reporter/src/lib/file-name-opener.tsx
+++ b/packages/reporter/src/lib/file-name-opener.tsx
@@ -1,7 +1,6 @@
 import { observer } from 'mobx-react'
 import React from 'react'
-import { FileDetails } from '@packages/types'
-// @ts-ignore
+import type { FileDetails } from '@packages/types'
 import Tooltip from '@cypress/react-tooltip'
 
 import TextIcon from '@packages/frontend-shared/src/assets/icons/document-text_x16.svg'
diff --git a/packages/reporter/src/lib/state-icon.tsx b/packages/reporter/src/lib/state-icon.tsx
index 47234faf31cc..2e01a97c414d 100644
--- a/packages/reporter/src/lib/state-icon.tsx
+++ b/packages/reporter/src/lib/state-icon.tsx
@@ -2,7 +2,7 @@ import cs from 'classnames'
 import { observer } from 'mobx-react'
 import React from 'react'
 
-import { TestState } from '@packages/types'
+import type { TestState } from '@packages/types'
 import FailedIcon from '@packages/frontend-shared/src/assets/icons/status-failed_x12.svg'
 import PassedIcon from '@packages/frontend-shared/src/assets/icons/status-passed_x12.svg'
 import PendingIcon from '@packages/frontend-shared/src/assets/icons/status-pending_x12.svg'
diff --git a/packages/reporter/src/main.tsx b/packages/reporter/src/main.tsx
index fbc2fed10517..4771fbad8ab2 100644
--- a/packages/reporter/src/main.tsx
+++ b/packages/reporter/src/main.tsx
@@ -7,7 +7,7 @@ import { render } from 'react-dom'
 // @ts-ignore
 import EQ from 'css-element-queries/src/ElementQueries'
 
-import { RunnablesErrorModel } from './runnables/runnable-error'
+import type { RunnablesErrorModel } from './runnables/runnable-error'
 import appState, { AppState } from './lib/app-state'
 import events, { Runner, Events } from './lib/events'
 import runnablesStore, { RunnablesStore } from './runnables/runnables-store'
diff --git a/packages/reporter/src/preferences/testing-preferences.tsx b/packages/reporter/src/preferences/testing-preferences.tsx
index 90675a2c46b6..8a58ee07ceeb 100644
--- a/packages/reporter/src/preferences/testing-preferences.tsx
+++ b/packages/reporter/src/preferences/testing-preferences.tsx
@@ -2,7 +2,7 @@ import { action } from 'mobx'
 import { observer } from 'mobx-react'
 import React from 'react'
 
-import { AppState } from '../lib/app-state'
+import type { AppState } from '../lib/app-state'
 import defaultEvents, { Events } from '../lib/events'
 import Switch from '../lib/switch'
 
diff --git a/packages/reporter/src/routes/routes.tsx b/packages/reporter/src/routes/routes.tsx
index cf6bdfb406b0..55aeac947bdd 100644
--- a/packages/reporter/src/routes/routes.tsx
+++ b/packages/reporter/src/routes/routes.tsx
@@ -7,7 +7,7 @@ import Tooltip from '@cypress/react-tooltip'
 
 import Collapsible from '../collapsible/collapsible'
 import Tag from '../lib/tag'
-import RouteModel from './route-model'
+import type RouteModel from './route-model'
 
 export interface RouteProps {
   model: RouteModel
diff --git a/packages/reporter/src/runnables/runnable-and-suite.tsx b/packages/reporter/src/runnables/runnable-and-suite.tsx
index c5321b7f9655..e7743a5a2d36 100644
--- a/packages/reporter/src/runnables/runnable-and-suite.tsx
+++ b/packages/reporter/src/runnables/runnable-and-suite.tsx
@@ -10,8 +10,8 @@ import events, { Events } from '../lib/events'
 import Test from '../test/test'
 import Collapsible from '../collapsible/collapsible'
 
-import SuiteModel from './suite-model'
-import TestModel from '../test/test-model'
+import type SuiteModel from './suite-model'
+import type TestModel from '../test/test-model'
 
 import { LaunchStudioIcon } from '../components/LaunchStudioIcon'
 
diff --git a/packages/reporter/src/runnables/runnable-header.tsx b/packages/reporter/src/runnables/runnable-header.tsx
index 355c5b150dda..e28ee9512e0e 100644
--- a/packages/reporter/src/runnables/runnable-header.tsx
+++ b/packages/reporter/src/runnables/runnable-header.tsx
@@ -1,7 +1,7 @@
 import { observer } from 'mobx-react'
 import React, { Component, ReactElement } from 'react'
 
-import { StatsStore } from '../header/stats-store'
+import type { StatsStore } from '../header/stats-store'
 import { formatDuration, getFilenameParts } from '../lib/util'
 import FileNameOpener from '../lib/file-name-opener'
 
diff --git a/packages/reporter/src/runnables/runnable-model.ts b/packages/reporter/src/runnables/runnable-model.ts
index d96f7e8e7780..9a10212f6b50 100644
--- a/packages/reporter/src/runnables/runnable-model.ts
+++ b/packages/reporter/src/runnables/runnable-model.ts
@@ -1,5 +1,5 @@
 import { observable, makeObservable } from 'mobx'
-import { HookProps } from '../hooks/hook-model'
+import type { HookProps } from '../hooks/hook-model'
 
 export interface RunnableProps {
   id: string
diff --git a/packages/reporter/src/runnables/runnables-store.ts b/packages/reporter/src/runnables/runnables-store.ts
index 8ba60a6ad1f3..25e462ae5b4a 100644
--- a/packages/reporter/src/runnables/runnables-store.ts
+++ b/packages/reporter/src/runnables/runnables-store.ts
@@ -1,14 +1,17 @@
-import { TestFilter } from '@packages/types'
+import type { TestFilter } from '@packages/types'
 import _ from 'lodash'
 import { action, observable, makeObservable } from 'mobx'
-import AgentModel, { AgentProps } from '../agents/agent-model'
-import CommandModel, { CommandProps } from '../commands/command-model'
-import { HookProps } from '../hooks/hook-model'
+import type AgentModel from '../agents/agent-model'
+import type { AgentProps } from '../agents/agent-model'
+import type CommandModel from '../commands/command-model'
+import type { CommandProps } from '../commands/command-model'
+import type { HookProps } from '../hooks/hook-model'
 import appState, { AppState } from '../lib/app-state'
 import scroller, { Scroller } from '../lib/scroller'
-import RouteModel, { RouteProps } from '../routes/route-model'
+import type RouteModel from '../routes/route-model'
+import type { RouteProps } from '../routes/route-model'
 import TestModel, { TestProps, UpdatableTestProps, UpdateTestCallback } from '../test/test-model'
-import RunnableModel from './runnable-model'
+import type RunnableModel from './runnable-model'
 import SuiteModel, { SuiteProps } from './suite-model'
 
 const defaults = {
diff --git a/packages/reporter/src/runnables/runnables.tsx b/packages/reporter/src/runnables/runnables.tsx
index cff9a0996270..3bde4ec38b12 100644
--- a/packages/reporter/src/runnables/runnables.tsx
+++ b/packages/reporter/src/runnables/runnables.tsx
@@ -7,9 +7,9 @@ import events, { Events } from '../lib/events'
 import { RunnablesError, RunnablesErrorModel } from './runnable-error'
 import Runnable from './runnable-and-suite'
 import RunnableHeader from './runnable-header'
-import { RunnablesStore, RunnableArray } from './runnables-store'
+import type { RunnablesStore, RunnableArray } from './runnables-store'
 import statsStore, { StatsStore } from '../header/stats-store'
-import { Scroller, UserScrollCallback } from '../lib/scroller'
+import type { Scroller, UserScrollCallback } from '../lib/scroller'
 import type { AppState } from '../lib/app-state'
 import OpenFileInIDE from '../lib/open-file-in-ide'
 
diff --git a/packages/reporter/src/runnables/suite-model.ts b/packages/reporter/src/runnables/suite-model.ts
index 3f175b3b2b81..2fdb3d79e621 100644
--- a/packages/reporter/src/runnables/suite-model.ts
+++ b/packages/reporter/src/runnables/suite-model.ts
@@ -1,8 +1,9 @@
 import _ from 'lodash'
 import { computed, observable, makeObservable } from 'mobx'
 import Runnable, { RunnableProps } from './runnable-model'
-import TestModel, { TestProps } from '../test/test-model'
-import { TestState } from '@packages/types'
+import type TestModel from '../test/test-model'
+import type { TestProps } from '../test/test-model'
+import type { TestState } from '@packages/types'
 
 export interface SuiteProps extends RunnableProps {
   suites: Array<SuiteProps>
diff --git a/packages/reporter/src/sessions/sessions.tsx b/packages/reporter/src/sessions/sessions.tsx
index 7955e2aecb34..7e6495300fea 100644
--- a/packages/reporter/src/sessions/sessions.tsx
+++ b/packages/reporter/src/sessions/sessions.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 import { observer } from 'mobx-react'
 import GlobeIcon from '@packages/frontend-shared/src/assets/icons/globe_x12.svg'
 
-import SessionsModel from './sessions-model'
+import type SessionsModel from './sessions-model'
 import events from '../lib/events'
 import Collapsible from '../collapsible/collapsible'
 import Tag from '../lib/tag'
diff --git a/packages/reporter/src/test/test-model.ts b/packages/reporter/src/test/test-model.ts
index 2d856ed7a930..09070b111806 100644
--- a/packages/reporter/src/test/test-model.ts
+++ b/packages/reporter/src/test/test-model.ts
@@ -4,12 +4,12 @@ import { action, computed, observable, makeObservable } from 'mobx'
 import { FileDetails, TestState } from '@packages/types'
 import Attempt from '../attempts/attempt-model'
 import Err, { ErrProps } from '../errors/err-model'
-import { HookProps } from '../hooks/hook-model'
+import type { HookProps } from '../hooks/hook-model'
 import Runnable, { RunnableProps } from '../runnables/runnable-model'
-import { CommandProps } from '../commands/command-model'
-import { AgentProps } from '../agents/agent-model'
-import { RouteProps } from '../routes/route-model'
-import { RunnablesStore, LogProps } from '../runnables/runnables-store'
+import type { CommandProps } from '../commands/command-model'
+import type { AgentProps } from '../agents/agent-model'
+import type { RouteProps } from '../routes/route-model'
+import type { RunnablesStore, LogProps } from '../runnables/runnables-store'
 
 export type UpdateTestCallback = () => void
 
diff --git a/packages/reporter/tsconfig.json b/packages/reporter/tsconfig.json
index be6c7cd941b3..0d43b6f20311 100644
--- a/packages/reporter/tsconfig.json
+++ b/packages/reporter/tsconfig.json
@@ -4,7 +4,8 @@
     "types": [
       "node",
       "cypress",
-      "cypress-real-events"
+      "cypress-real-events",
+      "react"
     ], /* Type declaration files to be included in compilation. */
     "importsNotUsedAsValues": "remove",
     "lib": ["DOM"]
diff --git a/packages/runner/injection/patches/cookies.ts b/packages/runner/injection/patches/cookies.ts
index 6b190556474b..fa066b482053 100644
--- a/packages/runner/injection/patches/cookies.ts
+++ b/packages/runner/injection/patches/cookies.ts
@@ -4,7 +4,7 @@ import {
   automationCookieToToughCookie,
   SerializableAutomationCookie,
 } from '@packages/server/lib/util/cookies'
-import { Cookie as ToughCookie } from 'tough-cookie'
+import type { Cookie as ToughCookie } from 'tough-cookie'
 
 function isHostOnlyCookie (domain) {
   return domain[0] !== '.'
diff --git a/packages/runner/package.json b/packages/runner/package.json
index cf36e9b04fc7..93dcb3780edd 100644
--- a/packages/runner/package.json
+++ b/packages/runner/package.json
@@ -7,11 +7,13 @@
     "prebuild": "rimraf ./dist",
     "build": "node ../../scripts/run-webpack",
     "build-prod": "cross-env NODE_ENV=production yarn build",
+    "check-ts": "tsc --noEmit && yarn -s tslint",
     "clean-deps": "rimraf node_modules",
     "cypress:open": "echo \"These tests have been moved to @packages/app. \" && exit 1",
     "cypress:run": "echo \"These tests have been moved to @packages/app. \" && exit 1",
     "postinstall": "echo '@packages/runner needs: yarn build'",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx,.json, .",
+    "tslint": "tslint --config ../ts/tslint.json --project .",
     "watch": "node ../../scripts/run-webpack --watch --progress"
   },
   "devDependencies": {
diff --git a/packages/runner/tsconfig.json b/packages/runner/tsconfig.json
index ee2ec713e52f..6df3a9029cca 100644
--- a/packages/runner/tsconfig.json
+++ b/packages/runner/tsconfig.json
@@ -1,59 +1,19 @@
 {
+  "extends": "../ts/tsconfig.json",
   "compilerOptions": {
-    /* Basic Options */
     "target": "es2015",
-    "module": "commonjs",
-    /*
-     * Allow javascript files to be compiled.
-     * Override this in modules that need JS
-     */
-    "allowJs": true,
     "jsx": "react",
     "outDir": "dist",
-    "noImplicitAny": false,
     "noImplicitThis": false,
     "preserveWatchOutput": true,
-    // "checkJs": true,                       /* Report errors in .js files. */
-    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
-    /* Generates corresponding '.d.ts' file. */
-    // "declaration": true,
-    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
-    /* Generates corresponding '.map' file. */
-    "sourceMap": true,
-    /* Import emit helpers from 'tslib'. */
-    "importHelpers": true,
-    "strictNullChecks": true,
-    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
-    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
-    /* Strict Type-Checking Options */
-    // "traceResolution": true,
     "strict": false,
-    "forceConsistentCasingInFileNames": true,
-    "skipLibCheck": true,
-    /**
-     * Skip type checking of all declaration files (*.d.ts).
-     * TODO: Look into changing this in the future
-     */
-    /* Additional Checks */
-    /* Report errors on unused locals. */
-    // "noEmit": true,
-    "noUnusedLocals": false,
-    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
-    /* Report error when not all code paths in function return a value. */
-    "noImplicitReturns": true,
-    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
-    /* Module Resolution Options */
-    // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
-    // "baseUrl": "../",                       /* Base directory to resolve non-absolute module names. */
-    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-    // "rootDirs": ["../driver/src"],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
-    "types": [],                           /* Type declaration files to be included in compilation. */
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "noErrorTruncation": true,
-    "experimentalDecorators": true,
-    // "noResolve": true
-    "resolveJsonModule": true
+    "types": [
+      "node",
+      "cypress",
+      "cypress-real-events",
+      "react",
+    ],                           /* Type declaration files to be included in compilation. */
+    "noErrorTruncation": true
   },
   "exclude": [
     "dist",
diff --git a/packages/server/lib/automation/cookies.ts b/packages/server/lib/automation/cookies.ts
index be469a843954..6ac9b8dbfd13 100644
--- a/packages/server/lib/automation/cookies.ts
+++ b/packages/server/lib/automation/cookies.ts
@@ -159,6 +159,7 @@ export class Cookies {
 
     return automate(cookie)
     .then((cookie) => {
+      // @ts-expect-error: TODO: Look at this ts error
       cookie = normalizeGetCookieProps(cookie)
 
       debug('received set:cookie %o', cookie)
@@ -211,6 +212,7 @@ export class Cookies {
 
     return automate(data)
     .then((cookie) => {
+      // ts-expect-error: TODO: Look at this ts error
       cookie = normalizeCookieProps(cookie)
 
       debug('received clear:cookie %o', cookie)
diff --git a/packages/ts/index.d.ts b/packages/ts/index.d.ts
index 7ea83365f030..53cd8bdc534d 100644
--- a/packages/ts/index.d.ts
+++ b/packages/ts/index.d.ts
@@ -102,3 +102,15 @@ declare module 'url' {
     format(): string
   }
 }
+
+// Without this declaration, TypeScript will throw an error when importing an .svg file
+// Which we use in the frontend-shared package for our icons
+// declare module "*.svg" {
+//   const content: string;
+//   export default content;
+// }
+
+declare module '*.svg' {
+  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>
+  export default content
+}