diff --git a/.eslintrc.js b/.eslintrc.js
index cd311573b..3aecc590a 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   globals: {
     __PATH_PREFIX__: true,
     browser: true,
diff --git a/.lintstagedrc.js b/.lintstagedrc.js
index 5b6e7c0f1..6722c1e86 100644
--- a/.lintstagedrc.js
+++ b/.lintstagedrc.js
@@ -1,4 +1,4 @@
-const { CLIEngine } = require('eslint');
+import CLIEngine from 'eslint';
 
 // lint-staged seems to disregard eslint ignore rules if we have the eslint
 // "--max-warnings 0" option set. This will potentially break our linting process
@@ -7,7 +7,7 @@ const { CLIEngine } = require('eslint');
 // This was the recommended fix according to lint-staged's README:
 // https://github.com/okonet/lint-staged/blob/fa15d686deb90b7ffddfbcf644d56ed05fcd8a38/README.md#how-can-i-ignore-files-from-eslintignore
 
-module.exports = {
+export default {
   '*.js': (files) => {
     const cli = new CLIEngine({});
     const filesToLint = files.filter((file) => !cli.isPathIgnored(file)).join(' ');
diff --git a/__mocks__/gatsby.js b/__mocks__/gatsby.js
index c7c4562ed..518af7019 100644
--- a/__mocks__/gatsby.js
+++ b/__mocks__/gatsby.js
@@ -1,8 +1,8 @@
-const React = require('react');
+import React from 'react';
 
 const gatsby = jest.requireActual('gatsby');
 
-module.exports = {
+export default {
   ...gatsby,
   graphql: jest.fn(),
   navigate: jest.fn(),
diff --git a/__mocks__/redoc.js b/__mocks__/redoc.js
index 2f16610aa..f51fa436a 100644
--- a/__mocks__/redoc.js
+++ b/__mocks__/redoc.js
@@ -1,5 +1,5 @@
 // Mock redoc library by default to avoid nested import error in RedocStandalone component
 // import * as YAML from './dist/index.js'
-module.exports = {
+export default {
   RedocStandalone: jest.fn(),
 };
diff --git a/gatsby-config.js b/gatsby-config.mjs
similarity index 64%
rename from gatsby-config.js
rename to gatsby-config.mjs
index a1ca68e57..6920917d1 100644
--- a/gatsby-config.js
+++ b/gatsby-config.mjs
@@ -1,10 +1,16 @@
-const { generatePathPrefix } = require('./src/utils/generate-path-prefix');
-const { siteMetadata } = require('./src/utils/site-metadata');
-const { isGatsbyPreview } = require('./src/utils/is-gatsby-preview');
+import { createRequire } from 'module';
+import generatePathPrefix from './src/utils/generate-path-prefix.js';
+import { siteMetadata } from './src/utils/site-metadata.mjs';
+import isGatsbyPreview from './src/utils/is-gatsby-preview.js';
+// const { generatePathPrefix } = require('./src/utils/generate-path-prefix');
+// const { siteMetadata } = require('./src/utils/site-metadata');
+// const { isGatsbyPreview } = require('./src/utils/is-gatsby-preview');
 
 const isPreview = isGatsbyPreview();
 const pathPrefix = !isPreview ? generatePathPrefix(siteMetadata) : undefined;
 
+const require = createRequire(import.meta.url);
+
 console.log('PATH PREFIX', pathPrefix);
 
 // Specifies which plugins to use depending on build environment
@@ -32,8 +38,4 @@ if (!isPreview) {
   });
 }
 
-module.exports = {
-  plugins,
-  pathPrefix,
-  siteMetadata,
-};
+export { plugins, pathPrefix, siteMetadata };
diff --git a/jest-preprocess.js b/jest-preprocess.js
index c01b8c912..c7a987b4e 100644
--- a/jest-preprocess.js
+++ b/jest-preprocess.js
@@ -1,6 +1,8 @@
+import { createTransformer } from 'babel-jest';
+
 const babelOptions = {
   presets: ['babel-preset-gatsby', '@emotion/babel-preset-css-prop'],
   plugins: ['@emotion'],
 };
 
-module.exports = require('babel-jest').createTransformer(babelOptions);
+export default createTransformer(babelOptions);
diff --git a/jest.config.js b/jest.config.js
index 32dd9dfcc..91e8090a1 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   globals: {
     __PATH_PREFIX__: ``,
   },
diff --git a/package-lock.json b/package-lock.json
index 8b12c84a3..9691c61a6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -55,7 +55,7 @@
         "clipboard": "^2.0.8",
         "dotenv": "^8.2.0",
         "eventsource": "^2.0.2",
-        "gatsby": "^5.0.0",
+        "gatsby": "^5.3.0",
         "gatsby-plugin-emotion": "^8.0.0",
         "gatsby-plugin-google-tagmanager": "^5.0.0",
         "gatsby-plugin-layout": "^4.7.0",
diff --git a/package.json b/package.json
index 2252384d7..9ad5bd08c 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
 {
   "name": "snooty",
+  "type": "module",
   "version": "0.15.1",
   "repository": "github:mongodb/snooty",
   "engines": {
@@ -102,7 +103,7 @@
     "clipboard": "^2.0.8",
     "dotenv": "^8.2.0",
     "eventsource": "^2.0.2",
-    "gatsby": "^5.0.0",
+    "gatsby": "^5.3.0",
     "gatsby-plugin-emotion": "^8.0.0",
     "gatsby-plugin-google-tagmanager": "^5.0.0",
     "gatsby-plugin-layout": "^4.7.0",
diff --git a/plugins/gatsby-source-snooty-preview/gatsby-node.js b/plugins/gatsby-source-snooty-preview/gatsby-node.mjs
similarity index 86%
rename from plugins/gatsby-source-snooty-preview/gatsby-node.js
rename to plugins/gatsby-source-snooty-preview/gatsby-node.mjs
index 9a7820842..650bd9938 100644
--- a/plugins/gatsby-source-snooty-preview/gatsby-node.js
+++ b/plugins/gatsby-source-snooty-preview/gatsby-node.mjs
@@ -1,25 +1,23 @@
-const { getDataStore } = require('gatsby/dist/datastore');
-const path = require('path');
-const stream = require('stream');
-const { promisify } = require('util');
+import getDataStore from 'gatsby/dist/datastore';
+import path, { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { createRequire } from "module"
+import stream from 'stream';
+import promisify from 'util';
+import got from `got`;
+import parser from `stream-json/jsonl/Parser`;
+import { sourceNodes } from `./other-things-to-source.mjs`;
+import fetchClientAccessToken from './utils/kanopy-auth.mjs';
+import callPostBuildWebhook from './utils/post-build.mjs';
+import { consumeData, createSnootyMetadataId, KEY_LAST_FETCHED, KEY_LAST_CLIENT_ACCESS_TOKEN, } from './utils/data-consumer.mjs';
+
 const pipeline = promisify(stream.pipeline);
-const got = require(`got`);
-const { parser } = require(`stream-json/jsonl/Parser`);
-const { sourceNodes } = require(`./other-things-to-source`);
-const { fetchClientAccessToken } = require('./utils/kanopy-auth.js');
-const { callPostBuildWebhook } = require('./utils/post-build.js');
-const {
-  consumeData,
-  createSnootyMetadataId,
-  KEY_LAST_FETCHED,
-  KEY_LAST_CLIENT_ACCESS_TOKEN,
-} = require('./utils/data-consumer.js');
 
 // Global variable to allow webhookBody from sourceNodes step to be passed down
 // to other Gatsby build steps that might not pass webhookBody natively.
 let currentWebhookBody = {};
 
-exports.createSchemaCustomization = async ({ actions }) => {
+export const createSchemaCustomization = async ({ actions }) => {
   const { createTypes } = actions;
   const typeDefs = `
     type Page implements Node @dontInfer {
@@ -58,7 +56,7 @@ const APIBase = process.env.API_BASE || `https://snooty-data-api.mongodb.com`;
 const GATSBY_CLOUD_SITE_USER = process.env.GATSBY_CLOUD_SITE_USER;
 
 let isFirstRun = true;
-exports.sourceNodes = async ({
+export const sourceNodes = async ({
   actions,
   createNodeId,
   getNode,
@@ -166,15 +164,19 @@ exports.sourceNodes = async ({
   isFirstRun = false;
 };
 
+
+
 // Prevent errors when running gatsby build caused by browser packages run in a node environment.
-exports.onCreateWebpackConfig = ({ plugins, actions }) => {
+export const onCreateWebpackConfig = ({ plugins, actions }) => {
+  const require = createRequire(import.meta.url);
+  const base = import.meta.url;
   const providePlugins = {
     Buffer: ['buffer', 'Buffer'],
     process: require.resolve('../../stubs/process.js'),
   };
 
-  const fallbacks = { stream: require.resolve('stream-browserify'), buffer: require.resolve('buffer/') };
-
+  const fallbacks = { stream: require.resolve('stream-browserify'), buffer: require.resolve('buffer/')};
+  console.log("FALLBACKS", fallbacks)
   actions.setWebpackConfig({
     plugins: [plugins.provide(providePlugins)],
     resolve: {
@@ -186,8 +188,9 @@ exports.onCreateWebpackConfig = ({ plugins, actions }) => {
   });
 };
 
-exports.createPages = async ({ actions, createNodeId, getNode, graphql, reporter }) => {
+export const createPages = async ({ actions, createNodeId, getNode, graphql, reporter }) => {
   const { createPage } = actions;
+  const __dirname = dirname(fileURLToPath(import.meta.url));
   const templatePath = path.join(__dirname, `../../src/components/DocumentBodyPreview.js`);
   const result = await graphql(`
     query {
@@ -252,6 +255,6 @@ exports.createPages = async ({ actions, createNodeId, getNode, graphql, reporter
 // Ideally, we would use Gatsby Cloud's Outgoing Notifications feature once it can
 // support passing through custom data from the preview webhook's body (to include the
 // Autobuilder job ID associated with the GC build).
-exports.onPostBuild = async () => {
+export const onPostBuild = async () => {
   await callPostBuildWebhook(currentWebhookBody, 'completed');
 };
diff --git a/plugins/gatsby-source-snooty-preview/other-things-to-source.js b/plugins/gatsby-source-snooty-preview/other-things-to-source.mjs
similarity index 50%
rename from plugins/gatsby-source-snooty-preview/other-things-to-source.js
rename to plugins/gatsby-source-snooty-preview/other-things-to-source.mjs
index 4b88bcdf5..edaa5bf7b 100644
--- a/plugins/gatsby-source-snooty-preview/other-things-to-source.js
+++ b/plugins/gatsby-source-snooty-preview/other-things-to-source.mjs
@@ -1,11 +1,11 @@
-const { siteMetadata } = require('../../src/utils/site-metadata');
-const { realmDocumentDatabase } = require('../../src/init/DocumentDatabase.js');
-const { createOpenAPIChangelogNode } = require('../utils/openapi');
-const { createProductNodes } = require('../utils/products');
+import { siteMetadata } from '../../src/utils/site-metadata.mjs';
+import { realmDocumentDatabase } from '../../src/init/DocumentDatabase.mjs';
+import createOpenAPIChangelogNode from '../utils/openapi.mjs';
+import createProductNodes from '../utils/products.mjs';
 
 // Sources nodes for the preview plugin that are not directly related to data
 // from the Snooty Data API
-exports.sourceNodes = async ({ hasOpenAPIChangelog, createNode, createContentDigest, createNodeId }) => {
+export const sourceNodes = async ({ hasOpenAPIChangelog, createNode, createContentDigest, createNodeId }) => {
   let db = realmDocumentDatabase;
   await db.connect();
   await createProductNodes({ db, createNode, createNodeId, createContentDigest });
diff --git a/plugins/gatsby-source-snooty-preview/utils/data-consumer.js b/plugins/gatsby-source-snooty-preview/utils/data-consumer.mjs
similarity index 93%
rename from plugins/gatsby-source-snooty-preview/utils/data-consumer.js
rename to plugins/gatsby-source-snooty-preview/utils/data-consumer.mjs
index 8ead9cb77..6dd419163 100644
--- a/plugins/gatsby-source-snooty-preview/utils/data-consumer.js
+++ b/plugins/gatsby-source-snooty-preview/utils/data-consumer.mjs
@@ -1,6 +1,6 @@
-const { transformBreadcrumbs } = require('../../../src/utils/setup/transform-breadcrumbs.js');
-const { saveStaticFiles, saveFile } = require('../../../src/utils/setup/save-asset-files');
-const { getNestedValue } = require('../../../src/utils/get-nested-value');
+import transformBreadcrumbs from '../../../src/utils/setup/transform-breadcrumbs.mjs';
+import { saveStaticFiles, saveFile } from '../../../src/utils/setup/save-asset-files.mjs';
+import getNestedValue from '../../../src/utils/get-nested-value.mjs';
 
 const KEY_LAST_FETCHED = 'lastFetched';
 const KEY_LAST_CLIENT_ACCESS_TOKEN = 'lastClientAccessToken';
@@ -177,4 +177,4 @@ const consumeData = async (
   }
 };
 
-module.exports = { consumeData, createSnootyMetadataId, KEY_LAST_FETCHED, KEY_LAST_CLIENT_ACCESS_TOKEN };
+export { consumeData, createSnootyMetadataId, KEY_LAST_FETCHED, KEY_LAST_CLIENT_ACCESS_TOKEN };
diff --git a/plugins/gatsby-source-snooty-preview/utils/kanopy-auth.js b/plugins/gatsby-source-snooty-preview/utils/kanopy-auth.mjs
similarity index 98%
rename from plugins/gatsby-source-snooty-preview/utils/kanopy-auth.js
rename to plugins/gatsby-source-snooty-preview/utils/kanopy-auth.mjs
index 51fde316c..b95419e36 100644
--- a/plugins/gatsby-source-snooty-preview/utils/kanopy-auth.js
+++ b/plugins/gatsby-source-snooty-preview/utils/kanopy-auth.mjs
@@ -72,4 +72,4 @@ const fetchClientAccessToken = async (prevToken) => {
   return prevToken;
 };
 
-module.exports = { fetchClientAccessToken };
+export default fetchClientAccessToken;
diff --git a/plugins/gatsby-source-snooty-preview/utils/post-build.js b/plugins/gatsby-source-snooty-preview/utils/post-build.mjs
similarity index 96%
rename from plugins/gatsby-source-snooty-preview/utils/post-build.js
rename to plugins/gatsby-source-snooty-preview/utils/post-build.mjs
index 84f429290..d3e08acd9 100644
--- a/plugins/gatsby-source-snooty-preview/utils/post-build.js
+++ b/plugins/gatsby-source-snooty-preview/utils/post-build.mjs
@@ -1,4 +1,4 @@
-const crypto = require('crypto');
+import crypto from 'crypto';
 
 /**
  * Constructs a signature using the payload and Snooty's secret. The signature
@@ -52,4 +52,4 @@ const callPostBuildWebhook = async (webhookBody, status) => {
   console.log('Post-build webhook was successfully called!');
 };
 
-module.exports = { callPostBuildWebhook };
+export default callPostBuildWebhook;
diff --git a/plugins/gatsby-source-snooty-prod/gatsby-node.js b/plugins/gatsby-source-snooty-prod/gatsby-node.mjs
similarity index 85%
rename from plugins/gatsby-source-snooty-prod/gatsby-node.js
rename to plugins/gatsby-source-snooty-prod/gatsby-node.mjs
index 0173a5439..04d52ea0c 100644
--- a/plugins/gatsby-source-snooty-prod/gatsby-node.js
+++ b/plugins/gatsby-source-snooty-prod/gatsby-node.mjs
@@ -1,16 +1,18 @@
-const path = require('path');
-const { transformBreadcrumbs } = require('../../src/utils/setup/transform-breadcrumbs.js');
-const { saveAssetFiles, saveStaticFiles } = require('../../src/utils/setup/save-asset-files');
-const { validateEnvVariables } = require('../../src/utils/setup/validate-env-variables');
-const { getNestedValue } = require('../../src/utils/get-nested-value');
-const { removeNestedValue } = require('../../src/utils/remove-nested-value.js');
-const { getPageSlug } = require('../../src/utils/get-page-slug');
-const { manifestMetadata, siteMetadata } = require('../../src/utils/site-metadata');
-const { assertTrailingSlash } = require('../../src/utils/assert-trailing-slash');
-const { constructPageIdPrefix } = require('../../src/utils/setup/construct-page-id-prefix');
-const { manifestDocumentDatabase, realmDocumentDatabase } = require('../../src/init/DocumentDatabase.js');
-const { createOpenAPIChangelogNode } = require('../utils/openapi.js');
-const { createProductNodes } = require('../utils/products.js');
+import path, { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { createRequire } from 'module';
+import transformBreadcrumbs from '../../src/utils/setup/transform-breadcrumbs.mjs';
+import { saveAssetFiles, saveStaticFiles } from '../../src/utils/setup/save-asset-files.mjs';
+import validateEnvVariables from '../../src/utils/setup/validate-env-variables.mjs';
+import getNestedValue from '../../src/utils/get-nested-value.mjs';
+import removeNestedValue from '../../src/utils/remove-nested-value.mjs';
+import getPageSlug from '../../src/utils/get-page-slug.mjs';
+import { manifestMetadata, siteMetadata } from '../../src/utils/site-metadata.mjs';
+import assertTrailingSlash from '../../src/utils/assert-trailing-slash.mjs';
+import constructPageIdPrefix from '../../src/utils/setup/construct-page-id-prefix.mjs';
+import { manifestDocumentDatabase, realmDocumentDatabase } from '../../src/init/DocumentDatabase.mjs';
+import createOpenAPIChangelogNode from '../utils/openapi.mjs';
+import createProductNodes from '../utils/products.mjs';
 
 // different types of references
 const PAGES = [];
@@ -76,7 +78,7 @@ const createRemoteMetadataNode = async ({ createNode, createNodeId, createConten
   }
 };
 
-exports.sourceNodes = async ({ actions, createContentDigest, createNodeId }) => {
+export const sourceNodes = async ({ actions, createContentDigest, createNodeId }) => {
   let hasOpenAPIChangelog = false;
   const { createNode } = actions;
 
@@ -174,7 +176,7 @@ exports.sourceNodes = async ({ actions, createContentDigest, createNodeId }) =>
   });
 };
 
-exports.createPages = async ({ actions }) => {
+export const createPages = async ({ actions }) => {
   const { createPage } = actions;
 
   let repoBranches = null;
@@ -228,6 +230,8 @@ exports.createPages = async ({ actions }) => {
       // TODO: Gatsby v4 will enable code splitting automatically. Delete duplicate component, add conditional for consistent-nav UnifiedFooter
       const mainComponentRelativePath = `../../src/components/DocumentBody.js`;
 
+      const __dirname = dirname(fileURLToPath(import.meta.url));
+
       if (RESOLVED_REF_DOC_MAPPING[page] && Object.keys(RESOLVED_REF_DOC_MAPPING[page]).length > 0) {
         createPage({
           path: assertTrailingSlash(slug),
@@ -249,7 +253,8 @@ exports.createPages = async ({ actions }) => {
 };
 
 // Prevent errors when running gatsby build caused by browser packages run in a node environment.
-exports.onCreateWebpackConfig = ({ plugins, actions }) => {
+export const onCreateWebpackConfig = ({ plugins, actions }) => {
+  const require = createRequire(import.meta.url);
   const providePlugins = {
     Buffer: ['buffer', 'Buffer'],
     process: require.resolve('../../stubs/process.js'),
@@ -270,7 +275,7 @@ exports.onCreateWebpackConfig = ({ plugins, actions }) => {
 
 // Remove type inference, as our schema is too ambiguous for this to be useful.
 // https://www.gatsbyjs.com/docs/scaling-issues/#switch-off-type-inference-for-sitepagecontext
-exports.createSchemaCustomization = ({ actions }) => {
+export const createSchemaCustomization = ({ actions }) => {
   actions.createTypes(`
     type Page implements Node @dontInfer {
       page_id: String
diff --git a/plugins/utils/openapi.js b/plugins/utils/openapi.mjs
similarity index 96%
rename from plugins/utils/openapi.js
rename to plugins/utils/openapi.mjs
index 96700bd39..370def036 100644
--- a/plugins/utils/openapi.js
+++ b/plugins/utils/openapi.mjs
@@ -1,4 +1,4 @@
-const { hideChanges, hideDiffChanges } = require('../../src/components/OpenAPIChangelog/utils/filterHiddenChanges');
+import { hideChanges, hideDiffChanges } from '../../src/components/OpenAPIChangelog/utils/filterHiddenChanges.js';
 
 const atlasAdminProdChangelogS3Prefix = 'https://mongodb-mms-prod-build-server.s3.amazonaws.com/openapi/changelog';
 const atlasAdminDevChangelogS3Prefix = 'https://mongodb-mms-build-server.s3.amazonaws.com/openapi/changelog';
@@ -112,6 +112,4 @@ const createOpenAPIChangelogNode = async ({ createNode, createNodeId, createCont
   }
 };
 
-module.exports = {
-  createOpenAPIChangelogNode,
-};
+export default createOpenAPIChangelogNode;
diff --git a/plugins/utils/products.js b/plugins/utils/products.mjs
similarity index 84%
rename from plugins/utils/products.js
rename to plugins/utils/products.mjs
index 60f30bdea..2452a894a 100644
--- a/plugins/utils/products.js
+++ b/plugins/utils/products.mjs
@@ -1,4 +1,4 @@
-const { baseUrl } = require('../../src/utils/base-url');
+import { baseUrl } from '../../src/utils/base-url.js';
 
 const createProductNodes = async ({ db, createNode, createNodeId, createContentDigest }) => {
   // Get all MongoDB products for the sidenav
@@ -20,6 +20,4 @@ const createProductNodes = async ({ db, createNode, createNodeId, createContentD
   });
 };
 
-module.exports = {
-  createProductNodes,
-};
+export default createProductNodes;
diff --git a/scripts/ensure-master.js b/scripts/ensure-master.js
index 8a71baea5..4a31a02f6 100644
--- a/scripts/ensure-master.js
+++ b/scripts/ensure-master.js
@@ -1,4 +1,4 @@
-const { execSync } = require('child_process');
+import { execSync } from 'child_process';
 
 const getGitBranch = () => {
   return execSync('git rev-parse --abbrev-ref HEAD')
diff --git a/src/build-constants.js b/src/build-constants.js
index 8d62e4e83..c4172f91b 100644
--- a/src/build-constants.js
+++ b/src/build-constants.js
@@ -1,6 +1,6 @@
-module.exports = {
-  DOCUMENTS_COLLECTION: 'documents',
-  ASSETS_COLLECTION: 'assets',
-  METADATA_COLLECTION: 'metadata',
-  SNOOTY_REALM_APP_ID: 'snooty-koueq',
-};
+const DOCUMENTS_COLLECTION = 'documents';
+const ASSETS_COLLECTION = 'assets';
+const METADATA_COLLECTION = 'metadata';
+const SNOOTY_REALM_APP_ID = 'snooty-koueq';
+
+export { DOCUMENTS_COLLECTION, ASSETS_COLLECTION, METADATA_COLLECTION, SNOOTY_REALM_APP_ID };
diff --git a/src/components/Admonition.js b/src/components/Admonition.js
index 009b4791a..e01d9e61c 100644
--- a/src/components/Admonition.js
+++ b/src/components/Admonition.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Callout, { Variant } from '@leafygreen-ui/callout';
 import { cx, css } from '@leafygreen-ui/emotion';
-import { getPlaintext } from '../utils/get-plaintext';
+import getPlaintext from '../utils/get-plaintext';
 import { theme } from '../theme/docsTheme';
 import ComponentFactory from './ComponentFactory';
 
diff --git a/src/components/Banner/SiteBanner.js b/src/components/Banner/SiteBanner.js
index 9a31d9aa9..1d9d14575 100644
--- a/src/components/Banner/SiteBanner.js
+++ b/src/components/Banner/SiteBanner.js
@@ -5,7 +5,7 @@ import { SNOOTY_REALM_APP_ID } from '../../build-constants';
 import { useSiteMetadata } from '../../hooks/use-site-metadata';
 import { theme } from '../../theme/docsTheme';
 import { isBrowser } from '../../utils/is-browser';
-import { normalizePath } from '../../utils/normalize-path';
+import normalizePath from '../../utils/normalize-path';
 import { fetchBanner } from '../../utils/realm';
 
 const getBannerSource = (src) => {
diff --git a/src/components/Chapters/Chapter.js b/src/components/Chapters/Chapter.js
index 55666c8da..6aa65a0fa 100644
--- a/src/components/Chapters/Chapter.js
+++ b/src/components/Chapters/Chapter.js
@@ -8,7 +8,7 @@ import { palette } from '@leafygreen-ui/palette';
 import { Body } from '@leafygreen-ui/typography';
 import Link from '../Link';
 import { theme } from '../../theme/docsTheme';
-import { getPlaintext } from '../../utils/get-plaintext';
+import getPlaintext from '../../utils/get-plaintext';
 import ChapterNumberLabel from './ChapterNumberLabel';
 
 // Height and width of image
diff --git a/src/components/Chapters/index.js b/src/components/Chapters/index.js
index 84f4a1384..80fa8986f 100644
--- a/src/components/Chapters/index.js
+++ b/src/components/Chapters/index.js
@@ -8,8 +8,8 @@ import ComponentFactory from '../ComponentFactory';
 import CardGroup from '../Card/CardGroup';
 import BookIcon from '../icons/Book';
 import { theme } from '../../theme/docsTheme';
-import { assertTrailingSlash } from '../../utils/assert-trailing-slash';
-import { getPlaintext } from '../../utils/get-plaintext';
+import assertTrailingSlash from '../../utils/assert-trailing-slash.mjs';
+import getPlaintext from '../../utils/get-plaintext';
 import useStickyTopValues from '../../hooks/useStickyTopValues';
 import RightColumn from './RightColumn';
 
diff --git a/src/components/Code/code-context.js b/src/components/Code/code-context.js
index 76d77ed9b..a3eca1952 100644
--- a/src/components/Code/code-context.js
+++ b/src/components/Code/code-context.js
@@ -2,7 +2,7 @@ import React, { useContext, useMemo } from 'react';
 import { Language } from '@leafygreen-ui/code';
 import LeafyIcon from '@leafygreen-ui/icon';
 import { TabContext } from '../Tabs/tab-context';
-import { getPlaintext } from '../../utils/get-plaintext';
+import getPlaintext from '../../utils/get-plaintext';
 
 const defaultContextValue = {
   codeBlockLanguage: null,
diff --git a/src/components/Cond.js b/src/components/Cond.js
index 8bca538b6..c57f5ad05 100644
--- a/src/components/Cond.js
+++ b/src/components/Cond.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { getNestedValue } from '../utils/get-nested-value';
+import getNestedValue from '../utils/get-nested-value.mjs';
 import ComponentFactory from './ComponentFactory';
 
 // For now, explicitly define the arguments that should be accepted for Gatsby to build the node
diff --git a/src/components/DefinitionList/DefinitionListItem.js b/src/components/DefinitionList/DefinitionListItem.js
index 50102d240..cc6876c1b 100644
--- a/src/components/DefinitionList/DefinitionListItem.js
+++ b/src/components/DefinitionList/DefinitionListItem.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import ComponentFactory from '../ComponentFactory';
-import { findKeyValuePair } from '../../utils/find-key-value-pair';
+import findKeyValuePair from '../../utils/find-key-value-pair';
 
 const DefinitionListItem = ({ nodeData: { children, term }, ...rest }) => {
   const termProps = {};
diff --git a/src/components/DocumentBody.js b/src/components/DocumentBody.js
index 4d6ed8e68..d9da58b54 100644
--- a/src/components/DocumentBody.js
+++ b/src/components/DocumentBody.js
@@ -4,10 +4,10 @@ import { withPrefix } from 'gatsby';
 import { UnifiedFooter } from '@mdb/consistent-nav';
 import { usePresentationMode } from '../hooks/use-presentation-mode';
 import { useCanonicalUrl } from '../hooks/use-canonical-url';
-import { findAllKeyValuePairs } from '../utils/find-all-key-value-pairs';
-import { getNestedValue } from '../utils/get-nested-value';
-import { getMetaFromDirective } from '../utils/get-meta-from-directive';
-import { getPlaintext } from '../utils/get-plaintext';
+import findAllKeyValuePairs from '../utils/find-all-key-value-pairs';
+import getNestedValue from '../utils/get-nested-value.mjs';
+import getMetaFromDirective from '../utils/get-meta-from-directive';
+import getPlaintext from '../utils/get-plaintext';
 import { getTemplate } from '../utils/get-template';
 import useSnootyMetadata from '../utils/use-snooty-metadata';
 import { isBrowser } from '../utils/is-browser';
diff --git a/src/components/DocumentBodyPreview.js b/src/components/DocumentBodyPreview.js
index c50594d95..3fdaf5792 100644
--- a/src/components/DocumentBodyPreview.js
+++ b/src/components/DocumentBodyPreview.js
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import { graphql } from 'gatsby';
 import PropTypes from 'prop-types';
-import { findAllKeyValuePairs } from '../utils/find-all-key-value-pairs';
-import { getNestedValue } from '../utils/get-nested-value';
-import { getPlaintext } from '../utils/get-plaintext';
+import findAllKeyValuePairs from '../utils/find-all-key-value-pairs';
+import getNestedValue from '../utils/get-nested-value.mjs';
+import getPlaintext from '../utils/get-plaintext';
 import { getTemplate } from '../utils/get-template';
 import Layout from '../layouts/preview-layout';
 import Widgets from './Widgets';
diff --git a/src/components/Emphasis.js b/src/components/Emphasis.js
index b8629bca8..445ce472c 100644
--- a/src/components/Emphasis.js
+++ b/src/components/Emphasis.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { getNestedValue } from '../utils/get-nested-value';
+import getNestedValue from '../utils/get-nested-value.mjs';
 
 const Emphasis = ({ nodeData }) => <em>{getNestedValue(['children', 0, 'value'], nodeData)}</em>;
 
diff --git a/src/components/Figure/Lightbox.js b/src/components/Figure/Lightbox.js
index e6eb93de4..771e8134b 100644
--- a/src/components/Figure/Lightbox.js
+++ b/src/components/Figure/Lightbox.js
@@ -46,7 +46,6 @@ const LightboxWrapper = styled('div')`
   margin-top: ${theme.size.medium};
   margin-bottom: ${theme.size.medium};
   display: block;
-  max-height: 620px;
 `;
 
 const Lightbox = ({ nodeData, ...rest }) => {
diff --git a/src/components/Figure/index.js b/src/components/Figure/index.js
index 311068ddc..f8a9988dc 100644
--- a/src/components/Figure/index.js
+++ b/src/components/Figure/index.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import Image from '../Image';
-import { getNestedValue } from '../../utils/get-nested-value';
+import getNestedValue from '../../utils/get-nested-value.mjs';
 import { theme } from '../../theme/docsTheme';
 import Lightbox from './Lightbox';
 import CaptionLegend from './CaptionLegend';
diff --git a/src/components/Footnote/FootnoteReference.js b/src/components/Footnote/FootnoteReference.js
index a57a42c15..0cce8bd41 100644
--- a/src/components/Footnote/FootnoteReference.js
+++ b/src/components/Footnote/FootnoteReference.js
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { getNestedValue } from '../../utils/get-nested-value';
+import getNestedValue from '../../utils/get-nested-value.mjs';
 import FootnoteContext from './footnote-context';
 
 /**
diff --git a/src/components/Footnote/index.js b/src/components/Footnote/index.js
index e84da03be..6bc2c5507 100644
--- a/src/components/Footnote/index.js
+++ b/src/components/Footnote/index.js
@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import ComponentFactory from '../ComponentFactory';
-import { getNestedValue } from '../../utils/get-nested-value';
+import getNestedValue from '../../utils/get-nested-value.mjs';
 import { intersperse } from '../../utils/intersperse';
 import FootnoteContext from './footnote-context';
 
diff --git a/src/components/GuideNext/GuidesList.js b/src/components/GuideNext/GuidesList.js
index 6b9eddcd0..0f43e1e33 100644
--- a/src/components/GuideNext/GuidesList.js
+++ b/src/components/GuideNext/GuidesList.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import { getPlaintext } from '../../utils/get-plaintext';
+import getPlaintext from '../../utils/get-plaintext';
 import GuidesListItem from './GuidesListItem';
 
 const List = styled('ul')`
diff --git a/src/components/HorizontalList.js b/src/components/HorizontalList.js
index f22149ada..2e5c40b76 100644
--- a/src/components/HorizontalList.js
+++ b/src/components/HorizontalList.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { getNestedValue } from '../utils/get-nested-value';
+import getNestedValue from '../utils/get-nested-value.mjs';
 import ComponentFactory from './ComponentFactory';
 
 const HorizontalList = ({
diff --git a/src/components/Image.js b/src/components/Image.js
index 48856abf6..bd58d91d2 100644
--- a/src/components/Image.js
+++ b/src/components/Image.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { withPrefix } from 'gatsby';
 import { css } from '@emotion/react';
 import { palette } from '@leafygreen-ui/palette';
-import { getNestedValue } from '../utils/get-nested-value';
+import getNestedValue from '../utils/get-nested-value.mjs';
 
 const Image = ({ nodeData, handleImageLoaded, className }) => {
   const [height, setHeight] = useState(null);
diff --git a/src/components/Link.js b/src/components/Link.js
index 0aa17a13e..86c53a15c 100644
--- a/src/components/Link.js
+++ b/src/components/Link.js
@@ -8,7 +8,7 @@ import { palette } from '@leafygreen-ui/palette';
 import ArrowRightIcon from '@leafygreen-ui/icon/dist/ArrowRight';
 import { isRelativeUrl } from '../utils/is-relative-url';
 import { joinClassNames } from '../utils/join-class-names';
-import { isGatsbyPreview } from '../utils/is-gatsby-preview';
+import isGatsbyPreview from '../utils/is-gatsby-preview';
 
 /*
  * Note: This component is not suitable for internal page navigation:
diff --git a/src/components/Only.js b/src/components/Only.js
index 7864ea4bf..b1c2008ae 100644
--- a/src/components/Only.js
+++ b/src/components/Only.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { getNestedValue } from '../utils/get-nested-value';
+import getNestedValue from '../utils/get-nested-value';
 import ComponentFactory from './ComponentFactory';
 
 // For now, explicitly define the arguments that should be accepted for Gatsby to build the node
diff --git a/src/components/OpenAPI/index.js b/src/components/OpenAPI/index.js
index fb7f2cf1a..2880f992c 100644
--- a/src/components/OpenAPI/index.js
+++ b/src/components/OpenAPI/index.js
@@ -12,7 +12,7 @@ import { useSiteMetadata } from '../../hooks/use-site-metadata';
 import useStickyTopValues from '../../hooks/useStickyTopValues';
 import { isBrowser } from '../../utils/is-browser';
 import { theme } from '../../theme/docsTheme';
-import { getPlaintext } from '../../utils/get-plaintext';
+import getPlaintext from '../../utils/get-plaintext';
 import { fetchOASFile } from '../../utils/realm';
 import { isLinkInWhitelist, WhitelistErrorCallout } from './whitelist';
 import {
diff --git a/src/components/OpenAPIChangelog/utils/filterHiddenChanges.js b/src/components/OpenAPIChangelog/utils/filterHiddenChanges.js
index f4e1b4656..83c244754 100644
--- a/src/components/OpenAPIChangelog/utils/filterHiddenChanges.js
+++ b/src/components/OpenAPIChangelog/utils/filterHiddenChanges.js
@@ -43,4 +43,4 @@ const hideDiffChanges = (diffData) => {
   return updatedDiffData.filter((path) => path.changes?.length);
 };
 
-module.exports = { hideChanges, hideDiffChanges };
+export { hideChanges, hideDiffChanges };
diff --git a/src/components/OpenAPIChangelog/utils/getResourceLinkUrl.js b/src/components/OpenAPIChangelog/utils/getResourceLinkUrl.js
index 9e028b0d0..20beaeba8 100644
--- a/src/components/OpenAPIChangelog/utils/getResourceLinkUrl.js
+++ b/src/components/OpenAPIChangelog/utils/getResourceLinkUrl.js
@@ -1,5 +1,5 @@
-import { generatePathPrefix } from '../../../utils/generate-path-prefix';
-import { normalizePath } from '../../../utils/normalize-path';
+import generatePathPrefix from '../../../utils/generate-path-prefix';
+import normalizePath from '../../../utils/normalize-path';
 
 const getResourceLinkUrl = (metadata, project, tag, operationId, openapi_pages = {}) => {
   const pathPrefix = generatePathPrefix(metadata, project);
diff --git a/src/components/RefRole.js b/src/components/RefRole.js
index 7adca56de..d5a26e6a2 100644
--- a/src/components/RefRole.js
+++ b/src/components/RefRole.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { palette } from '@leafygreen-ui/palette';
 import { theme } from '../theme/docsTheme';
-import { normalizePath } from '../utils/normalize-path';
+import normalizePath from '../utils/normalize-path';
 import ComponentFactory from './ComponentFactory';
 import Link from './Link';
 
diff --git a/src/components/SearchResults/Facets/useFacets.js b/src/components/SearchResults/Facets/useFacets.js
index 1fa5e73aa..484177c83 100644
--- a/src/components/SearchResults/Facets/useFacets.js
+++ b/src/components/SearchResults/Facets/useFacets.js
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { assertTrailingSlash } from '../../../utils/assert-trailing-slash';
+import assertTrailingSlash from '../../../utils/assert-trailing-slash.mjs';
 import { MARIAN_URL } from '../../../constants';
 
 const useFacets = () => {
diff --git a/src/components/Sidenav/GuidesTOCTree.js b/src/components/Sidenav/GuidesTOCTree.js
index 8f86169e8..501e2a56a 100644
--- a/src/components/Sidenav/GuidesTOCTree.js
+++ b/src/components/Sidenav/GuidesTOCTree.js
@@ -5,7 +5,7 @@ import { SideNavItem } from '@leafygreen-ui/side-nav';
 import Link from '../Link';
 import { ContentsContext } from '../Contents/contents-context';
 import { formatText } from '../../utils/format-text';
-import { getPlaintext } from '../../utils/get-plaintext';
+import getPlaintext from '../../utils/get-plaintext';
 import { isCurrentPage } from '../../utils/is-current-page';
 import { sideNavItemTOCStyling } from './styles/sideNavItem';
 
diff --git a/src/components/Strong.js b/src/components/Strong.js
index 95da046a1..38a52f657 100644
--- a/src/components/Strong.js
+++ b/src/components/Strong.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { getNestedValue } from '../utils/get-nested-value';
+import getNestedValue from '../utils/get-nested-value.mjs';
 
 const Strong = ({ nodeData }) => <strong>{getNestedValue(['children', 0, 'value'], nodeData)}</strong>;
 
diff --git a/src/components/StructuredData/BreadcrumbSchema.js b/src/components/StructuredData/BreadcrumbSchema.js
index 6e0610de7..d255c8bc7 100644
--- a/src/components/StructuredData/BreadcrumbSchema.js
+++ b/src/components/StructuredData/BreadcrumbSchema.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { withPrefix } from 'gatsby';
 
 import { useSiteMetadata } from '../../hooks/use-site-metadata';
-import { assertTrailingSlash } from '../../utils/assert-trailing-slash';
+import assertTrailingSlash from '../../utils/assert-trailing-slash.mjs';
 import { baseUrl } from '../../utils/base-url';
 import useSnootyMetadata from '../../utils/use-snooty-metadata';
 
diff --git a/src/components/Tabs/TabSelectors.js b/src/components/Tabs/TabSelectors.js
index d310903b8..8c229e7e9 100644
--- a/src/components/Tabs/TabSelectors.js
+++ b/src/components/Tabs/TabSelectors.js
@@ -1,7 +1,7 @@
 import React, { useContext, useMemo } from 'react';
 import { useTheme, css } from '@emotion/react';
 import Select from '../Select';
-import { getPlaintext } from '../../utils/get-plaintext';
+import getPlaintext from '../../utils/get-plaintext';
 import { reportAnalytics } from '../../utils/report-analytics';
 import { TabContext } from './tab-context';
 
diff --git a/src/components/Tabs/index.js b/src/components/Tabs/index.js
index 96abf5c4d..27cc88213 100644
--- a/src/components/Tabs/index.js
+++ b/src/components/Tabs/index.js
@@ -6,7 +6,7 @@ import { CodeProvider } from '../Code/code-context';
 import ComponentFactory from '../ComponentFactory';
 import { theme } from '../../theme/docsTheme';
 import { reportAnalytics } from '../../utils/report-analytics';
-import { getNestedValue } from '../../utils/get-nested-value';
+import getNestedValue from '../../utils/get-nested-value.mjs';
 import { isBrowser } from '../../utils/is-browser';
 import { TabContext } from './tab-context';
 
diff --git a/src/components/Time.js b/src/components/Time.js
index cbb142ac1..6aaf64640 100644
--- a/src/components/Time.js
+++ b/src/components/Time.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { getPlaintext } from '../utils/get-plaintext';
+import getPlaintext from '../utils/get-plaintext';
 
 const Time = ({ nodeData: { argument } }) => {
   const time = getPlaintext(argument);
diff --git a/src/components/Topic.js b/src/components/Topic.js
index e24ced1b8..70f0ac886 100644
--- a/src/components/Topic.js
+++ b/src/components/Topic.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { getNestedValue } from '../utils/get-nested-value';
+import getNestedValue from '../utils/get-nested-value.mjs';
 import ComponentFactory from './ComponentFactory';
 
 const Topic = ({ nodeData, ...rest }) => (
diff --git a/src/components/Twitter.js b/src/components/Twitter.js
index 88b4217df..3b88410d6 100644
--- a/src/components/Twitter.js
+++ b/src/components/Twitter.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withPrefix } from 'gatsby';
 import { useSiteMetadata } from '../hooks/use-site-metadata';
-import { getPlaintext } from '../utils/get-plaintext';
+import getPlaintext from '../utils/get-plaintext';
 
 const isExternalUrl = /^http(s)?:\/\//;
 
diff --git a/src/components/VersionDropdown/utils.js b/src/components/VersionDropdown/utils.js
index af6c0e455..8dc35c28d 100644
--- a/src/components/VersionDropdown/utils.js
+++ b/src/components/VersionDropdown/utils.js
@@ -1,4 +1,4 @@
-import { generatePathPrefix } from '../../utils/generate-path-prefix';
+import generatePathPrefix from '../../utils/generate-path-prefix';
 
 /**
  * Generates the prefix to be used for a version's URL. The prefix will typically consist of the docs repo's
diff --git a/src/components/Widgets/QuizWidget/QuizChoice.js b/src/components/Widgets/QuizWidget/QuizChoice.js
index 501d61e37..908a27178 100644
--- a/src/components/Widgets/QuizWidget/QuizChoice.js
+++ b/src/components/Widgets/QuizWidget/QuizChoice.js
@@ -7,7 +7,7 @@ import { palette } from '@leafygreen-ui/palette';
 import Icon from '@leafygreen-ui/icon';
 import ComponentFactory from '../../ComponentFactory';
 import { theme } from '../../../theme/docsTheme';
-import { getPlaintext } from '../../../utils/get-plaintext';
+import getPlaintext from '../../../utils/get-plaintext';
 
 const Dot = styled('span')`
   height: 10px;
diff --git a/src/components/Widgets/QuizWidget/QuizWidget.js b/src/components/Widgets/QuizWidget/QuizWidget.js
index 95fe2a7bd..8b966d6dd 100644
--- a/src/components/Widgets/QuizWidget/QuizWidget.js
+++ b/src/components/Widgets/QuizWidget/QuizWidget.js
@@ -8,7 +8,7 @@ import Icon from '@leafygreen-ui/icon';
 import ComponentFactory from '../../ComponentFactory';
 import { theme } from '../../../theme/docsTheme';
 import { useSiteMetadata } from '../../../hooks/use-site-metadata';
-import { getPlaintext } from '../../../utils/get-plaintext';
+import getPlaintext from '../../../utils/get-plaintext';
 import useSnootyMetadata from '../../../utils/use-snooty-metadata';
 import { useRealmFuncs } from './RealmFuncs';
 import { RealmAppProvider } from './RealmApp';
diff --git a/src/context/toc-context.js b/src/context/toc-context.js
index 6cb900256..6829aad8a 100644
--- a/src/context/toc-context.js
+++ b/src/context/toc-context.js
@@ -4,7 +4,7 @@ import { METADATA_COLLECTION } from '../build-constants';
 import { useSiteMetadata } from '../hooks/use-site-metadata';
 import { fetchDocuments } from '../utils/realm';
 import useSnootyMetadata from '../utils/use-snooty-metadata';
-import { isGatsbyPreview } from '../utils/is-gatsby-preview';
+import isGatsbyPreview from '../utils/is-gatsby-preview';
 import { VersionContext } from './version-context';
 
 const TocContext = createContext({
diff --git a/src/hooks/__mocks__/use-site-metadata.js b/src/hooks/__mocks__/use-site-metadata.js
index 71580e437..38d6417a0 100644
--- a/src/hooks/__mocks__/use-site-metadata.js
+++ b/src/hooks/__mocks__/use-site-metadata.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   useSiteMetadata: jest.fn().mockReturnValue({
     branch: 'master',
     project: 'datalake',
diff --git a/src/hooks/use-canonical-url.js b/src/hooks/use-canonical-url.js
index 1f1018c52..4688fe7ba 100644
--- a/src/hooks/use-canonical-url.js
+++ b/src/hooks/use-canonical-url.js
@@ -1,4 +1,4 @@
-import { assertTrailingSlash } from '../utils/assert-trailing-slash';
+import assertTrailingSlash from '../utils/assert-trailing-slash.mjs';
 import { useSiteMetadata } from './use-site-metadata';
 import { usePathPrefix } from './use-path-prefix';
 
diff --git a/src/hooks/use-marian-manifests.js b/src/hooks/use-marian-manifests.js
index 679eb9b54..b9a2346ae 100644
--- a/src/hooks/use-marian-manifests.js
+++ b/src/hooks/use-marian-manifests.js
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { assertTrailingSlash } from '../utils/assert-trailing-slash';
+import assertTrailingSlash from '../utils/assert-trailing-slash.mjs';
 import { parseMarianManifests } from '../utils/parse-marian-manifests';
 import { MARIAN_URL } from '../constants';
 import { fetchSearchPropertyMapping } from '../utils/realm';
diff --git a/src/init/DocumentDatabase.js b/src/init/DocumentDatabase.mjs
similarity index 84%
rename from src/init/DocumentDatabase.js
rename to src/init/DocumentDatabase.mjs
index 67df17a30..d7d945988 100644
--- a/src/init/DocumentDatabase.js
+++ b/src/init/DocumentDatabase.mjs
@@ -1,9 +1,9 @@
-const AdmZip = require('adm-zip');
-const BSON = require('bson');
-const { initRealm } = require('../utils/setup/init-realm');
-const { DOCUMENTS_COLLECTION, METADATA_COLLECTION, ASSETS_COLLECTION } = require('../build-constants');
-const { manifestMetadata, siteMetadata } = require('../utils/site-metadata');
-const { constructBuildFilter } = require('../utils/setup/construct-build-filter');
+import AdmZip from 'adm-zip';
+import BSON from 'bson';
+import initRealm from '../utils/setup/init-realm.js';
+import { DOCUMENTS_COLLECTION, METADATA_COLLECTION, ASSETS_COLLECTION } from '../build-constants.js';
+import { manifestMetadata, siteMetadata } from '../utils/site-metadata.mjs';
+import constructBuildFilter from '../utils/setup/construct-build-filter.js';
 
 const DB = siteMetadata.database;
 const buildFilter = constructBuildFilter(siteMetadata);
@@ -126,5 +126,7 @@ class RealmDocumentDatabase {
   }
 }
 
-exports.manifestDocumentDatabase = new ManifestDocumentDatabase(process.env.GATSBY_MANIFEST_PATH);
-exports.realmDocumentDatabase = new RealmDocumentDatabase();
+const manifestDocumentDatabase = new ManifestDocumentDatabase(process.env.GATSBY_MANIFEST_PATH);
+const realmDocumentDatabase = new RealmDocumentDatabase();
+
+export { manifestDocumentDatabase, realmDocumentDatabase };
diff --git a/src/templates/product-landing.js b/src/templates/product-landing.js
index 13c9a1f8f..136f7eb70 100644
--- a/src/templates/product-landing.js
+++ b/src/templates/product-landing.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { palette } from '@leafygreen-ui/palette';
 import { theme } from '../theme/docsTheme.js';
-import { findKeyValuePair } from '../utils/find-key-value-pair.js';
+import findKeyValuePair from '../utils/find-key-value-pair.js';
 import useSnootyMetadata from '../utils/use-snooty-metadata.js';
 
 const CONTENT_MAX_WIDTH = 1200;
diff --git a/src/utils/assert-trailing-slash.js b/src/utils/assert-trailing-slash.mjs
similarity index 66%
rename from src/utils/assert-trailing-slash.js
rename to src/utils/assert-trailing-slash.mjs
index b7739b6a4..23509000c 100644
--- a/src/utils/assert-trailing-slash.js
+++ b/src/utils/assert-trailing-slash.mjs
@@ -5,4 +5,4 @@ const assertTrailingSlash = (url) => {
   return `${url}/`;
 };
 
-module.exports.assertTrailingSlash = assertTrailingSlash;
+export default assertTrailingSlash;
diff --git a/src/utils/base-url.js b/src/utils/base-url.js
index 726e0b471..a6062ca62 100644
--- a/src/utils/base-url.js
+++ b/src/utils/base-url.js
@@ -1,4 +1,4 @@
-const { assertTrailingSlash } = require('./assert-trailing-slash');
+import assertTrailingSlash from './assert-trailing-slash.mjs';
 const DOTCOM_BASE_URL = 'https://www.mongodb.com';
 const DOTCOM_BASE_PREFIX = `docs`;
 
@@ -59,4 +59,4 @@ const baseUrl = (url = DOTCOM_BASE_URL, options = {}) => {
   return assertTrailingSlash(needsProtocol ? baseUrl.toString() : baseUrl.toString().split('//')[1]);
 };
 
-module.exports = { baseUrl, DOTCOM_BASE_PREFIX, DOTCOM_BASE_URL };
+export { baseUrl, DOTCOM_BASE_PREFIX, DOTCOM_BASE_URL };
diff --git a/src/utils/find-all-key-value-pairs.js b/src/utils/find-all-key-value-pairs.js
index 67986b223..329096d09 100644
--- a/src/utils/find-all-key-value-pairs.js
+++ b/src/utils/find-all-key-value-pairs.js
@@ -18,4 +18,4 @@ const findAllKeyValuePairs = (nodes, key, value) => {
 
 // TODO: switch to ES6 export syntax if Gatsby implements support for ES6 module imports
 // https://github.com/gatsbyjs/gatsby/issues/7810
-module.exports.findAllKeyValuePairs = findAllKeyValuePairs;
+export default findAllKeyValuePairs;
diff --git a/src/utils/find-key-value-pair.js b/src/utils/find-key-value-pair.js
index 8a6817dbb..2d6b6c107 100644
--- a/src/utils/find-key-value-pair.js
+++ b/src/utils/find-key-value-pair.js
@@ -18,4 +18,4 @@ const findKeyValuePair = (nodes, key, value) => {
 
 // TODO: switch to ES6 export syntax if Gatsby implements support for ES6 module imports
 // https://github.com/gatsbyjs/gatsby/issues/7810
-module.exports.findKeyValuePair = findKeyValuePair;
+export default findKeyValuePair;
diff --git a/src/utils/generate-path-prefix.js b/src/utils/generate-path-prefix.js
index 6eda621f4..74a5bc395 100644
--- a/src/utils/generate-path-prefix.js
+++ b/src/utils/generate-path-prefix.js
@@ -1,4 +1,5 @@
-const { normalizePath } = require('./normalize-path');
+import normalizePath from './normalize-path.js';
+// const { normalizePath } = require('./normalize-path');
 
 const generatePathPrefix = (
   { commitHash, parserBranch, patchId, pathPrefix, project: parserProject, snootyBranch, user },
@@ -34,4 +35,4 @@ const generatePathPrefix = (
 
 // TODO: switch to ES6 export syntax if Gatsby implements support for ES6 module imports
 // https://github.com/gatsbyjs/gatsby/issues/7810
-module.exports.generatePathPrefix = generatePathPrefix;
+export default generatePathPrefix;
diff --git a/src/utils/get-meta-from-directive.js b/src/utils/get-meta-from-directive.js
index dd218ba02..4509f841a 100644
--- a/src/utils/get-meta-from-directive.js
+++ b/src/utils/get-meta-from-directive.js
@@ -1,4 +1,4 @@
-const { getNestedValue } = require('./get-nested-value');
+import getNestedValue from './get-nested-value.mjs';
 
 // Grabs the metadata values in question and returns them as an array
 // for the Meta & TwitterMeta tags
@@ -33,4 +33,4 @@ const getMetaFromDirective = (type, nodes, target) => {
   return collectionOfMetadata;
 };
 
-module.exports.getMetaFromDirective = getMetaFromDirective;
+export default getMetaFromDirective;
diff --git a/src/utils/get-nested-value.js b/src/utils/get-nested-value.mjs
similarity index 91%
rename from src/utils/get-nested-value.js
rename to src/utils/get-nested-value.mjs
index 9b703e7ee..7ce4b12c9 100644
--- a/src/utils/get-nested-value.js
+++ b/src/utils/get-nested-value.mjs
@@ -11,4 +11,4 @@ const getNestedValue = (p, o) => {
 
 // TODO: switch to ES6 export syntax if Gatsby implements support for ES6 module imports
 // https://github.com/gatsbyjs/gatsby/issues/7810
-module.exports.getNestedValue = getNestedValue;
+export default getNestedValue;
diff --git a/src/utils/get-page-slug.js b/src/utils/get-page-slug.mjs
similarity index 77%
rename from src/utils/get-page-slug.js
rename to src/utils/get-page-slug.mjs
index ad2ca13bc..eb5fd8712 100644
--- a/src/utils/get-page-slug.js
+++ b/src/utils/get-page-slug.mjs
@@ -3,4 +3,4 @@ const getPageSlug = (page) => {
   return page === 'index' ? '/' : page;
 };
 
-module.exports.getPageSlug = getPageSlug;
+export default getPageSlug;
diff --git a/src/utils/get-page-title.js b/src/utils/get-page-title.js
index f6ec0a99b..25b36b0f2 100644
--- a/src/utils/get-page-title.js
+++ b/src/utils/get-page-title.js
@@ -1,5 +1,5 @@
 import { formatText } from './format-text';
-import { getNestedValue } from './get-nested-value';
+import getNestedValue from './get-nested-value.mjs';
 
 /*
  * Given slug and a property's slug-title mapping, look up the title for a given page.
diff --git a/src/utils/get-plaintext.js b/src/utils/get-plaintext.js
index fd828fccc..0f3d44385 100644
--- a/src/utils/get-plaintext.js
+++ b/src/utils/get-plaintext.js
@@ -15,4 +15,4 @@ const getPlaintext = (nodeArray) => {
   return nodeArray && nodeArray.length > 0 ? nodeArray.reduce(extractText, '') : '';
 };
 
-module.exports = { getPlaintext };
+export default getPlaintext;
diff --git a/src/utils/is-gatsby-preview.js b/src/utils/is-gatsby-preview.js
index f6e1c7b65..3ae51b5f7 100644
--- a/src/utils/is-gatsby-preview.js
+++ b/src/utils/is-gatsby-preview.js
@@ -3,4 +3,4 @@
  */
 const isGatsbyPreview = () => process.env.GATSBY_IS_PREVIEW === 'true';
 
-module.exports = { isGatsbyPreview };
+export default isGatsbyPreview;
diff --git a/src/utils/normalize-path.js b/src/utils/normalize-path.js
index f1a4307f1..3b56d939c 100644
--- a/src/utils/normalize-path.js
+++ b/src/utils/normalize-path.js
@@ -1,4 +1,4 @@
 // Remove duplicate slashes in path string
 const normalizePath = (path) => path.replace(/\/+/g, `/`);
 
-module.exports.normalizePath = normalizePath;
+export default normalizePath;
diff --git a/src/utils/remove-nested-value.js b/src/utils/remove-nested-value.mjs
similarity index 92%
rename from src/utils/remove-nested-value.js
rename to src/utils/remove-nested-value.mjs
index 6ee71cced..2f3aed194 100644
--- a/src/utils/remove-nested-value.js
+++ b/src/utils/remove-nested-value.mjs
@@ -22,4 +22,4 @@ const removeNestedValue = (target, traversalKey, arr) => {
   });
 };
 
-module.exports.removeNestedValue = removeNestedValue;
+export default removeNestedValue;
diff --git a/src/utils/search-params-to-url.js b/src/utils/search-params-to-url.js
index c59d5bc2b..6e8e01709 100644
--- a/src/utils/search-params-to-url.js
+++ b/src/utils/search-params-to-url.js
@@ -1,6 +1,6 @@
 import { MARIAN_URL } from '../constants';
 import { FACETS_KEY_PREFIX } from '../components/SearchResults/SearchContext';
-import { assertTrailingSlash } from './assert-trailing-slash';
+import assertTrailingSlash from './assert-trailing-slash.mjs';
 
 const TERM_PARAM = 'q';
 const PAGE_PARAM = 'page';
diff --git a/src/utils/setup/construct-build-filter.js b/src/utils/setup/construct-build-filter.js
index 59c601c21..bd5a4926d 100644
--- a/src/utils/setup/construct-build-filter.js
+++ b/src/utils/setup/construct-build-filter.js
@@ -1,4 +1,4 @@
-const { constructPageIdPrefix } = require('./construct-page-id-prefix');
+import constructPageIdPrefix from './construct-page-id-prefix.mjs';
 
 // Returns the query to be used by our Stitch/Realm function to fetch a site's documents
 const constructBuildFilter = ({ commitHash, patchId, ...rest }) => {
@@ -10,4 +10,4 @@ const constructBuildFilter = ({ commitHash, patchId, ...rest }) => {
   };
 };
 
-module.exports = { constructBuildFilter };
+export default constructBuildFilter;
diff --git a/src/utils/setup/construct-page-id-prefix.js b/src/utils/setup/construct-page-id-prefix.mjs
similarity index 79%
rename from src/utils/setup/construct-page-id-prefix.js
rename to src/utils/setup/construct-page-id-prefix.mjs
index 2537fe7c4..b1672e965 100644
--- a/src/utils/setup/construct-page-id-prefix.js
+++ b/src/utils/setup/construct-page-id-prefix.mjs
@@ -1,4 +1,4 @@
 // Concatenates a site prefix to return a page id
 const constructPageIdPrefix = ({ project, parserUser, parserBranch }) => `${project}/${parserUser}/${parserBranch}`;
 
-module.exports = { constructPageIdPrefix };
+export default constructPageIdPrefix;
diff --git a/src/utils/setup/fetch-manifest-metadata.js b/src/utils/setup/fetch-manifest-metadata.js
index 2c5457bf8..657e53864 100644
--- a/src/utils/setup/fetch-manifest-metadata.js
+++ b/src/utils/setup/fetch-manifest-metadata.js
@@ -1,5 +1,5 @@
-const AdmZip = require('adm-zip');
-const BSON = require('bson');
+import AdmZip from 'adm-zip';
+import BSON from 'bson';
 
 // Returns the metadata from the manifest file if provided
 const fetchManifestMetadata = () => {
@@ -16,4 +16,4 @@ const fetchManifestMetadata = () => {
   return metadata;
 };
 
-module.exports = { fetchManifestMetadata };
+export default fetchManifestMetadata;
diff --git a/src/utils/setup/init-realm.js b/src/utils/setup/init-realm.js
index cd6de65d6..0a809decf 100644
--- a/src/utils/setup/init-realm.js
+++ b/src/utils/setup/init-realm.js
@@ -1,5 +1,5 @@
-const Realm = require('realm-web');
-const { SNOOTY_REALM_APP_ID } = require('../../build-constants');
+import Realm from 'realm-web';
+import { SNOOTY_REALM_APP_ID } from '../../build-constants.js';
 
 const initRealm = async () => {
   // Returns an instance of an app.
@@ -10,4 +10,4 @@ const initRealm = async () => {
   return anonymous;
 };
 
-module.exports = { initRealm };
+export default initRealm;
diff --git a/src/utils/setup/save-asset-files.js b/src/utils/setup/save-asset-files.mjs
similarity index 89%
rename from src/utils/setup/save-asset-files.js
rename to src/utils/setup/save-asset-files.mjs
index 17d2b956f..ba61042f7 100644
--- a/src/utils/setup/save-asset-files.js
+++ b/src/utils/setup/save-asset-files.mjs
@@ -1,5 +1,5 @@
-const fs = require('fs').promises;
-const path = require('path');
+import fs from 'fs/promises';
+import path from 'path';
 
 const saveFile = async (file, data) => {
   await fs.mkdir(path.join('public', path.dirname(file)), {
@@ -37,4 +37,4 @@ const saveStaticFiles = async (staticFiles) => {
   );
 };
 
-module.exports = { saveAssetFiles, saveStaticFiles, saveFile };
+export { saveAssetFiles, saveStaticFiles, saveFile };
diff --git a/src/utils/setup/transform-breadcrumbs.js b/src/utils/setup/transform-breadcrumbs.mjs
similarity index 77%
rename from src/utils/setup/transform-breadcrumbs.js
rename to src/utils/setup/transform-breadcrumbs.mjs
index e7dee4b06..6452080b1 100644
--- a/src/utils/setup/transform-breadcrumbs.js
+++ b/src/utils/setup/transform-breadcrumbs.mjs
@@ -1,4 +1,4 @@
-const { getPlaintext } = require('../get-plaintext');
+import getPlaintext from '../get-plaintext.js';
 
 const transformBreadcrumbs = (breadcrumbs, slugToTitle) => {
   Object.entries(breadcrumbs).forEach(([slug, breadcrumbList]) => {
@@ -13,4 +13,4 @@ const transformBreadcrumbs = (breadcrumbs, slugToTitle) => {
   });
 };
 
-module.exports = { transformBreadcrumbs };
+export default transformBreadcrumbs;
diff --git a/src/utils/setup/validate-env-variables.js b/src/utils/setup/validate-env-variables.mjs
similarity index 97%
rename from src/utils/setup/validate-env-variables.js
rename to src/utils/setup/validate-env-variables.mjs
index 56c11f3a1..9553cb424 100644
--- a/src/utils/setup/validate-env-variables.js
+++ b/src/utils/setup/validate-env-variables.mjs
@@ -1,4 +1,4 @@
-const fs = require('fs');
+import fs from 'fs';
 
 // env variables for building site along with use in front-end
 // https://www.gatsbyjs.org/docs/environment-variables/#defining-environment-variables
@@ -100,4 +100,4 @@ const replaceIncorrectEnvVars = (incorrectEnvVars, envVars) => {
   }
 };
 
-module.exports.validateEnvVariables = validateEnvVariables;
+export default validateEnvVariables;
diff --git a/src/utils/site-metadata.js b/src/utils/site-metadata.mjs
similarity index 79%
rename from src/utils/site-metadata.js
rename to src/utils/site-metadata.mjs
index 6811620a5..677790060 100644
--- a/src/utils/site-metadata.js
+++ b/src/utils/site-metadata.mjs
@@ -1,14 +1,18 @@
-const { execSync } = require('child_process');
-const userInfo = require('os').userInfo;
-const { fetchManifestMetadata } = require('../utils/setup/fetch-manifest-metadata');
-const { DOTCOM_BASE_URL } = require('./base-url');
+import { execSync } from 'child_process';
+import os from 'os';
+import fetchManifestMetadata from './setup/fetch-manifest-metadata.js';
+import { DOTCOM_BASE_URL } from './base-url.js';
+import dotenv from 'dotenv';
 
 // loads vars from the .env file into process.env object
 const runningEnv = process.env.NODE_ENV || 'production';
 
-require('dotenv').config({
+dotenv.config({
   path: `.env.${runningEnv}`,
 });
+// require('dotenv').config({
+//   path: `.env.${runningEnv}`,
+// });
 
 const manifestMetadata = fetchManifestMetadata();
 
@@ -64,16 +68,15 @@ const siteMetadata = {
   database: getDatabase(process.env.SNOOTY_ENV),
   reposDatabase: getReposDatabase(process.env.SNOOTY_ENV),
   parserBranch: manifestMetadata['branch'] || process.env.GATSBY_PARSER_BRANCH || `master`,
-  parserUser: process.env.GATSBY_PARSER_USER || userInfo().username,
+  parserUser: process.env.GATSBY_PARSER_USER || os.userInfo().username,
   patchId: process.env.PATCH_ID || '',
   pathPrefix: getPathPrefix(process.env.PATH_PREFIX),
   project: manifestMetadata['project'] || process.env.GATSBY_SITE,
   siteUrl: DOTCOM_BASE_URL,
   snootyBranch: gitBranch,
   snootyEnv: process.env.SNOOTY_ENV || 'development',
-  user: userInfo().username,
+  user: os.userInfo().username,
   manifestPath: process.env.GATSBY_MANIFEST_PATH,
 };
 
-module.exports.siteMetadata = siteMetadata;
-module.exports.manifestMetadata = manifestMetadata;
+export { siteMetadata, manifestMetadata };
diff --git a/src/utils/url-utils.js b/src/utils/url-utils.js
index b6a1b5a25..50f5b032f 100644
--- a/src/utils/url-utils.js
+++ b/src/utils/url-utils.js
@@ -1,7 +1,7 @@
 import { generatePrefix } from '../components/VersionDropdown/utils';
 import { baseUrl } from './base-url';
-import { assertTrailingSlash } from './assert-trailing-slash';
-import { normalizePath } from './normalize-path';
+import assertTrailingSlash from './assert-trailing-slash.mjs';
+import normalizePath from './normalize-path';
 
 export const getUrl = (branchUrlSlug, project, siteMetadata, siteBasePrefix, slug) => {
   if (branchUrlSlug === 'legacy') {
diff --git a/stubs/process.js b/stubs/process.js
index 067b5eaf6..2a89bc0b3 100644
--- a/stubs/process.js
+++ b/stubs/process.js
@@ -1,7 +1,18 @@
-const process = require('process');
+import process from 'process';
 
 //monkey patch process
 global.process = process;
 
-module.exports =
-  typeof global !== 'undefined' && global.process ? global.process : require('../node_modules/process/browser.js');
+console.log('PROCESS MAYA:', process);
+
+// const exp = typeof global !== 'undefined' && global.process ? global.process : import {process} from '../node_modules/process/browser.js'
+// MAYA TODO
+
+// module.exports =
+//   typeof global !== 'undefined' && global.process ? global.process : require('../node_modules/process/browser.js');
+
+export default typeof global !== 'undefined' && global.process
+  ? global.process
+  : import('../node_modules/process/browser.js');
+
+// require('../node_modules/process/browser.js');
diff --git a/tests/testSetup.js b/tests/testSetup.js
index 14f177932..288131770 100644
--- a/tests/testSetup.js
+++ b/tests/testSetup.js
@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom';
 import EventSource from 'eventsourcemock';
 import { preloadAll } from 'react-loadable';
+import crypto from 'crypto';
 
 global.navigator = {
   userAgent: 'node.js',
@@ -35,8 +36,6 @@ afterAll(() => {
   process.removeListener('unhandledRejection', rejectionHandler);
 });
 
-const crypto = require('crypto');
-
 Object.defineProperty(global.self, 'crypto', {
   value: {
     getRandomValues: (arr) => crypto.randomBytes(arr.length),
diff --git a/tests/unit/Chapters.test.js b/tests/unit/Chapters.test.js
index 410a2f299..1b248433a 100644
--- a/tests/unit/Chapters.test.js
+++ b/tests/unit/Chapters.test.js
@@ -8,7 +8,7 @@ import { tick } from '../utils';
 import { SidenavContext } from '../../src/components/Sidenav';
 import { theme } from '../../src/theme/docsTheme';
 import * as useActiveHeading from '../../src/hooks/useActiveHeading';
-import { getPlaintext } from '../../src/utils/get-plaintext';
+import getPlaintext from '../../src/utils/get-plaintext';
 import mockData from './data/Chapters.test.json';
 
 const mountChapters = () => {
diff --git a/tests/unit/Meta.test.js b/tests/unit/Meta.test.js
index dc0709814..a237abaf9 100644
--- a/tests/unit/Meta.test.js
+++ b/tests/unit/Meta.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { getMetaFromDirective } from '../../src/utils/get-meta-from-directive';
+import getMetaFromDirective from '../../src/utils/get-meta-from-directive';
 import Meta from '../../src/components/Meta';
 
 // data for this component
diff --git a/tests/unit/__mockStyles.js b/tests/unit/__mockStyles.js
index f053ebf79..ff8b4c563 100644
--- a/tests/unit/__mockStyles.js
+++ b/tests/unit/__mockStyles.js
@@ -1 +1 @@
-module.exports = {};
+export default {};
diff --git a/tests/unit/__snapshots__/Figure.test.js.snap b/tests/unit/__snapshots__/Figure.test.js.snap
index f9abc1d1a..add560759 100644
--- a/tests/unit/__snapshots__/Figure.test.js.snap
+++ b/tests/unit/__snapshots__/Figure.test.js.snap
@@ -61,7 +61,6 @@ exports[`renders lightbox correctly when specified as an option 1`] = `
   margin-top: 24px;
   margin-bottom: 24px;
   display: block;
-  max-height: 620px;
 }
 
 .emotion-2 {
diff --git a/tests/unit/__snapshots__/Lightbox.test.js.snap b/tests/unit/__snapshots__/Lightbox.test.js.snap
index 40920de16..100a7b390 100644
--- a/tests/unit/__snapshots__/Lightbox.test.js.snap
+++ b/tests/unit/__snapshots__/Lightbox.test.js.snap
@@ -8,7 +8,6 @@ exports[`Lightbox renders correctly 1`] = `
   margin-top: 24px;
   margin-bottom: 24px;
   display: block;
-  max-height: 620px;
 }
 
 .emotion-2 {
diff --git a/tests/unit/utils/assert-trailing-slash.test.js b/tests/unit/utils/assert-trailing-slash.test.js
index f17ffb354..2a826747a 100644
--- a/tests/unit/utils/assert-trailing-slash.test.js
+++ b/tests/unit/utils/assert-trailing-slash.test.js
@@ -1,4 +1,4 @@
-import { assertTrailingSlash } from '../../../src/utils/assert-trailing-slash';
+import assertTrailingSlash from '../../../src/utils/assert-trailing-slash';
 
 it('should add trailing slashes to links if they are missing', () => {
   const linkWithoutSlash = 'foo.bar';
diff --git a/tests/unit/utils/generate-path-prefix.test.js b/tests/unit/utils/generate-path-prefix.test.js
index b686d0422..4a05ce880 100644
--- a/tests/unit/utils/generate-path-prefix.test.js
+++ b/tests/unit/utils/generate-path-prefix.test.js
@@ -1,4 +1,4 @@
-import { generatePathPrefix } from '../../../src/utils/generate-path-prefix';
+import generatePathPrefix from '../../../src/utils/generate-path-prefix';
 
 describe('path prefix testing', () => {
   const commitHash = 'COMMIT_HASH';
diff --git a/tests/unit/utils/join-class-names.test.js b/tests/unit/utils/join-class-names.test.js
index 990d7754e..17677dec2 100644
--- a/tests/unit/utils/join-class-names.test.js
+++ b/tests/unit/utils/join-class-names.test.js
@@ -1,4 +1,4 @@
-const { joinClassNames } = require('../../../src/utils/join-class-names');
+import { joinClassNames } from '../../../src/utils/join-class-names.js';
 
 describe('joinClassNames', () => {
   it('returns a string of all class names joined together', () => {