diff --git a/.changesets/10152.md b/.changesets/10152.md
new file mode 100644
index 000000000000..eea6adfc65cd
--- /dev/null
+++ b/.changesets/10152.md
@@ -0,0 +1,13 @@
+- fix(esm): get lint working (#10152) by @jtoar
+
+This PR fixes `yarn rw lint` and some generators and setup commands for ESM projects.
+Before projects would get the following error:
+
+```
+Oops! Something went wrong! :(
+
+ESLint: 8.55.0
+
+Error [ERR_REQUIRE_ESM]: require() of ES Module ~/redwood-app/prettier.config.js from ~/redwood-app/node_modules/prettier/third-party.js not supported.
+Instead change the require of prettier.config.js in ~/redwood-app/node_modules/prettier/third-party.js to a dynamic import() which is available in all CommonJS modules.
+```
diff --git a/packages/cli-helpers/src/auth/__tests__/authFiles.test.ts b/packages/cli-helpers/src/auth/__tests__/authFiles.test.ts
index 01a19546d988..6107f663a0c3 100644
--- a/packages/cli-helpers/src/auth/__tests__/authFiles.test.ts
+++ b/packages/cli-helpers/src/auth/__tests__/authFiles.test.ts
@@ -39,9 +39,9 @@ beforeEach(() => {
   vi.mocked(isTypeScriptProject).mockReturnValue(true)
 })
 
-it('generates a record of TS files', () => {
+it('generates a record of TS files', async () => {
   const filePaths = Object.keys(
-    apiSideFiles({
+    await apiSideFiles({
       basedir: path.join(__dirname, 'fixtures/supertokensSetup'),
       webAuthn: false,
     })
@@ -54,11 +54,11 @@ it('generates a record of TS files', () => {
   ])
 })
 
-it('generates a record of JS files', () => {
+it('generates a record of JS files', async () => {
   vi.mocked(isTypeScriptProject).mockReturnValue(false)
 
   const filePaths = Object.keys(
-    apiSideFiles({
+    await apiSideFiles({
       basedir: path.join(__dirname, 'fixtures/supertokensSetup'),
       webAuthn: false,
     })
@@ -71,8 +71,8 @@ it('generates a record of JS files', () => {
   ])
 })
 
-it('generates a record of webAuthn files', () => {
-  const filesRecord = apiSideFiles({
+it('generates a record of webAuthn files', async () => {
+  const filesRecord = await apiSideFiles({
     basedir: path.join(__dirname, 'fixtures/dbAuthSetup'),
     webAuthn: true,
   })
diff --git a/packages/cli-helpers/src/auth/__tests__/authTasks.test.ts b/packages/cli-helpers/src/auth/__tests__/authTasks.test.ts
index 3427788359af..1b4a04d9c404 100644
--- a/packages/cli-helpers/src/auth/__tests__/authTasks.test.ts
+++ b/packages/cli-helpers/src/auth/__tests__/authTasks.test.ts
@@ -644,7 +644,7 @@ describe('authTasks', () => {
     ).toMatchSnapshot()
   })
 
-  it('writes an auth.js file for JS projects', () => {
+  it('writes an auth.js file for JS projects', async () => {
     vi.mocked(isTypeScriptProject).mockReturnValue(false)
 
     vol.fromJSON({
@@ -656,7 +656,7 @@ describe('authTasks', () => {
       provider: 'auth0',
       setupMode: 'FORCE',
     }
-    createWebAuth(getPaths().base, false).task(ctx)
+    await createWebAuth(getPaths().base, false).task(ctx)
 
     expect(
       fs.readFileSync(path.join(getPaths().web.src, 'auth.js'), 'utf-8')
diff --git a/packages/cli-helpers/src/auth/authFiles.ts b/packages/cli-helpers/src/auth/authFiles.ts
index c64f48f8141a..28ce77d1ef53 100644
--- a/packages/cli-helpers/src/auth/authFiles.ts
+++ b/packages/cli-helpers/src/auth/authFiles.ts
@@ -24,76 +24,71 @@ interface FilesArgs {
  * }
  * ```
  */
-export const apiSideFiles = ({ basedir, webAuthn }: FilesArgs) => {
+export const apiSideFiles = async ({ basedir, webAuthn }: FilesArgs) => {
   const apiSrcPath = getPaths().api.src
   const apiBaseTemplatePath = path.join(basedir, 'templates', 'api')
   const templateDirectories = fs.readdirSync(apiBaseTemplatePath)
 
-  const filesRecord = templateDirectories.reduce<Record<string, string>>(
-    (acc, dir) => {
-      const templateFiles = fs.readdirSync(path.join(apiBaseTemplatePath, dir))
-      const filePaths = templateFiles
-        .filter((fileName) => {
-          const fileNameParts = fileName.split('.')
-          // Remove all webAuthn files. We'll handle those in the next step
-          return (
-            fileNameParts.length <= 3 || fileNameParts.at(-3) !== 'webAuthn'
-          )
-        })
-        .map((fileName) => {
-          // remove "template" from the end, and change from {ts,tsx} to {js,jsx} for
-          // JavaScript projects
-          let outputFileName = fileName.replace(/\.template$/, '')
-          if (!isTypeScriptProject()) {
-            outputFileName = outputFileName.replace(/\.ts(x?)$/, '.js$1')
-          }
-
-          if (!webAuthn) {
-            return { templateFileName: fileName, outputFileName }
-          }
-
-          // Insert "webAuthn." before the second to last part
-          const webAuthnFileName = fileName
-            .split('.')
-            .reverse()
-            .map((part, i) => (i === 1 ? 'webAuthn.' + part : part))
-            .reverse()
-            .join('.')
-
-          // Favor the abc.xyz.webAuthn.ts.template file if it exists, otherwise
-          // just go with the "normal" filename
-          if (templateFiles.includes(webAuthnFileName)) {
-            return { templateFileName: webAuthnFileName, outputFileName }
-          } else {
-            return { templateFileName: fileName, outputFileName }
-          }
-        })
-        .map((f) => {
-          const templateFilePath = path.join(
-            apiBaseTemplatePath,
-            dir,
-            f.templateFileName
-          )
-          const outputFilePath = path.join(apiSrcPath, dir, f.outputFileName)
-
-          return { templateFilePath, outputFilePath }
-        })
-
-      filePaths.forEach((paths) => {
-        const content = fs.readFileSync(paths.templateFilePath, 'utf8')
-
-        acc = {
-          ...acc,
-          [paths.outputFilePath]: isTypeScriptProject()
-            ? content
-            : transformTSToJS(paths.outputFilePath, content),
+  let filesRecord: Record<string, string> = {}
+
+  for (const dir of templateDirectories) {
+    const templateFiles = fs.readdirSync(path.join(apiBaseTemplatePath, dir))
+    const filePaths = templateFiles
+      .filter((fileName) => {
+        const fileNameParts = fileName.split('.')
+        // Remove all webAuthn files. We'll handle those in the next step
+        return fileNameParts.length <= 3 || fileNameParts.at(-3) !== 'webAuthn'
+      })
+      .map((fileName) => {
+        // remove "template" from the end, and change from {ts,tsx} to {js,jsx} for
+        // JavaScript projects
+        let outputFileName = fileName.replace(/\.template$/, '')
+        if (!isTypeScriptProject()) {
+          outputFileName = outputFileName.replace(/\.ts(x?)$/, '.js$1')
+        }
+
+        if (!webAuthn) {
+          return { templateFileName: fileName, outputFileName }
+        }
+
+        // Insert "webAuthn." before the second to last part
+        const webAuthnFileName = fileName
+          .split('.')
+          .reverse()
+          .map((part, i) => (i === 1 ? 'webAuthn.' + part : part))
+          .reverse()
+          .join('.')
+
+        // Favor the abc.xyz.webAuthn.ts.template file if it exists, otherwise
+        // just go with the "normal" filename
+        if (templateFiles.includes(webAuthnFileName)) {
+          return { templateFileName: webAuthnFileName, outputFileName }
+        } else {
+          return { templateFileName: fileName, outputFileName }
         }
       })
+      .map((f) => {
+        const templateFilePath = path.join(
+          apiBaseTemplatePath,
+          dir,
+          f.templateFileName
+        )
+        const outputFilePath = path.join(apiSrcPath, dir, f.outputFileName)
+
+        return { templateFilePath, outputFilePath }
+      })
+
+    for (const paths of filePaths) {
+      const content = fs.readFileSync(paths.templateFilePath, 'utf8')
 
-      return acc
-    },
-    {}
-  )
+      filesRecord = {
+        ...filesRecord,
+        [paths.outputFilePath]: isTypeScriptProject()
+          ? content
+          : await transformTSToJS(paths.outputFilePath, content),
+      }
+    }
+  }
 
   return filesRecord
 }
diff --git a/packages/cli-helpers/src/auth/authTasks.ts b/packages/cli-helpers/src/auth/authTasks.ts
index c4d515c7e6d2..8c90351d4a93 100644
--- a/packages/cli-helpers/src/auth/authTasks.ts
+++ b/packages/cli-helpers/src/auth/authTasks.ts
@@ -362,7 +362,7 @@ export const createWebAuth = (basedir: string, webAuthn: boolean) => {
 
   return {
     title: `Creating web/src/auth.${ext}`,
-    task: (ctx: AuthGeneratorCtx) => {
+    task: async (ctx: AuthGeneratorCtx) => {
       // @MARK - finding unused file name here,
       // We should only use an unused filename, if the user is CHOOSING not to replace the existing provider
 
@@ -399,7 +399,7 @@ export const createWebAuth = (basedir: string, webAuthn: boolean) => {
 
       template = isTSProject
         ? template
-        : transformTSToJS(authFileName, template)
+        : await transformTSToJS(authFileName, template)
 
       fs.writeFileSync(authFileName, template)
     },
@@ -448,7 +448,7 @@ export const generateAuthApiFiles = <Renderer extends typeof ListrRenderer>(
 
       // The keys in `filesRecord` are the full paths to where the file contents,
       // which is the values in `filesRecord`, will be written.
-      let filesRecord = apiSideFiles({ basedir, webAuthn })
+      let filesRecord = await apiSideFiles({ basedir, webAuthn })
 
       // Always overwrite files in force mode, no need to prompt
       let existingFiles: ExistingFiles = 'FAIL'
diff --git a/packages/cli-helpers/src/lib/__tests__/index.test.ts b/packages/cli-helpers/src/lib/__tests__/index.test.ts
index e2592f4fac2d..e3974872a26f 100644
--- a/packages/cli-helpers/src/lib/__tests__/index.test.ts
+++ b/packages/cli-helpers/src/lib/__tests__/index.test.ts
@@ -1,3 +1,5 @@
+import path from 'path'
+
 import { vi, test, expect } from 'vitest'
 
 import { prettify } from '../index.js'
@@ -6,13 +8,16 @@ vi.mock('../paths', () => {
   return {
     getPaths: () => {
       return {
-        base: '../../../../__fixtures__/example-todo-main',
+        base: path.resolve(
+          __dirname,
+          '../../../../../__fixtures__/example-todo-main'
+        ),
       }
     },
   }
 })
 
-test('prettify formats tsx content', () => {
+test('prettify formats tsx content', async () => {
   const content = `import React from 'react'
 
   interface Props { foo: number, bar: number }
@@ -30,5 +35,7 @@ test('prettify formats tsx content', () => {
 
     return <>{foo}, {bar}</>}`
 
-  expect(prettify('FooBarComponent.template.tsx', content)).toMatchSnapshot()
+  expect(
+    await prettify('FooBarComponent.template.tsx', content)
+  ).toMatchSnapshot()
 })
diff --git a/packages/cli-helpers/src/lib/index.ts b/packages/cli-helpers/src/lib/index.ts
index 1bc77ed61bea..a9676cd33a1a 100644
--- a/packages/cli-helpers/src/lib/index.ts
+++ b/packages/cli-helpers/src/lib/index.ts
@@ -52,9 +52,11 @@ export const transformTSToJS = (filename: string, content: string) => {
 /**
  * This returns the config present in `prettier.config.js` of a Redwood project.
  */
-export const prettierOptions = () => {
+export const getPrettierOptions = async () => {
   try {
-    const options = require(path.join(getPaths().base, 'prettier.config.js'))
+    const { default: options } = await import(
+      `file://${path.join(getPaths().base, 'prettier.config.js')}`
+    )
 
     if (options.tailwindConfig?.startsWith('.')) {
       // Make this work with --cwd
@@ -70,10 +72,10 @@ export const prettierOptions = () => {
   }
 }
 
-export const prettify = (
+export const prettify = async (
   templateFilename: string,
   renderedTemplate: string
-): string => {
+): Promise<string> => {
   // We format .js and .css templates, we need to tell prettier which parser
   // we're using.
   // https://prettier.io/docs/en/options.html#parser
@@ -88,8 +90,10 @@ export const prettify = (
     return renderedTemplate
   }
 
+  const prettierOptions = await getPrettierOptions()
+
   return format(renderedTemplate, {
-    ...prettierOptions(),
+    ...prettierOptions,
     parser,
   })
 }
diff --git a/packages/cli/src/commands/destroy/component/__tests__/component.test.js b/packages/cli/src/commands/destroy/component/__tests__/component.test.js
index 93ad25f7b2a0..d236a6622c4f 100644
--- a/packages/cli/src/commands/destroy/component/__tests__/component.test.js
+++ b/packages/cli/src/commands/destroy/component/__tests__/component.test.js
@@ -17,8 +17,8 @@ import '../../../../lib/test'
 import { files } from '../../../generate/component/component'
 import { tasks } from '../component'
 
-beforeEach(() => {
-  vol.fromJSON(files({ name: 'About' }))
+beforeEach(async () => {
+  vol.fromJSON(await files({ name: 'About' }))
   vi.spyOn(console, 'info').mockImplementation(() => {})
   vi.spyOn(console, 'log').mockImplementation(() => {})
 })
@@ -35,15 +35,15 @@ test('destroys component files', async () => {
   const t = tasks({ componentName: 'component', filesFn: files, name: 'About' })
   t.options.renderer = 'silent'
 
-  return t.run().then(() => {
-    const generatedFiles = Object.keys(files({ name: 'About' }))
+  return t.run().then(async () => {
+    const generatedFiles = Object.keys(await files({ name: 'About' }))
     expect(generatedFiles.length).toEqual(unlinkSpy.mock.calls.length)
     generatedFiles.forEach((f) => expect(unlinkSpy).toHaveBeenCalledWith(f))
   })
 })
 
 test('destroys component files including stories and tests', async () => {
-  vol.fromJSON(files({ name: 'About', stories: true, tests: true }))
+  vol.fromJSON(await files({ name: 'About', stories: true, tests: true }))
   const unlinkSpy = vi.spyOn(fs, 'unlinkSync')
   const t = tasks({
     componentName: 'component',
@@ -54,9 +54,9 @@ test('destroys component files including stories and tests', async () => {
   })
   t.options.renderer = 'silent'
 
-  return t.run().then(() => {
+  return t.run().then(async () => {
     const generatedFiles = Object.keys(
-      files({ name: 'About', stories: true, tests: true })
+      await files({ name: 'About', stories: true, tests: true })
     )
     expect(generatedFiles.length).toEqual(unlinkSpy.mock.calls.length)
     generatedFiles.forEach((f) => expect(unlinkSpy).toHaveBeenCalledWith(f))
diff --git a/packages/cli/src/commands/destroy/page/__tests__/page.test.js b/packages/cli/src/commands/destroy/page/__tests__/page.test.js
index e219734d4d07..6c32c7d0b0f2 100644
--- a/packages/cli/src/commands/destroy/page/__tests__/page.test.js
+++ b/packages/cli/src/commands/destroy/page/__tests__/page.test.js
@@ -18,9 +18,10 @@ import { getPaths } from '../../../../lib'
 import { files } from '../../../generate/page/page'
 import { tasks } from '../page'
 
-beforeEach(() => {
+beforeEach(async () => {
+  const f = await files({ name: 'About' })
   vol.fromJSON({
-    ...files({ name: 'About' }),
+    ...f,
     [getPaths().web.routes]: [
       '<Routes>',
       '  <Route path="/about" page={AboutPage} name="about" />',
@@ -50,8 +51,9 @@ test('destroys page files', async () => {
 
 test('destroys page files with stories and tests', async () => {
   const fileOptions = { name: 'About', stories: true, tests: true }
+  const f = await files(fileOptions)
   vol.fromJSON({
-    ...files(fileOptions),
+    ...f,
     [getPaths().web.routes]: [
       '<Routes>',
       '  <Route path="/about" page={AboutPage} name="about" />',
diff --git a/packages/cli/src/commands/experimental/setupRscHandler.js b/packages/cli/src/commands/experimental/setupRscHandler.js
index b0ae3a54959c..2dbddc3eb0ce 100644
--- a/packages/cli/src/commands/experimental/setupRscHandler.js
+++ b/packages/cli/src/commands/experimental/setupRscHandler.js
@@ -303,7 +303,7 @@ export const handler = async ({ force, verbose }) => {
 
           writeFile(
             tsconfigPath,
-            prettify('tsconfig.json', JSON.stringify(tsconfig, null, 2)),
+            await prettify('tsconfig.json', JSON.stringify(tsconfig, null, 2)),
             {
               overwriteExisting: true,
             }
diff --git a/packages/cli/src/commands/generate/__tests__/helpers.test.js b/packages/cli/src/commands/generate/__tests__/helpers.test.js
index 5383ea2156fc..f9a86508de90 100644
--- a/packages/cli/src/commands/generate/__tests__/helpers.test.js
+++ b/packages/cli/src/commands/generate/__tests__/helpers.test.js
@@ -79,11 +79,11 @@ test('customOrDefaultTemplatePath returns the app path with proper side, generat
   )
 })
 
-test('templateForComponentFile creates a proper output path for files', () => {
+test('templateForComponentFile creates a proper output path for files', async () => {
   const names = ['FooBar', 'fooBar', 'foo-bar', 'foo_bar']
 
-  names.forEach((name) => {
-    const output = helpers.templateForComponentFile({
+  for (const name of names) {
+    const output = await helpers.templateForComponentFile({
       name: name,
       suffix: 'Page',
       webPathSection: 'pages',
@@ -95,14 +95,14 @@ test('templateForComponentFile creates a proper output path for files', () => {
     expect(output[0]).toEqual(
       path.normalize('/path/to/project/web/src/pages/FooBarPage/FooBarPage.js')
     )
-  })
+  }
 })
 
-test('templateForComponentFile creates a proper output path for files with all caps in component name', () => {
+test('templateForComponentFile creates a proper output path for files with all caps in component name', async () => {
   const names = ['FOO_BAR', 'FOO-BAR', 'FOOBAR']
 
-  names.forEach((name) => {
-    const output = helpers.templateForComponentFile({
+  for (const name of names) {
+    const output = await helpers.templateForComponentFile({
       name: name,
       suffix: 'Page',
       webPathSection: 'pages',
@@ -114,14 +114,14 @@ test('templateForComponentFile creates a proper output path for files with all c
     expect(output[0]).toEqual(
       path.normalize('/path/to/project/web/src/pages/FOOBARPage/FOOBARPage.js')
     )
-  })
+  }
 })
 
-test('templateForComponentFile creates a proper output path for files for starting with uppercase and ending with lowercase', () => {
+test('templateForComponentFile creates a proper output path for files for starting with uppercase and ending with lowercase', async () => {
   const names = ['FOOBar', 'FOO-Bar', 'FOO_Bar']
 
-  names.forEach((name) => {
-    const output = helpers.templateForComponentFile({
+  for (const name of names) {
+    const output = await helpers.templateForComponentFile({
       name: name,
       suffix: 'Page',
       webPathSection: 'pages',
@@ -133,14 +133,14 @@ test('templateForComponentFile creates a proper output path for files for starti
     expect(output[0]).toEqual(
       path.normalize('/path/to/project/web/src/pages/FOOBarPage/FOOBarPage.js')
     )
-  })
+  }
 })
 
-test('templateForComponentFile creates a proper output path for files with uppercase after special characters in component name', () => {
+test('templateForComponentFile creates a proper output path for files with uppercase after special characters in component name', async () => {
   const names = ['ABtest', 'aBtest', 'a-Btest', 'a_Btest']
 
-  names.forEach((name) => {
-    const output = helpers.templateForComponentFile({
+  for (const name of names) {
+    const output = await helpers.templateForComponentFile({
       name: name,
       suffix: 'Page',
       webPathSection: 'pages',
@@ -152,11 +152,11 @@ test('templateForComponentFile creates a proper output path for files with upper
     expect(output[0]).toEqual(
       path.normalize('/path/to/project/web/src/pages/ABtestPage/ABtestPage.js')
     )
-  })
+  }
 })
 
-test('templateForComponentFile can create a path in /web', () => {
-  const output = helpers.templateForComponentFile({
+test('templateForComponentFile can create a path in /web', async () => {
+  const output = await helpers.templateForComponentFile({
     name: 'Home',
     suffix: 'Page',
     webPathSection: 'pages',
@@ -170,8 +170,8 @@ test('templateForComponentFile can create a path in /web', () => {
   )
 })
 
-test('templateForComponentFile can create a path in /api', () => {
-  const output = helpers.templateForComponentFile({
+test('templateForComponentFile can create a path in /api', async () => {
+  const output = await helpers.templateForComponentFile({
     name: 'Home',
     suffix: 'Page',
     apiPathSection: 'services',
@@ -185,8 +185,8 @@ test('templateForComponentFile can create a path in /api', () => {
   )
 })
 
-test('templateForComponentFile can override generated component name', () => {
-  const output = helpers.templateForComponentFile({
+test('templateForComponentFile can override generated component name', async () => {
+  const output = await helpers.templateForComponentFile({
     name: 'Home',
     componentName: 'Hobbiton',
     webPathSection: 'pages',
@@ -200,8 +200,8 @@ test('templateForComponentFile can override generated component name', () => {
   )
 })
 
-test('templateForComponentFile can override file extension', () => {
-  const output = helpers.templateForComponentFile({
+test('templateForComponentFile can override file extension', async () => {
+  const output = await helpers.templateForComponentFile({
     name: 'Home',
     suffix: 'Page',
     extension: '.txt',
@@ -216,8 +216,8 @@ test('templateForComponentFile can override file extension', () => {
   )
 })
 
-test('templateForComponentFile can override output path', () => {
-  const output = helpers.templateForComponentFile({
+test('templateForComponentFile can override output path', async () => {
+  const output = await helpers.templateForComponentFile({
     name: 'func',
     apiPathSection: 'functions',
     generator: 'function',
@@ -231,8 +231,8 @@ test('templateForComponentFile can override output path', () => {
   )
 })
 
-test('templateForComponentFile creates a template', () => {
-  const output = helpers.templateForComponentFile({
+test('templateForComponentFile creates a template', async () => {
+  const output = await helpers.templateForComponentFile({
     name: 'FooBar',
     suffix: 'Page',
     webPathSection: 'pages',
diff --git a/packages/cli/src/commands/generate/cell/cell.js b/packages/cli/src/commands/generate/cell/cell.js
index e54fb95fd737..4adc7f6c1608 100644
--- a/packages/cli/src/commands/generate/cell/cell.js
+++ b/packages/cli/src/commands/generate/cell/cell.js
@@ -78,7 +78,7 @@ export const files = async ({ name, typescript, ...options }) => {
   }
 
   const extension = typescript ? '.tsx' : '.jsx'
-  const cellFile = templateForComponentFile({
+  const cellFile = await templateForComponentFile({
     name: cellName,
     suffix: COMPONENT_SUFFIX,
     extension,
@@ -92,7 +92,7 @@ export const files = async ({ name, typescript, ...options }) => {
     },
   })
 
-  const testFile = templateForComponentFile({
+  const testFile = await templateForComponentFile({
     name: cellName,
     suffix: COMPONENT_SUFFIX,
     extension: `.test${extension}`,
@@ -101,7 +101,7 @@ export const files = async ({ name, typescript, ...options }) => {
     templatePath: 'test.js.template',
   })
 
-  const storiesFile = templateForComponentFile({
+  const storiesFile = await templateForComponentFile({
     name: cellName,
     suffix: COMPONENT_SUFFIX,
     extension: `.stories${extension}`,
@@ -110,7 +110,7 @@ export const files = async ({ name, typescript, ...options }) => {
     templatePath: 'stories.tsx.template',
   })
 
-  const mockFile = templateForComponentFile({
+  const mockFile = await templateForComponentFile({
     name: cellName,
     suffix: COMPONENT_SUFFIX,
     extension: typescript ? '.mock.ts' : '.mock.js',
@@ -142,14 +142,18 @@ export const files = async ({ name, typescript, ...options }) => {
   //    "path/to/fileA": "<<<template>>>",
   //    "path/to/fileB": "<<<template>>>",
   // }
-  return files.reduce((acc, [outputPath, content]) => {
-    const template = typescript ? content : transformTSToJS(outputPath, content)
+  return files.reduce(async (accP, [outputPath, content]) => {
+    const acc = await accP
+
+    const template = typescript
+      ? content
+      : await transformTSToJS(outputPath, content)
 
     return {
       [outputPath]: template,
       ...acc,
     }
-  }, {})
+  }, Promise.resolve({}))
 }
 
 export const { command, description, builder, handler } =
diff --git a/packages/cli/src/commands/generate/component/__tests__/component.test.ts b/packages/cli/src/commands/generate/component/__tests__/component.test.ts
index 7e23a479e5d9..582fef4ed5a3 100644
--- a/packages/cli/src/commands/generate/component/__tests__/component.test.ts
+++ b/packages/cli/src/commands/generate/component/__tests__/component.test.ts
@@ -16,36 +16,36 @@ let singleWordDefaultFiles,
   withoutTestFiles,
   withoutStoryFiles
 
-beforeAll(() => {
-  singleWordDefaultFiles = component.files({
+beforeAll(async () => {
+  singleWordDefaultFiles = await component.files({
     name: 'User',
     tests: true,
     stories: true,
   })
-  multiWordDefaultFiles = component.files({
+  multiWordDefaultFiles = await component.files({
     name: 'UserProfile',
     tests: true,
     stories: true,
   })
-  javascriptFiles = component.files({
+  javascriptFiles = await component.files({
     name: 'JavascriptUser',
     typescript: false,
     stories: true,
     tests: true,
   })
-  typescriptFiles = component.files({
+  typescriptFiles = await component.files({
     name: 'TypescriptUser',
     typescript: true,
     stories: true,
     tests: true,
   })
-  withoutTestFiles = component.files({
+  withoutTestFiles = await component.files({
     name: 'withoutTests',
     javascript: true,
     stories: true,
     tests: false,
   })
-  withoutStoryFiles = component.files({
+  withoutStoryFiles = await component.files({
     name: 'withoutStories',
     javascript: true,
     tests: true,
diff --git a/packages/cli/src/commands/generate/component/component.js b/packages/cli/src/commands/generate/component/component.js
index 66a912a8d877..0a62f8d23440 100644
--- a/packages/cli/src/commands/generate/component/component.js
+++ b/packages/cli/src/commands/generate/component/component.js
@@ -6,23 +6,23 @@ import {
 
 const REDWOOD_WEB_PATH_NAME = 'components'
 
-export const files = ({ name, typescript = false, ...options }) => {
+export const files = async ({ name, typescript = false, ...options }) => {
   const extension = typescript ? '.tsx' : '.jsx'
-  const componentFile = templateForComponentFile({
+  const componentFile = await templateForComponentFile({
     name,
     webPathSection: REDWOOD_WEB_PATH_NAME,
     extension,
     generator: 'component',
     templatePath: 'component.tsx.template',
   })
-  const testFile = templateForComponentFile({
+  const testFile = await templateForComponentFile({
     name,
     extension: `.test${extension}`,
     webPathSection: REDWOOD_WEB_PATH_NAME,
     generator: 'component',
     templatePath: 'test.tsx.template',
   })
-  const storiesFile = templateForComponentFile({
+  const storiesFile = await templateForComponentFile({
     name,
     extension: `.stories${extension}`,
     webPathSection: REDWOOD_WEB_PATH_NAME,
@@ -46,14 +46,18 @@ export const files = ({ name, typescript = false, ...options }) => {
   //    "path/to/fileA": "<<<template>>>",
   //    "path/to/fileB": "<<<template>>>",
   // }
-  return files.reduce((acc, [outputPath, content]) => {
-    const template = typescript ? content : transformTSToJS(outputPath, content)
+  return files.reduce(async (accP, [outputPath, content]) => {
+    const acc = await accP
+
+    const template = typescript
+      ? content
+      : await transformTSToJS(outputPath, content)
 
     return {
       [outputPath]: template,
       ...acc,
     }
-  }, {})
+  }, Promise.resolve({}))
 }
 
 export const description = 'Generate a component'
diff --git a/packages/cli/src/commands/generate/dataMigration/__tests__/dataMigration.test.js b/packages/cli/src/commands/generate/dataMigration/__tests__/dataMigration.test.js
index e2326a1e292f..f01f9fb08fb8 100644
--- a/packages/cli/src/commands/generate/dataMigration/__tests__/dataMigration.test.js
+++ b/packages/cli/src/commands/generate/dataMigration/__tests__/dataMigration.test.js
@@ -6,12 +6,6 @@ import { afterEach, test, expect } from 'vitest'
 
 import * as generator from '../dataMigration'
 
-const asyncForEach = async (array, callback) => {
-  for (let index = 0; index < array.length; index++) {
-    await callback(array[index], index, array)
-  }
-}
-
 const RealDate = Date
 
 afterEach(() => {
@@ -42,17 +36,14 @@ test('generates a file with a timestame in its name', async () => {
 })
 
 test('generates a file with a paramcase version of the passed name', async () => {
-  asyncForEach(
-    ['MoveUser', 'moveUser', 'move-user', 'move_user'],
-    async (name) => {
-      const files = await generator.files({ name })
-      const filename = path.parse(path.basename(Object.keys(files)[0])).name
-      const parts = filename.split('-')
-      parts.shift()
+  for (const name of ['MoveUser', 'moveUser', 'move-user', 'move_user']) {
+    const files = await generator.files({ name })
+    const filename = path.parse(path.basename(Object.keys(files)[0])).name
+    const parts = filename.split('-')
+    parts.shift()
 
-      expect(parts.join('-')).toEqual('move-user')
-    }
-  )
+    expect(parts.join('-')).toEqual('move-user')
+  }
 })
 
 test('creates a JS file with expected contents', async () => {
diff --git a/packages/cli/src/commands/generate/dbAuth/__tests__/dbAuth.test.js b/packages/cli/src/commands/generate/dbAuth/__tests__/dbAuth.test.js
index 0050ee66add4..a1e3e621b144 100644
--- a/packages/cli/src/commands/generate/dbAuth/__tests__/dbAuth.test.js
+++ b/packages/cli/src/commands/generate/dbAuth/__tests__/dbAuth.test.js
@@ -67,22 +67,22 @@ describe('dbAuth', () => {
     vol.fromJSON(mockFiles)
   })
 
-  it('creates a login page', () => {
-    expect(dbAuth.files(true, false)).toHaveProperty([
+  it('creates a login page', async () => {
+    expect(await dbAuth.files(true, false)).toHaveProperty([
       path.normalize('/path/to/project/web/src/pages/LoginPage/LoginPage.jsx'),
     ])
   })
 
-  it('creates a signup page', () => {
-    expect(dbAuth.files(true, false)).toHaveProperty([
+  it('creates a signup page', async () => {
+    expect(await dbAuth.files(true, false)).toHaveProperty([
       path.normalize(
         '/path/to/project/web/src/pages/SignupPage/SignupPage.jsx'
       ),
     ])
   })
 
-  it('creates a scaffold CSS file', () => {
-    expect(dbAuth.files(true, false)).toHaveProperty([
+  it('creates a scaffold CSS file', async () => {
+    expect(await dbAuth.files(true, false)).toHaveProperty([
       path.normalize('/path/to/project/web/src/scaffold.css'),
     ])
   })
diff --git a/packages/cli/src/commands/generate/dbAuth/dbAuth.js b/packages/cli/src/commands/generate/dbAuth/dbAuth.js
index 00924554e756..94581d256932 100644
--- a/packages/cli/src/commands/generate/dbAuth/dbAuth.js
+++ b/packages/cli/src/commands/generate/dbAuth/dbAuth.js
@@ -123,7 +123,7 @@ export const builder = (yargs) => {
   })
 }
 
-export const files = ({
+export const files = async ({
   _tests,
   typescript,
   skipForgot,
@@ -150,7 +150,7 @@ export const files = ({
 
   if (!skipForgot) {
     files.push(
-      templateForComponentFile({
+      await templateForComponentFile({
         name: 'ForgotPassword',
         suffix: 'Page',
         extension: typescript ? '.tsx' : '.jsx',
@@ -164,7 +164,7 @@ export const files = ({
 
   if (!skipLogin) {
     files.push(
-      templateForComponentFile({
+      await templateForComponentFile({
         name: 'Login',
         suffix: 'Page',
         extension: typescript ? '.tsx' : '.jsx',
@@ -180,7 +180,7 @@ export const files = ({
 
   if (!skipReset) {
     files.push(
-      templateForComponentFile({
+      await templateForComponentFile({
         name: 'ResetPassword',
         suffix: 'Page',
         extension: typescript ? '.tsx' : '.jsx',
@@ -194,7 +194,7 @@ export const files = ({
 
   if (!skipSignup) {
     files.push(
-      templateForComponentFile({
+      await templateForComponentFile({
         name: 'Signup',
         suffix: 'Page',
         extension: typescript ? '.tsx' : '.jsx',
@@ -214,7 +214,7 @@ export const files = ({
   // add scaffold CSS file if it doesn't exist already
   const scaffoldOutputPath = path.join(getPaths().web.src, 'scaffold.css')
   if (!fs.existsSync(scaffoldOutputPath)) {
-    const scaffoldTemplate = generateTemplate(
+    const scaffoldTemplate = await generateTemplate(
       path.join(
         __dirname,
         '../scaffold/templates/assets/scaffold.css.template'
@@ -225,18 +225,20 @@ export const files = ({
     files.push([scaffoldOutputPath, scaffoldTemplate])
   }
 
-  return files.reduce((acc, [outputPath, content]) => {
+  return files.reduce(async (accP, [outputPath, content]) => {
+    const acc = await accP
+
     let template = content
 
     if (outputPath.match(/\.[jt]sx?/) && !typescript) {
-      template = transformTSToJS(outputPath, content)
+      template = await transformTSToJS(outputPath, content)
     }
 
     return {
       [outputPath]: template,
       ...acc,
     }
-  }, {})
+  }, Promise.resolve({}))
 }
 
 const tasks = ({
@@ -327,22 +329,21 @@ const tasks = ({
       {
         title: 'Creating pages...',
         task: async () => {
-          return writeFilesTask(
-            files({
-              tests,
-              typescript,
-              skipForgot,
-              skipLogin,
-              skipReset,
-              skipSignup,
-              webauthn,
-              usernameLabel,
-              passwordLabel,
-            }),
-            {
-              overwriteExisting: force,
-            }
-          )
+          const filesObj = await files({
+            tests,
+            typescript,
+            skipForgot,
+            skipLogin,
+            skipReset,
+            skipSignup,
+            webauthn,
+            usernameLabel,
+            passwordLabel,
+          })
+
+          return writeFilesTask(filesObj, {
+            overwriteExisting: force,
+          })
         },
       },
       {
diff --git a/packages/cli/src/commands/generate/directive/__tests__/directive.test.ts b/packages/cli/src/commands/generate/directive/__tests__/directive.test.ts
index dabf7a243b12..4d835ca36732 100644
--- a/packages/cli/src/commands/generate/directive/__tests__/directive.test.ts
+++ b/packages/cli/src/commands/generate/directive/__tests__/directive.test.ts
@@ -9,8 +9,8 @@ import yargs from 'yargs/yargs'
 
 import * as directive from '../directive'
 
-test('creates a JavaScript validator directive', () => {
-  const output = directive.files({
+test('creates a JavaScript validator directive', async () => {
+  const output = await directive.files({
     name: 'require-admin', // checking camel casing too!
     typescript: false,
     tests: true,
@@ -30,8 +30,8 @@ test('creates a JavaScript validator directive', () => {
   expect(output[expectedTestOutputPath]).toMatchSnapshot('js directive test')
 })
 
-test('creates a TypeScript transformer directive', () => {
-  const output = directive.files({
+test('creates a TypeScript transformer directive', async () => {
+  const output = await directive.files({
     name: 'bazinga-foo_bar', // checking camel casing too!
     typescript: true,
     tests: true,
diff --git a/packages/cli/src/commands/generate/directive/directive.js b/packages/cli/src/commands/generate/directive/directive.js
index 97d1d9ce5827..9fd98d5a84d3 100644
--- a/packages/cli/src/commands/generate/directive/directive.js
+++ b/packages/cli/src/commands/generate/directive/directive.js
@@ -21,7 +21,7 @@ import {
   validateName,
 } from '../helpers'
 
-export const files = ({ name, typescript = false, type, tests }) => {
+export const files = async ({ name, typescript = false, type, tests }) => {
   if (tests === undefined) {
     tests = getConfig().generate.tests
   }
@@ -34,7 +34,7 @@ export const files = ({ name, typescript = false, type, tests }) => {
 
   const outputFilename = `${camelName}.${typescript ? 'ts' : 'js'}`
 
-  const directiveFile = templateForComponentFile({
+  const directiveFile = await templateForComponentFile({
     name,
     extension: typescript ? '.ts' : '.js',
     generator: 'directive',
@@ -50,7 +50,7 @@ export const files = ({ name, typescript = false, type, tests }) => {
       typescript ? 'ts' : 'js'
     }`
 
-    const testFile = templateForComponentFile({
+    const testFile = await templateForComponentFile({
       name,
       extension: typescript ? '.test.ts' : '.test.js',
       generator: 'directive',
@@ -70,14 +70,18 @@ export const files = ({ name, typescript = false, type, tests }) => {
   //    "path/to/fileA": "<<<template>>>",
   //    "path/to/fileB": "<<<template>>>",
   // }
-  return files.reduce((acc, [outputPath, content]) => {
-    const template = typescript ? content : transformTSToJS(outputPath, content)
+  return files.reduce(async (accP, [outputPath, content]) => {
+    const acc = await accP
+
+    const template = typescript
+      ? content
+      : await transformTSToJS(outputPath, content)
 
     return {
       [outputPath]: template,
       ...acc,
     }
-  }, {})
+  }, Promise.resolve({}))
 }
 
 const positionalsObj = {
diff --git a/packages/cli/src/commands/generate/function/__tests__/function.test.ts b/packages/cli/src/commands/generate/function/__tests__/function.test.ts
index 03ac2ddcd248..442b8aa5f1a9 100644
--- a/packages/cli/src/commands/generate/function/__tests__/function.test.ts
+++ b/packages/cli/src/commands/generate/function/__tests__/function.test.ts
@@ -12,8 +12,8 @@ import * as functionGenerator from '../function'
 // Should be refactored as it's repeated
 type WordFilesType = { [key: string]: string }
 
-describe('Single word default files', () => {
-  const singleWordDefaultFiles: WordFilesType = functionGenerator.files({
+describe('Single word default files', async () => {
+  const singleWordDefaultFiles: WordFilesType = await functionGenerator.files({
     name: 'foo',
     tests: true,
   })
@@ -63,8 +63,8 @@ test('Keeps Function in name', () => {
   expect(name).toEqual('BazingaFunction')
 })
 
-test('creates a multi word function file', () => {
-  const multiWordDefaultFiles = functionGenerator.files({
+test('creates a multi word function file', async () => {
+  const multiWordDefaultFiles = await functionGenerator.files({
     name: 'send-mail',
   })
 
@@ -75,8 +75,8 @@ test('creates a multi word function file', () => {
   ).toMatchSnapshot()
 })
 
-test('creates a .js file if --javascript=true', () => {
-  const javascriptFiles = functionGenerator.files({
+test('creates a .js file if --javascript=true', async () => {
+  const javascriptFiles = await functionGenerator.files({
     name: 'javascript-function',
   })
 
@@ -91,8 +91,8 @@ test('creates a .js file if --javascript=true', () => {
   // https://babeljs.io/docs/en/babel-plugin-transform-typescript
 })
 
-test('creates a .ts file if --typescript=true', () => {
-  const typescriptFiles = functionGenerator.files({
+test('creates a .ts file if --typescript=true', async () => {
+  const typescriptFiles = await functionGenerator.files({
     name: 'typescript-function',
     typescript: true,
   })
diff --git a/packages/cli/src/commands/generate/function/function.js b/packages/cli/src/commands/generate/function/function.js
index 24559c7121d5..eba8a117b596 100644
--- a/packages/cli/src/commands/generate/function/function.js
+++ b/packages/cli/src/commands/generate/function/function.js
@@ -13,7 +13,7 @@ import { prepareForRollback } from '../../../lib/rollback'
 import { yargsDefaults } from '../helpers'
 import { validateName, templateForComponentFile } from '../helpers'
 
-export const files = ({
+export const files = async ({
   name,
   typescript: generateTypescript = false,
   tests: generateTests = true,
@@ -25,7 +25,7 @@ export const files = ({
 
   const outputFiles = []
 
-  const functionFiles = templateForComponentFile({
+  const functionFiles = await templateForComponentFile({
     name: functionName,
     componentName: functionName,
     extension,
@@ -43,7 +43,7 @@ export const files = ({
   outputFiles.push(functionFiles)
 
   if (generateTests) {
-    const testFile = templateForComponentFile({
+    const testFile = await templateForComponentFile({
       name: functionName,
       componentName: functionName,
       extension,
@@ -58,7 +58,7 @@ export const files = ({
       ),
     })
 
-    const scenarioFile = templateForComponentFile({
+    const scenarioFile = await templateForComponentFile({
       name: functionName,
       componentName: functionName,
       extension,
@@ -77,16 +77,18 @@ export const files = ({
     outputFiles.push(scenarioFile)
   }
 
-  return outputFiles.reduce((acc, [outputPath, content]) => {
+  return outputFiles.reduce(async (accP, [outputPath, content]) => {
+    const acc = await accP
+
     const template = generateTypescript
       ? content
-      : transformTSToJS(outputPath, content)
+      : await transformTSToJS(outputPath, content)
 
     return {
       [outputPath]: template,
       ...acc,
     }
-  }, {})
+  }, Promise.resolve({}))
 }
 
 export const command = 'function <name>'
@@ -136,7 +138,7 @@ export const handler = async ({ name, force, ...rest }) => {
       {
         title: 'Generating function files...',
         task: async () => {
-          return writeFilesTask(files({ name, ...rest }), {
+          return writeFilesTask(await files({ name, ...rest }), {
             overwriteExisting: force,
           })
         },
diff --git a/packages/cli/src/commands/generate/helpers.js b/packages/cli/src/commands/generate/helpers.js
index c17bb6eb2985..0b8ad76e3518 100644
--- a/packages/cli/src/commands/generate/helpers.js
+++ b/packages/cli/src/commands/generate/helpers.js
@@ -48,7 +48,7 @@ export const customOrDefaultTemplatePath = ({
  */
 // TODO: Make this read all the files in a template directory instead of
 // manually passing in each file.
-export const templateForComponentFile = ({
+export const templateForComponentFile = async ({
   name,
   suffix = '',
   extension = '.js',
@@ -72,7 +72,7 @@ export const templateForComponentFile = ({
     templatePath,
     side: webPathSection ? 'web' : 'api',
   })
-  const content = generateTemplate(fullTemplatePath, {
+  const content = await generateTemplate(fullTemplatePath, {
     name,
     outputPath: ensurePosixPath(
       `./${path.relative(getPaths().base, componentOutputPath)}`
diff --git a/packages/cli/src/commands/generate/layout/__tests__/layout.test.ts b/packages/cli/src/commands/generate/layout/__tests__/layout.test.ts
index 24cbbc4232c0..a7d81477a233 100644
--- a/packages/cli/src/commands/generate/layout/__tests__/layout.test.ts
+++ b/packages/cli/src/commands/generate/layout/__tests__/layout.test.ts
@@ -8,8 +8,8 @@ import '../../../../lib/test'
 
 import * as layout from '../layout'
 
-describe('Single Word default files', () => {
-  const singleWordDefaultFiles = layout.files({
+describe('Single Word default files', async () => {
+  const singleWordDefaultFiles = await layout.files({
     name: 'App',
     tests: true,
     stories: true,
@@ -50,8 +50,8 @@ describe('Single Word default files', () => {
   })
 })
 
-describe('Multi word default files', () => {
-  const multiWordDefaultFiles = layout.files({
+describe('Multi word default files', async () => {
+  const multiWordDefaultFiles = await layout.files({
     name: 'SinglePage',
     tests: true,
     stories: true,
@@ -88,8 +88,8 @@ describe('Multi word default files', () => {
   })
 })
 
-describe('JS Files', () => {
-  const javascriptFiles = layout.files({
+describe('JS Files', async () => {
+  const javascriptFiles = await layout.files({
     name: 'JavascriptPage',
     javascript: true,
     tests: true,
@@ -114,8 +114,8 @@ describe('JS Files', () => {
   })
 })
 
-test('trims Layout from end of name', () => {
-  const files = layout.files({
+test('trims Layout from end of name', async () => {
+  const files = await layout.files({
     name: 'BazingaLayout',
     tests: true,
     stories: true,
@@ -134,8 +134,8 @@ test('trims Layout from end of name', () => {
   ).toBeTruthy()
 })
 
-test('Does not trim Layout from beginning of name', () => {
-  const files = layout.files({
+test('Does not trim Layout from beginning of name', async () => {
+  const files = await layout.files({
     name: 'LayoutForBazinga',
     tests: true,
     stories: true,
@@ -154,8 +154,8 @@ test('Does not trim Layout from beginning of name', () => {
   ).toBeTruthy()
 })
 
-test('Does not trim Layout from middle of name', () => {
-  const files = layout.files({
+test('Does not trim Layout from middle of name', async () => {
+  const files = await layout.files({
     name: 'MyLayoutForBazinga',
     tests: true,
     stories: true,
@@ -174,8 +174,8 @@ test('Does not trim Layout from middle of name', () => {
   ).toBeTruthy()
 })
 
-test('Only trims Layout once', () => {
-  const files = layout.files({
+test('Only trims Layout once', async () => {
+  const files = await layout.files({
     name: 'BazingaLayoutLayout',
     tests: true,
     stories: true,
@@ -194,8 +194,8 @@ test('Only trims Layout once', () => {
   ).toBeTruthy()
 })
 
-describe('TS files', () => {
-  const typescriptFiles = layout.files({
+describe('TS files', async () => {
+  const typescriptFiles = await layout.files({
     name: 'TypescriptPage',
     typescript: true,
     tests: true,
@@ -220,8 +220,8 @@ describe('TS files', () => {
   })
 })
 
-test("doesn't include storybook file when --stories is set to false", () => {
-  const withoutStoryFiles = layout.files({
+test("doesn't include storybook file when --stories is set to false", async () => {
+  const withoutStoryFiles = await layout.files({
     name: 'withoutStories',
     javascript: true,
     tests: true,
@@ -238,8 +238,8 @@ test("doesn't include storybook file when --stories is set to false", () => {
   ])
 })
 
-test("doesn't include test file when --tests is set to false", () => {
-  const withoutTestFiles = layout.files({
+test("doesn't include test file when --tests is set to false", async () => {
+  const withoutTestFiles = await layout.files({
     name: 'withoutTests',
     tests: false,
     stories: true,
@@ -255,8 +255,8 @@ test("doesn't include test file when --tests is set to false", () => {
   ])
 })
 
-test('JavaScript: includes skip link when --skipLink is set to true', () => {
-  const withSkipLinkFilesJS = layout.files({
+test('JavaScript: includes skip link when --skipLink is set to true', async () => {
+  const withSkipLinkFilesJS = await layout.files({
     name: 'A11y',
     skipLink: true,
   })
@@ -270,8 +270,8 @@ test('JavaScript: includes skip link when --skipLink is set to true', () => {
   ).toMatchSnapshot()
 })
 
-test('TypeScript: includes skip link when --skipLink is set to true', () => {
-  const withSkipLinkFilesTS = layout.files({
+test('TypeScript: includes skip link when --skipLink is set to true', async () => {
+  const withSkipLinkFilesTS = await layout.files({
     name: 'A11y',
     skipLink: true,
     typescript: true,
diff --git a/packages/cli/src/commands/generate/layout/layout.js b/packages/cli/src/commands/generate/layout/layout.js
index 2c0b7126a397..73afaebbe491 100644
--- a/packages/cli/src/commands/generate/layout/layout.js
+++ b/packages/cli/src/commands/generate/layout/layout.js
@@ -9,10 +9,10 @@ import {
 const COMPONENT_SUFFIX = 'Layout'
 const REDWOOD_WEB_PATH_NAME = 'layouts'
 
-export const files = ({ name, typescript = false, ...options }) => {
+export const files = async ({ name, typescript = false, ...options }) => {
   const layoutName = removeGeneratorName(name, 'layout')
   const extension = typescript ? '.tsx' : '.jsx'
-  const layoutFile = templateForComponentFile({
+  const layoutFile = await templateForComponentFile({
     name: layoutName,
     suffix: COMPONENT_SUFFIX,
     webPathSection: REDWOOD_WEB_PATH_NAME,
@@ -22,7 +22,7 @@ export const files = ({ name, typescript = false, ...options }) => {
       ? 'layout.tsx.a11yTemplate'
       : 'layout.tsx.template',
   })
-  const testFile = templateForComponentFile({
+  const testFile = await templateForComponentFile({
     name: layoutName,
     suffix: COMPONENT_SUFFIX,
     extension: `.test${extension}`,
@@ -30,7 +30,7 @@ export const files = ({ name, typescript = false, ...options }) => {
     generator: 'layout',
     templatePath: 'test.tsx.template',
   })
-  const storyFile = templateForComponentFile({
+  const storyFile = await templateForComponentFile({
     name: layoutName,
     suffix: COMPONENT_SUFFIX,
     extension: `.stories${extension}`,
@@ -53,14 +53,18 @@ export const files = ({ name, typescript = false, ...options }) => {
   //    "path/to/fileA": "<<<template>>>",
   //    "path/to/fileB": "<<<template>>>",
   // }
-  return files.reduce((acc, [outputPath, content]) => {
-    const template = typescript ? content : transformTSToJS(outputPath, content)
+  return files.reduce(async (accP, [outputPath, content]) => {
+    const acc = await accP
+
+    const template = typescript
+      ? content
+      : await transformTSToJS(outputPath, content)
 
     return {
       [outputPath]: template,
       ...acc,
     }
-  }, {})
+  }, Promise.resolve({}))
 }
 
 const optionsObj = {
diff --git a/packages/cli/src/commands/generate/page/__tests__/page.test.js b/packages/cli/src/commands/generate/page/__tests__/page.test.js
index cc2d62eda128..4d0c5341d8a0 100644
--- a/packages/cli/src/commands/generate/page/__tests__/page.test.js
+++ b/packages/cli/src/commands/generate/page/__tests__/page.test.js
@@ -52,8 +52,8 @@ import { getPaths } from '../../../../lib'
 import { pathName } from '../../helpers'
 import * as page from '../page'
 
-describe('Single world files', () => {
-  const singleWordFiles = page.files({
+describe('Single world files', async () => {
+  const singleWordFiles = await page.files({
     name: 'Home',
     tests: true,
     stories: true,
@@ -93,8 +93,8 @@ describe('Single world files', () => {
   })
 })
 
-describe('multiWorldFiles', () => {
-  const multiWordFiles = page.files({
+describe('multiWorldFiles', async () => {
+  const multiWordFiles = await page.files({
     name: 'ContactUs',
     tests: true,
     stories: true,
@@ -132,8 +132,8 @@ describe('multiWorldFiles', () => {
   })
 })
 
-describe('Plural word files', () => {
-  const pluralWordFiles = page.files({
+describe('Plural word files', async () => {
+  const pluralWordFiles = await page.files({
     name: 'Cats',
     tests: true,
     stories: true,
@@ -149,8 +149,8 @@ describe('Plural word files', () => {
   })
 })
 
-describe('paramFiles', () => {
-  const paramFiles = page.files({
+describe('paramFiles', async () => {
+  const paramFiles = await page.files({
     name: 'Post',
     tests: true,
     stories: true,
@@ -176,8 +176,8 @@ describe('paramFiles', () => {
   })
 })
 
-describe('No test files', () => {
-  const noTestsFiles = page.files({
+describe('No test files', async () => {
+  const noTestsFiles = await page.files({
     name: 'NoTests',
     tests: false,
     stories: true,
@@ -196,8 +196,8 @@ describe('No test files', () => {
   })
 })
 
-describe('No stories files', () => {
-  const noStoriesFiles = page.files({
+describe('No stories files', async () => {
+  const noStoriesFiles = await page.files({
     name: 'NoStories',
     tests: true,
     stories: false,
@@ -440,8 +440,8 @@ describe('handler', () => {
   })
 })
 
-describe('TS Files', () => {
-  const typescriptFiles = page.files({
+describe('TS Files', async () => {
+  const typescriptFiles = await page.files({
     name: 'TSFiles',
     typescript: true,
     tests: true,
@@ -475,8 +475,8 @@ describe('TS Files', () => {
     ).toMatchSnapshot()
   })
 
-  test('TS Params', () => {
-    const typescriptParamFiles = page.files({
+  test('TS Params', async () => {
+    const typescriptParamFiles = await page.files({
       name: 'TSParamFiles',
       typescript: true,
       tests: true,
@@ -493,8 +493,8 @@ describe('TS Files', () => {
     ).toMatchSnapshot()
   })
 
-  test('TS Params with type', () => {
-    const typescriptParamTypeFiles = page.files({
+  test('TS Params with type', async () => {
+    const typescriptParamTypeFiles = await page.files({
       name: 'TSParamTypeFiles',
       typescript: true,
       tests: false,
diff --git a/packages/cli/src/commands/generate/page/page.js b/packages/cli/src/commands/generate/page/page.js
index b20425d7e5b6..15a9abfac52d 100644
--- a/packages/cli/src/commands/generate/page/page.js
+++ b/packages/cli/src/commands/generate/page/page.js
@@ -85,9 +85,9 @@ export const paramVariants = (path) => {
   }
 }
 
-export const files = ({ name, tests, stories, typescript, ...rest }) => {
+export const files = async ({ name, tests, stories, typescript, ...rest }) => {
   const extension = typescript ? '.tsx' : '.jsx'
-  const pageFile = templateForComponentFile({
+  const pageFile = await templateForComponentFile({
     name,
     suffix: COMPONENT_SUFFIX,
     extension,
@@ -97,7 +97,7 @@ export const files = ({ name, tests, stories, typescript, ...rest }) => {
     templateVars: rest,
   })
 
-  const testFile = templateForComponentFile({
+  const testFile = await templateForComponentFile({
     name,
     suffix: COMPONENT_SUFFIX,
     extension: `.test${extension}`,
@@ -107,7 +107,7 @@ export const files = ({ name, tests, stories, typescript, ...rest }) => {
     templateVars: rest,
   })
 
-  const storiesFile = templateForComponentFile({
+  const storiesFile = await templateForComponentFile({
     name,
     suffix: COMPONENT_SUFFIX,
     extension: `.stories${extension}`,
@@ -135,14 +135,18 @@ export const files = ({ name, tests, stories, typescript, ...rest }) => {
   //    "path/to/fileA": "<<<template>>>",
   //    "path/to/fileB": "<<<template>>>",
   // }
-  return files.reduce((acc, [outputPath, content]) => {
-    const template = typescript ? content : transformTSToJS(outputPath, content)
+  return files.reduce(async (accP, [outputPath, content]) => {
+    const acc = await accP
+
+    const template = typescript
+      ? content
+      : await transformTSToJS(outputPath, content)
 
     return {
       [outputPath]: template,
       ...acc,
     }
-  }, {})
+  }, Promise.resolve({}))
 }
 
 export const routes = ({ name, path }) => {
diff --git a/packages/cli/src/commands/generate/scaffold/__tests__/scaffoldCustomIdName.test.js b/packages/cli/src/commands/generate/scaffold/__tests__/scaffoldCustomIdName.test.js
index 610fa82267dd..419d722080eb 100644
--- a/packages/cli/src/commands/generate/scaffold/__tests__/scaffoldCustomIdName.test.js
+++ b/packages/cli/src/commands/generate/scaffold/__tests__/scaffoldCustomIdName.test.js
@@ -42,55 +42,55 @@ describe('support custom @id name', () => {
     ])
   })
 
-  test('creates a cell with the custom id name', () => {
+  test('creates a cell with the custom id name', async () => {
     const customIdFieldCellPath =
       '/path/to/project/web/src/components/CustomIdField/CustomIdFieldCell/CustomIdFieldCell.tsx'
 
-    const cell = files[path.normalize(customIdFieldCellPath)]
+    const cell = await files[path.normalize(customIdFieldCellPath)]
     expect(cell).toContain('FindCustomIdFieldByUuid($uuid: String!)')
     expect(cell).toContain('customIdField: customIdField(uuid: $uuid)')
   })
 
-  test('creates an edit cell with the custom id name', () => {
+  test('creates an edit cell with the custom id name', async () => {
     const customIdFieldEditCellPath =
       '/path/to/project/web/src/components/CustomIdField/EditCustomIdFieldCell/EditCustomIdFieldCell.tsx'
 
-    const cell = files[path.normalize(customIdFieldEditCellPath)]
+    const cell = await files[path.normalize(customIdFieldEditCellPath)]
     expect(cell).toContain('query EditCustomIdFieldByUuid($uuid: String!)')
   })
 
-  test('creates a component with the custom id name', () => {
+  test('creates a component with the custom id name', async () => {
     const customIdFieldComponentPath =
       '/path/to/project/web/src/components/CustomIdField/CustomIdField/CustomIdField.tsx'
 
-    const cell = files[path.normalize(customIdFieldComponentPath)]
+    const cell = await files[path.normalize(customIdFieldComponentPath)]
     expect(cell).toContain('DeleteCustomIdFieldMutation($uuid: String!)')
     expect(cell).toContain('deleteCustomIdField(uuid: $uuid)')
     expect(cell).toContain('deleteCustomIdField({ variables: { uuid } })')
   })
 
-  test('creates a form with the custom id name', () => {
+  test('creates a form with the custom id name', async () => {
     const customIdFieldFormPath =
       '/path/to/project/web/src/components/CustomIdField/CustomIdFieldForm/CustomIdFieldForm.tsx'
 
-    const cell = files[path.normalize(customIdFieldFormPath)]
+    const cell = await files[path.normalize(customIdFieldFormPath)]
     expect(cell).toContain('props.onSave(data, props?.customIdField?.uuid)')
   })
 
-  test('creates a sdl with the custom id name', () => {
+  test('creates a sdl with the custom id name', async () => {
     const customIdFieldSdlPath =
       '/path/to/project/api/src/graphql/customIdFields.sdl.ts'
 
-    const sdl = files[path.normalize(customIdFieldSdlPath)]
+    const sdl = await files[path.normalize(customIdFieldSdlPath)]
     const match = sdl.match(/uuid: String!/g)
     expect(match).toHaveLength(4)
   })
 
-  test('creates a service with the custom id name', () => {
+  test('creates a service with the custom id name', async () => {
     const customIdFieldServicePath =
       '/path/to/project/api/src/graphql/customIdFields.sdl.ts'
 
-    const sdl = files[path.normalize(customIdFieldServicePath)]
+    const sdl = await files[path.normalize(customIdFieldServicePath)]
     const match = sdl.match(/uuid: String!/g)
     expect(match).toHaveLength(4)
   })
diff --git a/packages/cli/src/commands/generate/scaffold/scaffold.js b/packages/cli/src/commands/generate/scaffold/scaffold.js
index fa2335f34fa5..f9a8d85bae51 100644
--- a/packages/cli/src/commands/generate/scaffold/scaffold.js
+++ b/packages/cli/src/commands/generate/scaffold/scaffold.js
@@ -17,7 +17,6 @@ import {
   generateTemplate,
   readFile,
   writeFile,
-  asyncForEach,
   getDefaultArgs,
   getPaths,
   writeFilesTask,
@@ -185,9 +184,9 @@ export const files = async ({
       tests,
       typescript,
     })),
-    ...assetFiles(name, tailwind),
+    ...(await assetFiles(name, tailwind)),
     ...(await formatters(name, typescript)),
-    ...layoutFiles(name, force, typescript, templateStrings),
+    ...(await layoutFiles(name, force, typescript, templateStrings)),
     ...(await pageFiles(
       name,
       pascalScaffoldPath,
@@ -198,7 +197,7 @@ export const files = async ({
   }
 }
 
-const assetFiles = (name, tailwind) => {
+const assetFiles = async (name, tailwind) => {
   let fileList = {}
   const assets = fs.readdirSync(
     customOrDefaultTemplatePath({
@@ -208,7 +207,7 @@ const assetFiles = (name, tailwind) => {
     })
   )
 
-  assets.forEach((asset) => {
+  for (const asset of assets) {
     // check if the asset name matches the Tailwind preference
     if (
       (tailwind && asset.match(/tailwind/)) ||
@@ -224,7 +223,7 @@ const assetFiles = (name, tailwind) => {
         !SKIPPABLE_ASSETS.includes(path.basename(outputPath)) ||
         !fs.existsSync(outputPath)
       ) {
-        const template = generateTemplate(
+        const template = await generateTemplate(
           customOrDefaultTemplatePath({
             side: 'web',
             generator: 'scaffold',
@@ -237,7 +236,7 @@ const assetFiles = (name, tailwind) => {
         fileList[outputPath] = template
       }
     }
-  })
+  }
 
   return fileList
 }
@@ -259,7 +258,7 @@ const formatters = async (name, isTypescript) => {
     return
   }
 
-  const template = generateTemplate(
+  const template = await generateTemplate(
     customOrDefaultTemplatePath({
       side: 'web',
       generator: 'scaffold',
@@ -270,7 +269,7 @@ const formatters = async (name, isTypescript) => {
     }
   )
 
-  const templateTest = generateTemplate(
+  const templateTest = await generateTemplate(
     customOrDefaultTemplatePath({
       side: 'web',
       generator: 'scaffold',
@@ -284,10 +283,10 @@ const formatters = async (name, isTypescript) => {
   return {
     [outputPath]: isTypescript
       ? template
-      : transformTSToJS(outputPath, template),
+      : await transformTSToJS(outputPath, template),
     [outputPathTest]: isTypescript
       ? templateTest
-      : transformTSToJS(outputPathTest, templateTest),
+      : await transformTSToJS(outputPathTest, templateTest),
   }
 }
 
@@ -440,7 +439,12 @@ const modelRelatedVariables = (model) => {
   }
 }
 
-const layoutFiles = (name, force, generateTypescript, templateStrings) => {
+const layoutFiles = async (
+  name,
+  force,
+  generateTypescript,
+  templateStrings
+) => {
   let fileList = {}
 
   const layouts = fs.readdirSync(
@@ -451,7 +455,7 @@ const layoutFiles = (name, force, generateTypescript, templateStrings) => {
     })
   )
 
-  layouts.forEach((layout) => {
+  for (const layout of layouts) {
     const outputLayoutName = layout.replace(
       /\.tsx\.template/,
       generateTypescript ? '.tsx' : '.jsx'
@@ -465,7 +469,7 @@ const layoutFiles = (name, force, generateTypescript, templateStrings) => {
 
     // Since the ScaffoldLayout is shared, don't overwrite by default
     if (!fs.existsSync(outputPath) || force) {
-      const template = generateTemplate(
+      const template = await generateTemplate(
         customOrDefaultTemplatePath({
           side: 'web',
           generator: 'scaffold',
@@ -480,9 +484,9 @@ const layoutFiles = (name, force, generateTypescript, templateStrings) => {
 
       fileList[outputPath] = generateTypescript
         ? template
-        : transformTSToJS(outputPath, template)
+        : await transformTSToJS(outputPath, template)
     }
-  })
+  }
 
   return fileList
 }
@@ -511,7 +515,7 @@ const pageFiles = async (
     })
   )
 
-  pages.forEach((page) => {
+  for (const page of pages) {
     // Sanitize page names
     const outputPageName = page
       .replace(/Names/, pluralName)
@@ -528,7 +532,7 @@ const pageFiles = async (
       finalFolder,
       outputPageName
     )
-    const template = generateTemplate(
+    const template = await generateTemplate(
       customOrDefaultTemplatePath({
         side: 'web',
         generator: 'scaffold',
@@ -546,8 +550,8 @@ const pageFiles = async (
 
     fileList[outputPath] = generateTypescript
       ? template
-      : transformTSToJS(outputPath, template)
-  })
+      : await transformTSToJS(outputPath, template)
+  }
 
   return fileList
 }
@@ -576,7 +580,7 @@ const componentFiles = async (
     })
   )
 
-  await asyncForEach(components, (component) => {
+  for (const component of components) {
     const outputComponentName = component
       .replace(/Names/, pluralName)
       .replace(/Name/, singularName)
@@ -597,7 +601,7 @@ const componentFiles = async (
       ? "'use client'\n\n"
       : ''
 
-    const template = generateTemplate(
+    const template = await generateTemplate(
       customOrDefaultTemplatePath({
         side: 'web',
         generator: 'scaffold',
@@ -618,8 +622,8 @@ const componentFiles = async (
 
     fileList[outputPath] = generateTypescript
       ? template
-      : transformTSToJS(outputPath, template)
-  })
+      : await transformTSToJS(outputPath, template)
+  }
 
   return fileList
 }
diff --git a/packages/cli/src/commands/generate/sdl/sdl.js b/packages/cli/src/commands/generate/sdl/sdl.js
index 53625a5fdaf1..f3baf1f25c54 100644
--- a/packages/cli/src/commands/generate/sdl/sdl.js
+++ b/packages/cli/src/commands/generate/sdl/sdl.js
@@ -212,7 +212,7 @@ export const files = async ({
     templatePath: 'sdl.ts.template',
   })
 
-  let template = generateTemplate(templatePath, {
+  let template = await generateTemplate(templatePath, {
     docs,
     modelName,
     modelDescription,
@@ -233,7 +233,7 @@ export const files = async ({
   )
 
   if (typescript) {
-    template = transformTSToJS(outputPath, template)
+    template = await transformTSToJS(outputPath, template)
   }
 
   return {
diff --git a/packages/cli/src/commands/generate/service/service.js b/packages/cli/src/commands/generate/service/service.js
index b3df5afac1cd..0576182e155e 100644
--- a/packages/cli/src/commands/generate/service/service.js
+++ b/packages/cli/src/commands/generate/service/service.js
@@ -304,7 +304,7 @@ export const files = async ({
   const model = name
   const idName = await getIdName(model)
   const extension = 'ts'
-  const serviceFile = templateForComponentFile({
+  const serviceFile = await templateForComponentFile({
     name,
     componentName: componentName,
     extension: `.${extension}`,
@@ -314,7 +314,7 @@ export const files = async ({
     templateVars: { relations: relations || [], idName, ...rest },
   })
 
-  const testFile = templateForComponentFile({
+  const testFile = await templateForComponentFile({
     name,
     componentName: componentName,
     extension: `.test.${extension}`,
@@ -326,16 +326,16 @@ export const files = async ({
       create: await fieldsToInput(model),
       update: await fieldsToUpdate(model),
       types: await fieldTypes(model),
-      prismaImport: (await parseSchema(model)).scalarFields.some(
-        (field) => field.type === 'Decimal'
-      ),
+      prismaImport: (
+        await parseSchema(model)
+      ).scalarFields.some((field) => field.type === 'Decimal'),
       prismaModel: model,
       idName,
       ...rest,
     },
   })
 
-  const scenariosFile = templateForComponentFile({
+  const scenariosFile = await templateForComponentFile({
     name,
     componentName: componentName,
     extension: `.scenarios.${extension}`,
@@ -362,9 +362,11 @@ export const files = async ({
   //    "path/to/fileA": "<<<template>>>",
   //    "path/to/fileB": "<<<template>>>",
   // }
-  return files.reduce((acc, [outputPath, content]) => {
+  return files.reduce(async (accP, [outputPath, content]) => {
+    const acc = await accP
+
     if (!typescript) {
-      content = transformTSToJS(outputPath, content)
+      content = await transformTSToJS(outputPath, content)
       outputPath = outputPath.replace('.ts', '.js')
     }
 
@@ -372,7 +374,7 @@ export const files = async ({
       [outputPath]: content,
       ...acc,
     }
-  }, {})
+  }, Promise.resolve({}))
 }
 
 export const defaults = {
diff --git a/packages/cli/src/commands/setup/graphql/features/fragments/fragmentsHandler.ts b/packages/cli/src/commands/setup/graphql/features/fragments/fragmentsHandler.ts
index b9bb28c41b50..fc7ec0b03670 100644
--- a/packages/cli/src/commands/setup/graphql/features/fragments/fragmentsHandler.ts
+++ b/packages/cli/src/commands/setup/graphql/features/fragments/fragmentsHandler.ts
@@ -5,7 +5,11 @@ import execa from 'execa'
 import { Listr } from 'listr2'
 import { format } from 'prettier'
 
-import { colors, prettierOptions, setTomlSetting } from '@redwoodjs/cli-helpers'
+import {
+  colors,
+  getPrettierOptions,
+  setTomlSetting,
+} from '@redwoodjs/cli-helpers'
 import { getConfig, getPaths } from '@redwoodjs/project-config'
 
 import type { Args } from './fragments'
@@ -67,8 +71,10 @@ export async function handler({ force }: Args) {
           const appPath = getPaths().web.app
           const source = fs.readFileSync(appPath, 'utf-8')
 
+          const prettierOptions = await getPrettierOptions()
+
           const prettifiedApp = format(source, {
-            ...prettierOptions(),
+            ...prettierOptions,
             parser: 'babel-ts',
           })
 
diff --git a/packages/cli/src/commands/setup/graphql/features/trustedDocuments/trustedDocumentsHandler.ts b/packages/cli/src/commands/setup/graphql/features/trustedDocuments/trustedDocumentsHandler.ts
index e3e959ee9493..a3a60a9d2d09 100644
--- a/packages/cli/src/commands/setup/graphql/features/trustedDocuments/trustedDocumentsHandler.ts
+++ b/packages/cli/src/commands/setup/graphql/features/trustedDocuments/trustedDocumentsHandler.ts
@@ -5,7 +5,7 @@ import execa from 'execa'
 import { Listr } from 'listr2'
 import { format } from 'prettier'
 
-import { prettierOptions, setTomlSetting } from '@redwoodjs/cli-helpers'
+import { getPrettierOptions, setTomlSetting } from '@redwoodjs/cli-helpers'
 import { getConfig, getPaths, resolveFile } from '@redwoodjs/project-config'
 
 import { runTransform } from '../fragments/runTransform.js'
@@ -62,8 +62,10 @@ export async function handler({ force }: { force: boolean }) {
 
           const source = fs.readFileSync(graphqlPath, 'utf-8')
 
+          const prettierOptions = await getPrettierOptions()
+
           const prettifiedApp = format(source, {
-            ...prettierOptions(),
+            ...prettierOptions,
             parser: 'babel-ts',
           })
 
diff --git a/packages/cli/src/commands/setup/monitoring/sentry/sentryHandler.ts b/packages/cli/src/commands/setup/monitoring/sentry/sentryHandler.ts
index 607a6d28a506..f0db2436f939 100644
--- a/packages/cli/src/commands/setup/monitoring/sentry/sentryHandler.ts
+++ b/packages/cli/src/commands/setup/monitoring/sentry/sentryHandler.ts
@@ -54,7 +54,7 @@ export const handler = async ({ force }: Args) => {
     },
     {
       title: 'Implementing the Envelop plugin',
-      task: (ctx) => {
+      task: async (ctx) => {
         const graphqlHandlerPath = path.join(
           rwPaths.api.functions,
           `graphql.${extension}`
@@ -95,13 +95,13 @@ export const handler = async ({ force }: Args) => {
 
         fs.writeFileSync(
           graphqlHandlerPath,
-          prettify('graphql.ts', contentLines.join('\n'))
+          await prettify('graphql.ts', contentLines.join('\n'))
         )
       },
     },
     {
       title: "Replacing Redwood's Error boundary",
-      task: () => {
+      task: async () => {
         const contentLines = fs
           .readFileSync(rwPaths.web.app)
           .toString()
@@ -136,7 +136,7 @@ export const handler = async ({ force }: Args) => {
 
         fs.writeFileSync(
           rwPaths.web.app,
-          prettify('App.tsx', contentLines.join('\n'))
+          await prettify('App.tsx', contentLines.join('\n'))
         )
       },
     },
diff --git a/packages/cli/src/lib/__tests__/index.test.js b/packages/cli/src/lib/__tests__/index.test.js
index cb5181beffaf..049bb4b92f8e 100644
--- a/packages/cli/src/lib/__tests__/index.test.js
+++ b/packages/cli/src/lib/__tests__/index.test.js
@@ -59,8 +59,8 @@ test('nameVariants returns a multi word cased variables', () => {
   })
 })
 
-test('generateTemplate returns a lodash-templated string', () => {
-  const output = index.generateTemplate(
+test('generateTemplate returns a lodash-templated string', async () => {
+  const output = await index.generateTemplate(
     path.join(__dirname, 'fixtures', 'text.txt'),
     {
       name: 'amet',
@@ -73,8 +73,8 @@ test('generateTemplate returns a lodash-templated string', () => {
 
 // Be careful when editing the code.js fixture as the prettifier.config.js will cause it to get
 // prettified and then it already match the expected output, with no changes
-test('generateTemplate returns prettified JS code', () => {
-  const output = index.generateTemplate(
+test('generateTemplate returns prettified JS code', async () => {
+  const output = await index.generateTemplate(
     path.join(__dirname, 'fixtures', 'code.js'),
     {
       name: 'fox',
diff --git a/packages/cli/src/lib/index.js b/packages/cli/src/lib/index.js
index 835b6ea8d7a7..bbc3a7b5cdef 100644
--- a/packages/cli/src/lib/index.js
+++ b/packages/cli/src/lib/index.js
@@ -27,12 +27,6 @@ import { pluralize, singularize } from './rwPluralize'
 
 export { findUp }
 
-export const asyncForEach = async (array, callback) => {
-  for (let index = 0; index < array.length; index++) {
-    await callback(array[index], index, array)
-  }
-}
-
 /**
  * Returns variants of the passed `name` for usage in templates. If the given
  * name was "fooBar" then these would be:
@@ -81,7 +75,7 @@ export const generateTemplate = (templateFilename, { name, ...rest }) => {
   }
 }
 
-export const prettify = (templateFilename, renderedTemplate) => {
+export const prettify = async (templateFilename, renderedTemplate) => {
   // We format .js and .css templates, we need to tell prettier which parser
   // we're using.
   // https://prettier.io/docs/en/options.html#parser
@@ -97,8 +91,10 @@ export const prettify = (templateFilename, renderedTemplate) => {
     return renderedTemplate
   }
 
+  const prettierOptions = await getPrettierOptions()
+
   return format(renderedTemplate, {
-    ...prettierOptions(),
+    ...prettierOptions,
     parser,
   })
 }
@@ -228,9 +224,12 @@ export const getConfig = () => {
 /**
  * This returns the config present in `prettier.config.js` of a Redwood project.
  */
-export const prettierOptions = () => {
+export const getPrettierOptions = async () => {
   try {
-    return require(path.join(getPaths().base, 'prettier.config.js'))
+    const { default: prettierOptions } = await import(
+      `file://${path.join(getPaths().base, 'prettier.config.js')}`
+    )
+    return prettierOptions
   } catch (e) {
     // If we're in our vitest environment we want to return a consistent set of prettier options
     // such that snapshots don't change unexpectedly.
diff --git a/packages/codemods/src/codemods/v0.39.x/updateBabelConfig/updateBabelConfig.ts b/packages/codemods/src/codemods/v0.39.x/updateBabelConfig/updateBabelConfig.ts
index 863bfb8aad61..b1325c779f0e 100644
--- a/packages/codemods/src/codemods/v0.39.x/updateBabelConfig/updateBabelConfig.ts
+++ b/packages/codemods/src/codemods/v0.39.x/updateBabelConfig/updateBabelConfig.ts
@@ -51,7 +51,7 @@ export const removeBabelConfig = async () => {
 
         const newConfig = `module.exports = ${JSON.stringify(otherConfig)}`
 
-        fs.writeFileSync(webBabelConfigPath, prettify(newConfig))
+        fs.writeFileSync(webBabelConfigPath, await prettify(newConfig))
       }
     }
   }
diff --git a/packages/codemods/src/codemods/v2.3.x/tsconfigForRouteHooks/tsconfigForRouteHooks.ts b/packages/codemods/src/codemods/v2.3.x/tsconfigForRouteHooks/tsconfigForRouteHooks.ts
index bd30a857a289..d081b8d8d097 100644
--- a/packages/codemods/src/codemods/v2.3.x/tsconfigForRouteHooks/tsconfigForRouteHooks.ts
+++ b/packages/codemods/src/codemods/v2.3.x/tsconfigForRouteHooks/tsconfigForRouteHooks.ts
@@ -41,7 +41,7 @@ export default async function addApiAliasToTsConfig() {
     ts.sys.writeFile(
       webConfigPath,
       // @NOTE: prettier will remove trailing commas, but whatever
-      prettify(JSON.stringify(updatedConfig), { parser: 'json' })
+      await prettify(JSON.stringify(updatedConfig), { parser: 'json' })
     )
   } else {
     throw new Error(
diff --git a/packages/codemods/src/codemods/v2.x.x/configureFastify/configureFastify.yargs.ts b/packages/codemods/src/codemods/v2.x.x/configureFastify/configureFastify.yargs.ts
index 8180f0901c6e..a55f573bf45a 100644
--- a/packages/codemods/src/codemods/v2.x.x/configureFastify/configureFastify.yargs.ts
+++ b/packages/codemods/src/codemods/v2.x.x/configureFastify/configureFastify.yargs.ts
@@ -36,7 +36,7 @@ export const handler = () => {
       // They don't show up in tests cause we run prettier. Let's do the same here.
       fs.writeFileSync(
         API_SERVER_CONFIG_PATH,
-        prettify(fs.readFileSync(API_SERVER_CONFIG_PATH, 'utf-8'))
+        await prettify(fs.readFileSync(API_SERVER_CONFIG_PATH, 'utf-8'))
       )
 
       setOutput('All done!')
@@ -51,7 +51,7 @@ export const handler = () => {
         'server.config.js'
       )
 
-      fs.writeFileSync(NEW_API_SERVER_CONFIG_PATH, prettify(text))
+      fs.writeFileSync(NEW_API_SERVER_CONFIG_PATH, await prettify(text))
 
       setOutput(
         'Done! No server.config.js found, so we updated your project to use the latest version.'
diff --git a/packages/codemods/src/lib/prettify.ts b/packages/codemods/src/lib/prettify.ts
index 7a2927f24e85..8632f2c03f62 100644
--- a/packages/codemods/src/lib/prettify.ts
+++ b/packages/codemods/src/lib/prettify.ts
@@ -4,21 +4,26 @@ import { format } from 'prettier'
 
 import { getPaths } from '@redwoodjs/project-config'
 
-const getPrettierConfig = () => {
+const getPrettierConfig = async () => {
   try {
-    return require(path.join(getPaths().base, 'prettier.config.js'))
+    const { default: prettierConfig } = await import(
+      `file://${path.join(getPaths().base, 'prettier.config.js')}`
+    )
+    return prettierConfig
   } catch (e) {
     return undefined
   }
 }
 
-const prettify = (code: string, options: Record<string, any> = {}) =>
-  format(code, {
+const prettify = async (code: string, options: Record<string, any> = {}) => {
+  const prettierConfig = await getPrettierConfig()
+  return format(code, {
     singleQuote: true,
     semi: false,
-    ...getPrettierConfig(),
+    ...prettierConfig,
     parser: 'babel',
     ...options,
   })
+}
 
 export default prettify
diff --git a/packages/internal/src/generate/clientPreset.ts b/packages/internal/src/generate/clientPreset.ts
index c50f24b14822..93f6b0645283 100644
--- a/packages/internal/src/generate/clientPreset.ts
+++ b/packages/internal/src/generate/clientPreset.ts
@@ -51,7 +51,9 @@ export const generateClientPreset = async () => {
 
     clientPresetFiles = generatedFiles.map((f: GeneratedFile) => f.filename)
 
-    const trustedDocumentsStoreFile = trustedDocumentsStore(generatedFiles)
+    const trustedDocumentsStoreFile = await trustedDocumentsStore(
+      generatedFiles
+    )
     replaceGqlTagWithTrustedDocumentGraphql(generatedFiles)
 
     return {
diff --git a/packages/internal/src/generate/possibleTypes.ts b/packages/internal/src/generate/possibleTypes.ts
index 91b0ef308640..2bdd12ea9ac8 100644
--- a/packages/internal/src/generate/possibleTypes.ts
+++ b/packages/internal/src/generate/possibleTypes.ts
@@ -89,7 +89,7 @@ export const generatePossibleTypes = async (): Promise<PossibleTypesResult> => {
 
     files.push(filename)
 
-    const output = format(possibleTypes.toString(), {
+    const output = await format(possibleTypes.toString(), {
       trailingComma: 'es5',
       bracketSpacing: true,
       tabWidth: 2,
diff --git a/packages/internal/src/generate/trustedDocuments.ts b/packages/internal/src/generate/trustedDocuments.ts
index 722486d6aeb1..68ed40417a15 100644
--- a/packages/internal/src/generate/trustedDocuments.ts
+++ b/packages/internal/src/generate/trustedDocuments.ts
@@ -8,7 +8,7 @@ import { getPaths } from '@redwoodjs/project-config'
 import type { GeneratedFile } from './types'
 
 // Copy the persisted-documents.json to api side as a trustedDocumentsStore
-export const trustedDocumentsStore = (generatedFiles: any) => {
+export const trustedDocumentsStore = async (generatedFiles: any) => {
   let trustedDocumentsStoreFile = ''
 
   const output = generatedFiles.filter((f: GeneratedFile) =>
@@ -18,7 +18,7 @@ export const trustedDocumentsStore = (generatedFiles: any) => {
   const storeFile = output[0]
 
   if (storeFile && storeFile.content) {
-    const content = format(`export const store = ${storeFile.content}`, {
+    const content = await format(`export const store = ${storeFile.content}`, {
       trailingComma: 'es5',
       bracketSpacing: true,
       tabWidth: 2,
@@ -42,7 +42,7 @@ export const trustedDocumentsStore = (generatedFiles: any) => {
 
 // Add the gql function to the generated graphql.ts file
 // that is used by trusted documents
-export const replaceGqlTagWithTrustedDocumentGraphql = (
+export const replaceGqlTagWithTrustedDocumentGraphql = async (
   generatedFiles: any
 ) => {
   const gqlFileOutput = generatedFiles.filter((f: GeneratedFile) =>
@@ -61,7 +61,7 @@ export const replaceGqlTagWithTrustedDocumentGraphql = (
         return graphql(source.join('\\n'))
       }`
 
-    const content = format(gqlFile.content, {
+    const content = await format(gqlFile.content, {
       trailingComma: 'es5',
       bracketSpacing: true,
       tabWidth: 2,
diff --git a/packages/internal/src/ts2js.ts b/packages/internal/src/ts2js.ts
index 31e483801e00..ecdfb9b0b077 100644
--- a/packages/internal/src/ts2js.ts
+++ b/packages/internal/src/ts2js.ts
@@ -33,12 +33,12 @@ export const convertTsScriptsToJs = (cwd = getPaths().base) => {
  * @param {string} cwd - Current directory
  * @param {string[]} files - Collection of files to convert
  */
-export const convertTsFilesToJs = (cwd: string, files: string[]) => {
+export const convertTsFilesToJs = async (cwd: string, files: string[]) => {
   if (files.length === 0) {
     console.log('No TypeScript files found to convert to JS in this project.')
   }
   for (const f of files) {
-    const code = transformTSToJS(f)
+    const code = await transformTSToJS(f)
     if (code) {
       fs.writeFileSync(
         path.join(cwd, f.replace('.tsx', '.jsx').replace('.ts', '.js')),
@@ -117,9 +117,12 @@ export const transformTSToJS = (file: string) => {
   return prettify(result.code, filename.replace(/\.ts$/, '.js'))
 }
 
-export const prettierConfig = () => {
+export const getPrettierConfig = async () => {
   try {
-    return require(path.join(getPaths().base, 'prettier.config.js'))
+    const { default: prettierConfig } = await import(
+      `file://${path.join(getPaths().base, 'prettier.config.js')}`
+    )
+    return prettierConfig
   } catch (e) {
     return undefined
   }
@@ -152,15 +155,17 @@ const prettierParser = (filename: string) => {
  * @param {string} code
  * @param {string} filename
  */
-export const prettify = (code: string, filename: string) => {
+export const prettify = async (code: string, filename: string) => {
   const parser = prettierParser(filename)
   // Return unformatted code if we could not determine the parser.
   if (typeof parser === 'undefined') {
     return code
   }
 
+  const prettierConfig = await getPrettierConfig()
+
   return format(code, {
-    ...prettierConfig(),
+    ...prettierConfig,
     parser,
   })
 }