diff --git a/build/build-bundle.js b/build/build-bundle.js
index bdf7ec76fb47..7aeb8cb23fa1 100644
--- a/build/build-bundle.js
+++ b/build/build-bundle.js
@@ -116,7 +116,8 @@ async function buildBundle(entryPath, distPath, opts = {minify: true}) {
   // Don't include the stringified report in DevTools - see devtools-report-assets.js
   // Don't include in Lightrider - HTML generation isn't supported, so report assets aren't needed.
   if (isDevtools(entryPath) || isLightrider(entryPath)) {
-    modulesToIgnore.push(require.resolve('../report/generator/report-assets.js'));
+    shimsObj[require.resolve('../report/generator/report-assets.js')] =
+      'export const reportAssets = {}';
   }
 
   // Don't include locales in DevTools.
diff --git a/build/build-dt-report-resources.js b/build/build-dt-report-resources.js
index 58251620fa40..b82c08f0d213 100644
--- a/build/build-dt-report-resources.js
+++ b/build/build-dt-report-resources.js
@@ -35,9 +35,8 @@ async function buildReportGenerator() {
     input: 'report/generator/report-generator.js',
     plugins: [
       rollupPlugins.shim({
-        [`${LH_ROOT}/report/generator/flow-report-assets.js`]: 'export default {}',
+        [`${LH_ROOT}/report/generator/flow-report-assets.js`]: 'export const flowReportAssets = {}',
       }),
-      rollupPlugins.commonjs(),
       rollupPlugins.nodeResolve(),
       rollupPlugins.inlineFs({verbose: Boolean(process.env.DEBUG)}),
     ],
diff --git a/build/build-lightrider-bundles.js b/build/build-lightrider-bundles.js
index 7805845987f1..d2c3c5b44b15 100644
--- a/build/build-lightrider-bundles.js
+++ b/build/build-lightrider-bundles.js
@@ -33,10 +33,9 @@ async function buildReportGenerator() {
     plugins: [
       rollupPlugins.inlineFs({verbose: Boolean(process.env.DEBUG)}),
       rollupPlugins.shim({
-        [`${LH_ROOT}/report/generator/flow-report-assets.js`]: 'export default {}',
+        [`${LH_ROOT}/report/generator/flow-report-assets.js`]: 'export const flowReportAssets = {}',
         'fs': 'export default {}',
       }),
-      rollupPlugins.commonjs(),
     ],
   });
 
diff --git a/build/build-sample-reports.js b/build/build-sample-reports.js
index 1aa42911b982..f0bfb525abfb 100644
--- a/build/build-sample-reports.js
+++ b/build/build-sample-reports.js
@@ -12,7 +12,7 @@ import path from 'path';
 
 import {swapLocale} from '../shared/localization/swap-locale.js';
 import {swapFlowLocale} from '../shared/localization/swap-flow-locale.js';
-import ReportGenerator from '../report/generator/report-generator.js';
+import {ReportGenerator} from '../report/generator/report-generator.js';
 import {defaultSettings} from '../core/config/constants.js';
 import lighthouse from '../core/index.js';
 import {LH_ROOT} from '../root.js';
diff --git a/build/build-viewer.js b/build/build-viewer.js
index c9dffe59106d..d176acd67263 100644
--- a/build/build-viewer.js
+++ b/build/build-viewer.js
@@ -18,10 +18,15 @@ async function buildReportGenerator() {
   const bundle = await rollup({
     input: 'report/generator/report-generator.js',
     plugins: [
+      rollupPlugins.replace({
+        delimiters: ['', ''],
+        values: {
+          'getModuleDirectory(import.meta)': '""',
+        },
+      }),
       rollupPlugins.shim({
-        [`${LH_ROOT}/report/generator/flow-report-assets.js`]: 'export default {}',
+        [`${LH_ROOT}/report/generator/flow-report-assets.js`]: 'export const flowReportAssets = {}',
       }),
-      rollupPlugins.commonjs(),
       rollupPlugins.nodeResolve(),
       rollupPlugins.inlineFs({verbose: Boolean(process.env.DEBUG)}),
     ],
@@ -51,11 +56,26 @@ async function main() {
     ],
     javascripts: [
       reportGeneratorJs,
+      'window.ReportGenerator = window.ReportGenerator.ReportGenerator',
       {path: require.resolve('pako/dist/pako_inflate.js')},
       {path: 'src/main.js', rollup: true, rollupPlugins: [
+        rollupPlugins.replace({
+          delimiters: ['', ''],
+          values: {
+            'getModuleDirectory(import.meta)': '""',
+          },
+        }),
         rollupPlugins.shim({
           './locales.js': 'export const locales = {};',
-          'module': 'export const createRequire = () => {throw new Error}',
+          'module': `
+            export const createRequire = () => {
+              return {
+                resolve() {
+                  throw new Error('createRequire.resolve is not supported in bundled Lighthouse');
+                },
+              };
+            };
+          `,
         }),
         rollupPlugins.typescript({
           tsconfig: 'flow-report/tsconfig.json',
diff --git a/core/fraggle-rock/api.js b/core/fraggle-rock/api.js
index 7d1fcc9dbbfc..54d85b204004 100644
--- a/core/fraggle-rock/api.js
+++ b/core/fraggle-rock/api.js
@@ -9,7 +9,7 @@ import {UserFlow, auditGatherSteps} from './user-flow.js';
 import {snapshotGather} from './gather/snapshot-runner.js';
 import {startTimespanGather} from './gather/timespan-runner.js';
 import {navigationGather} from './gather/navigation-runner.js';
-import ReportGenerator from '../../report/generator/report-generator.js';
+import {ReportGenerator} from '../../report/generator/report-generator.js';
 import {Runner} from '../runner.js';
 
 /**
diff --git a/core/fraggle-rock/user-flow.js b/core/fraggle-rock/user-flow.js
index 788ae18e2852..e346fb688b6b 100644
--- a/core/fraggle-rock/user-flow.js
+++ b/core/fraggle-rock/user-flow.js
@@ -5,7 +5,7 @@
  */
 'use strict';
 
-import ReportGenerator from '../../report/generator/report-generator.js';
+import {ReportGenerator} from '../../report/generator/report-generator.js';
 import {snapshotGather} from './gather/snapshot-runner.js';
 import {startTimespanGather} from './gather/timespan-runner.js';
 import {navigationGather} from './gather/navigation-runner.js';
diff --git a/core/runner.js b/core/runner.js
index 298c6b7947a9..ffa29903cd3f 100644
--- a/core/runner.js
+++ b/core/runner.js
@@ -17,7 +17,7 @@ import * as assetSaver from './lib/asset-saver.js';
 import fs from 'fs';
 import path from 'path';
 import {Sentry} from './lib/sentry.js';
-import ReportGenerator from '../report/generator/report-generator.js';
+import {ReportGenerator} from '../report/generator/report-generator.js';
 import {LighthouseError} from './lib/lh-error.js';
 import {lighthouseVersion} from '../root.js';
 import {getModuleDirectory} from '../esm-utils.js';
diff --git a/core/scripts/build-test-flow-report.js b/core/scripts/build-test-flow-report.js
index c946254693cc..f88a669682b3 100644
--- a/core/scripts/build-test-flow-report.js
+++ b/core/scripts/build-test-flow-report.js
@@ -10,12 +10,12 @@ import fs from 'fs';
 
 import open from 'open';
 
-import reportGenerator from '../../report/generator/report-generator.js';
+import {ReportGenerator} from '../../report/generator/report-generator.js';
 import {LH_ROOT} from '../../root.js';
 import {readJson} from '../test/test-utils.js';
 
 const flow = readJson('core/test/fixtures/fraggle-rock/reports/sample-flow-result.json');
-const htmlReport = reportGenerator.generateFlowReportHtml(flow);
+const htmlReport = ReportGenerator.generateFlowReportHtml(flow);
 const filepath = `${LH_ROOT}/dist/sample-reports/flow-report/index.html`;
 fs.writeFileSync(filepath, htmlReport);
 open(filepath);
diff --git a/flow-report/test/flow-report-pptr-test.ts b/flow-report/test/flow-report-pptr-test.ts
index 9348fa3b5e2a..0894557f97be 100644
--- a/flow-report/test/flow-report-pptr-test.ts
+++ b/flow-report/test/flow-report-pptr-test.ts
@@ -6,7 +6,7 @@
 
 import puppeteer, {Browser, Page} from 'puppeteer';
 
-import ReportGenerator from '../../report/generator/report-generator.js';
+import {ReportGenerator} from '../../report/generator/report-generator.js';
 import {flowResult} from './sample-flow';
 
 describe('Lighthouse Flow Report', () => {
diff --git a/report/generator/file-namer.js b/report/generator/file-namer.js
index ce1aa8749c1a..07605297eb0c 100644
--- a/report/generator/file-namer.js
+++ b/report/generator/file-namer.js
@@ -54,4 +54,8 @@ function getFlowResultFilenamePrefix(flowResult) {
   return getFilenamePrefix(name, lhr.fetchTime);
 }
 
-module.exports = {getLhrFilenamePrefix, getFilenamePrefix, getFlowResultFilenamePrefix};
+export {
+  getLhrFilenamePrefix,
+  getFilenamePrefix,
+  getFlowResultFilenamePrefix,
+};
diff --git a/report/generator/flow-report-assets.js b/report/generator/flow-report-assets.js
index dc536790d42f..40019a563a3a 100644
--- a/report/generator/flow-report-assets.js
+++ b/report/generator/flow-report-assets.js
@@ -5,16 +5,20 @@
  */
 'use strict';
 
-const fs = require('fs');
+import fs from 'fs';
+
+import {getModuleDirectory} from '../../esm-utils.js';
+
+const moduleDir = getModuleDirectory(import.meta);
 
 /* eslint-disable max-len */
-const FLOW_REPORT_TEMPLATE = fs.readFileSync(`${__dirname}/../../flow-report/assets/standalone-flow-template.html`, 'utf8');
-const REGULAR_REPORT_CSS = fs.readFileSync(__dirname + '/../assets/styles.css', 'utf8');
-const FLOW_REPORT_CSS = fs.readFileSync(`${__dirname}/../../flow-report/assets/styles.css`, 'utf8');
-const FLOW_REPORT_JAVASCRIPT = fs.readFileSync(`${__dirname}/../../dist/report/flow.js`, 'utf8');
+const FLOW_REPORT_TEMPLATE = fs.readFileSync(`${moduleDir}/../../flow-report/assets/standalone-flow-template.html`, 'utf8');
+const REGULAR_REPORT_CSS = fs.readFileSync(moduleDir + '/../assets/styles.css', 'utf8');
+const FLOW_REPORT_CSS = fs.readFileSync(`${moduleDir}/../../flow-report/assets/styles.css`, 'utf8');
+const FLOW_REPORT_JAVASCRIPT = fs.readFileSync(`${moduleDir}/../../dist/report/flow.js`, 'utf8');
 /* eslint-enable max-len */
 
-module.exports = {
+export const flowReportAssets = {
   FLOW_REPORT_TEMPLATE,
   FLOW_REPORT_CSS: [REGULAR_REPORT_CSS, FLOW_REPORT_CSS].join('\n'),
   FLOW_REPORT_JAVASCRIPT,
diff --git a/report/generator/package.json b/report/generator/package.json
deleted file mode 100644
index 8d10bc1dfd36..000000000000
--- a/report/generator/package.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "type": "commonjs",
-  "//": "Preserve commonjs in this directory. Temporary file until converted to type: module"
-}
diff --git a/report/generator/report-assets.js b/report/generator/report-assets.js
index 282bbb7c4299..5e2eb84c744a 100644
--- a/report/generator/report-assets.js
+++ b/report/generator/report-assets.js
@@ -5,15 +5,18 @@
  */
 'use strict';
 
-const fs = require('fs');
+import fs from 'fs';
 
-const flowReportAssets = require('./flow-report-assets.js');
+import {flowReportAssets} from './flow-report-assets.js';
+import {getModuleDirectory} from '../../esm-utils.js';
 
-const REPORT_TEMPLATE = fs.readFileSync(__dirname + '/../assets/standalone-template.html',
+const moduleDir = getModuleDirectory(import.meta);
+
+const REPORT_TEMPLATE = fs.readFileSync(moduleDir + '/../assets/standalone-template.html',
     'utf8');
-const REPORT_JAVASCRIPT = fs.readFileSync(__dirname + '/../../dist/report/standalone.js', 'utf8');
+const REPORT_JAVASCRIPT = fs.readFileSync(moduleDir + '/../../dist/report/standalone.js', 'utf8');
 
-module.exports = {
+export const reportAssets = {
   REPORT_TEMPLATE,
   REPORT_JAVASCRIPT,
   // Flow report assets are not needed for every bundle.
diff --git a/report/generator/report-generator.js b/report/generator/report-generator.js
index 9d6c51c99979..484b34786dcd 100644
--- a/report/generator/report-generator.js
+++ b/report/generator/report-generator.js
@@ -5,7 +5,7 @@
  */
 'use strict';
 
-const htmlReportAssets = require('./report-assets.js');
+import {reportAssets} from './report-assets.js';
 
 /** @typedef {import('../../types/lhr/lhr').default} LHResult */
 /** @typedef {import('../../types/lhr/flow').default} FlowResult */
@@ -50,9 +50,9 @@ class ReportGenerator {
     const sanitizedJson = ReportGenerator.sanitizeJson(lhr);
     // terser does its own sanitization, but keep this basic replace for when
     // we want to generate a report without minification.
-    const sanitizedJavascript = htmlReportAssets.REPORT_JAVASCRIPT.replace(/<\//g, '\\u003c/');
+    const sanitizedJavascript = reportAssets.REPORT_JAVASCRIPT.replace(/<\//g, '\\u003c/');
 
-    return ReportGenerator.replaceStrings(htmlReportAssets.REPORT_TEMPLATE, [
+    return ReportGenerator.replaceStrings(reportAssets.REPORT_TEMPLATE, [
       {search: '%%LIGHTHOUSE_JSON%%', replacement: sanitizedJson},
       {search: '%%LIGHTHOUSE_JAVASCRIPT%%', replacement: sanitizedJavascript},
     ]);
@@ -65,11 +65,11 @@ class ReportGenerator {
    */
   static generateFlowReportHtml(flow) {
     const sanitizedJson = ReportGenerator.sanitizeJson(flow);
-    return ReportGenerator.replaceStrings(htmlReportAssets.FLOW_REPORT_TEMPLATE, [
+    return ReportGenerator.replaceStrings(reportAssets.FLOW_REPORT_TEMPLATE, [
       /* eslint-disable max-len */
       {search: '%%LIGHTHOUSE_FLOW_JSON%%', replacement: sanitizedJson},
-      {search: '%%LIGHTHOUSE_FLOW_JAVASCRIPT%%', replacement: htmlReportAssets.FLOW_REPORT_JAVASCRIPT},
-      {search: '/*%%LIGHTHOUSE_FLOW_CSS%%*/', replacement: htmlReportAssets.FLOW_REPORT_CSS},
+      {search: '%%LIGHTHOUSE_FLOW_JAVASCRIPT%%', replacement: reportAssets.FLOW_REPORT_JAVASCRIPT},
+      {search: '/*%%LIGHTHOUSE_FLOW_CSS%%*/', replacement: reportAssets.FLOW_REPORT_CSS},
       /* eslint-enable max-len */
     ]);
   }
@@ -174,4 +174,4 @@ class ReportGenerator {
   }
 }
 
-module.exports = ReportGenerator;
+export {ReportGenerator};
diff --git a/report/generator/tsconfig.json b/report/generator/tsconfig.json
index 2b25427ced7b..247047512ea1 100644
--- a/report/generator/tsconfig.json
+++ b/report/generator/tsconfig.json
@@ -11,5 +11,6 @@
   ],
   "include": [
     "**/*.js",
+    "../../esm-utils.js",
   ],
 }
diff --git a/report/test/generator/file-namer-test.js b/report/test/generator/file-namer-test.js
index 2bc37829d182..73b95eb67948 100644
--- a/report/test/generator/file-namer-test.js
+++ b/report/test/generator/file-namer-test.js
@@ -5,9 +5,9 @@
  */
 'use strict';
 
-const assert = require('assert').strict;
+import {strict as assert} from 'assert';
 
-const getLhrFilenamePrefix = require('../../generator/file-namer.js').getLhrFilenamePrefix;
+import {getLhrFilenamePrefix} from '../../generator/file-namer.js';
 
 describe('file-namer helper', () => {
   it('generates filename prefixes', () => {
diff --git a/report/test/generator/package.json b/report/test/generator/package.json
deleted file mode 100644
index 8d10bc1dfd36..000000000000
--- a/report/test/generator/package.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "type": "commonjs",
-  "//": "Preserve commonjs in this directory. Temporary file until converted to type: module"
-}
diff --git a/report/test/generator/report-generator-test.js b/report/test/generator/report-generator-test.js
index 8aeb12a8e47a..5d213a976c11 100644
--- a/report/test/generator/report-generator-test.js
+++ b/report/test/generator/report-generator-test.js
@@ -7,16 +7,15 @@
 
 /* eslint-disable no-irregular-whitespace */
 
-const assert = require('assert').strict;
-const fs = require('fs');
+import {strict as assert} from 'assert';
+import fs from 'fs';
 
-const csvValidator = require('csv-validator');
+import csvValidator from 'csv-validator';
 
-const ReportGenerator = require('../../generator/report-generator.js');
-// const {readJson} = require('../../../root.js');
-// TODO(esmodules): remove when this folder is esm
-// const sampleResults = readJson('core/test/results/sample_v2.json');
-const sampleResults = require('../../../core/test/results/sample_v2.json');
+import {ReportGenerator} from '../../generator/report-generator.js';
+import {readJson} from '../../../core/test/test-utils.js';
+
+const sampleResults = readJson('core/test/results/sample_v2.json');
 
 describe('ReportGenerator', () => {
   describe('#replaceStrings', () => {
diff --git a/report/test/renderer/report-renderer-axe-test.js b/report/test/renderer/report-renderer-axe-test.js
index 9c4d635b640c..eb864cde5a21 100644
--- a/report/test/renderer/report-renderer-axe-test.js
+++ b/report/test/renderer/report-renderer-axe-test.js
@@ -6,7 +6,7 @@
 
 import puppeteer from 'puppeteer';
 
-import reportGenerator from '../../generator/report-generator.js';
+import {ReportGenerator} from '../../generator/report-generator.js';
 import {axeSource} from '../../../core/lib/axe.js';
 import {readJson} from '../../../core/test/test-utils.js';
 
@@ -28,7 +28,7 @@ describe('ReportRendererAxe', () => {
     // https://github.com/dequelabs/axe-core/tree/b573b1c1/doc/examples/jest_react#timeout-issues
     it('renders without axe violations', async () => {
       const page = await browser.newPage();
-      const htmlReport = reportGenerator.generateReportHtml(sampleResults);
+      const htmlReport = ReportGenerator.generateReportHtml(sampleResults);
       await page.setContent(htmlReport);
 
       // Superset of Lighthouse's aXe config
diff --git a/report/test/renderer/report-ui-features-test.js b/report/test/renderer/report-ui-features-test.js
index cfd9d116b0ea..436a2f4a2d19 100644
--- a/report/test/renderer/report-ui-features-test.js
+++ b/report/test/renderer/report-ui-features-test.js
@@ -9,7 +9,7 @@ import {strict as assert} from 'assert';
 import jsdom from 'jsdom';
 import jestMock from 'jest-mock';
 
-import reportAssets from '../../generator/report-assets.js';
+import {reportAssets} from '../../generator/report-assets.js';
 import {Util} from '../../renderer/util.js';
 import {DOM} from '../../renderer/dom.js';
 import {DetailsRenderer} from '../../renderer/details-renderer.js';
diff --git a/viewer/types/viewer.d.ts b/viewer/types/viewer.d.ts
index 8618b3adfcf1..f2530495ebe6 100644
--- a/viewer/types/viewer.d.ts
+++ b/viewer/types/viewer.d.ts
@@ -4,7 +4,7 @@
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
 
-import _ReportGenerator = require('../../report/generator/report-generator.js');
+import {ReportGenerator as _ReportGenerator} from '../../report/generator/report-generator.js';
 import {Logger as _Logger} from '../../report/renderer/logger.js';
 import {LighthouseReportViewer as _LighthouseReportViewer} from '../app/src/lighthouse-report-viewer.js';
 import 'google.analytics';