From 973ac38694bd21dca5252a098478555b645bc35b Mon Sep 17 00:00:00 2001 From: mqwebster-nava Date: Mon, 24 Mar 2025 13:20:58 -0500 Subject: [PATCH 1/7] Test commit to start a PR From 7191475f075600b5c05729ad873f17ba6c25f21d Mon Sep 17 00:00:00 2001 From: mqwebster-nava Date: Mon, 24 Mar 2025 17:32:37 -0500 Subject: [PATCH 2/7] Update Next.js config to support Node.js ECMAScript modules --- app/next.config.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/next.config.js b/app/next.config.js index 4bb8db71..a78d7f17 100644 --- a/app/next.config.js +++ b/app/next.config.js @@ -1,4 +1,6 @@ // @ts-check +import { createRequire } from "node:module"; +const require = createRequire(import.meta.url); const withNextIntl = require("next-intl/plugin")("./src/i18n/server.ts"); const sassOptions = require("./scripts/sassOptions"); @@ -27,4 +29,4 @@ const nextConfig = { ], }; -module.exports = withNextIntl(nextConfig); +export default withNextIntl(nextConfig); From 56dc9eaff8cbcfb51159e31378c151a4798d0e57 Mon Sep 17 00:00:00 2001 From: mqwebster-nava Date: Tue, 8 Apr 2025 14:13:20 -0500 Subject: [PATCH 3/7] Update next.config to use.mjs ensuring ESM use --- app/{next.config.js => next.config.mjs} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename app/{next.config.js => next.config.mjs} (100%) diff --git a/app/next.config.js b/app/next.config.mjs similarity index 100% rename from app/next.config.js rename to app/next.config.mjs From 7b5a6db71bb9ce60a223c787fca7a165584a5130 Mon Sep 17 00:00:00 2001 From: mqwebster-nava Date: Tue, 8 Apr 2025 16:25:24 -0500 Subject: [PATCH 4/7] Update all app config to leverage Node esm instead of commonJS --- app/{.eslintrc.js => .eslintrc.mjs} | 8 +++++++- app/.prettierrc.js | 2 +- app/jest.config.js | 4 ++-- app/next-env.d.ts | 2 +- app/next.config.mjs | 9 ++++----- app/package.json | 1 + app/postcss.config.js | 2 +- app/scripts/postinstall.js | 8 ++++++-- app/scripts/sassOptions.js | 4 ++-- 9 files changed, 25 insertions(+), 15 deletions(-) rename app/{.eslintrc.js => .eslintrc.mjs} (93%) diff --git a/app/.eslintrc.js b/app/.eslintrc.mjs similarity index 93% rename from app/.eslintrc.js rename to app/.eslintrc.mjs index fc07b0da..1455b820 100644 --- a/app/.eslintrc.js +++ b/app/.eslintrc.mjs @@ -1,4 +1,10 @@ -module.exports = { +import { dirname } from "path"; +import { fileURLToPath } from "url"; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = dirname(__filename); + +export default { root: true, extends: [ "eslint:recommended", diff --git a/app/.prettierrc.js b/app/.prettierrc.js index d52ac129..87ee7ac0 100644 --- a/app/.prettierrc.js +++ b/app/.prettierrc.js @@ -1,7 +1,7 @@ // @ts-check /** @type {import("@ianvs/prettier-plugin-sort-imports").PrettierConfig} */ -module.exports = { +export default { /** * Sort imports so that the order is roughly: * - Built-in Node modules (`import ... from "fs"`) diff --git a/app/jest.config.js b/app/jest.config.js index 295f09ba..ccbe4771 100644 --- a/app/jest.config.js +++ b/app/jest.config.js @@ -1,5 +1,5 @@ // See https://nextjs.org/docs/testing -const nextJest = require("next/jest"); +import nextJest from "next/jest"; const createJestConfig = nextJest({ // Provide the path to your Next.js app to load next.config.js and .env files in your test environment @@ -22,4 +22,4 @@ const customJestConfig = { }, }; -module.exports = createJestConfig(customJestConfig); +export default createJestConfig(customJestConfig); diff --git a/app/next-env.d.ts b/app/next-env.d.ts index 4f11a03d..1b3be084 100644 --- a/app/next-env.d.ts +++ b/app/next-env.d.ts @@ -2,4 +2,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. +// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/app/next.config.mjs b/app/next.config.mjs index a78d7f17..eeb5695f 100644 --- a/app/next.config.mjs +++ b/app/next.config.mjs @@ -1,8 +1,7 @@ // @ts-check -import { createRequire } from "node:module"; -const require = createRequire(import.meta.url); -const withNextIntl = require("next-intl/plugin")("./src/i18n/server.ts"); -const sassOptions = require("./scripts/sassOptions"); +import sassOptions from "./scripts/sassOptions.js"; +import withNextIntl from "next-intl/plugin"; +const intlPlugin = withNextIntl("./src/i18n/server.ts"); /** * Configure the base path for the app. Useful if you're deploying to a subdirectory (like GitHub Pages). @@ -29,4 +28,4 @@ const nextConfig = { ], }; -export default withNextIntl(nextConfig); +export default intlPlugin(nextConfig); diff --git a/app/package.json b/app/package.json index 3e66749c..19282668 100644 --- a/app/package.json +++ b/app/package.json @@ -1,4 +1,5 @@ { + "type": "module", "name": "app", "version": "0.1.0", "private": true, diff --git a/app/postcss.config.js b/app/postcss.config.js index 6fe40e79..80a53174 100644 --- a/app/postcss.config.js +++ b/app/postcss.config.js @@ -3,7 +3,7 @@ * does out of the box. * https://github.com/storybookjs/storybook/issues/23234 */ -module.exports = { +export default { plugins: { autoprefixer: {}, }, diff --git a/app/scripts/postinstall.js b/app/scripts/postinstall.js index 1a25c0c2..0b9761f0 100644 --- a/app/scripts/postinstall.js +++ b/app/scripts/postinstall.js @@ -4,8 +4,12 @@ * This runs after `npm install` */ // @ts-check -const fs = require("fs"); -const path = require("path"); +import fs from "fs"; +import path, { dirname } from "path"; +import { fileURLToPath } from "url"; + +const __filename = fileURLToPath(import.meta.url); +const __dirname = dirname(__filename); const uswdsPath = path.resolve(__dirname, "../node_modules/@uswds/uswds/dist"); const publicPath = path.resolve(__dirname, "../public/uswds"); diff --git a/app/scripts/sassOptions.js b/app/scripts/sassOptions.js index 94462082..a11d1fa6 100644 --- a/app/scripts/sassOptions.js +++ b/app/scripts/sassOptions.js @@ -1,5 +1,5 @@ // @ts-check -const sass = require("sass"); +import * as sass from "sass"; /** * Configure Sass to load USWDS assets, and expose a Sass function for setting the @@ -19,4 +19,4 @@ function sassOptions(basePath = "") { }; } -module.exports = sassOptions; +export default sassOptions; From b53162b48753e9bf96349723f04d394940bbf8cd Mon Sep 17 00:00:00 2001 From: mqwebster-nava Date: Tue, 8 Apr 2025 16:32:23 -0500 Subject: [PATCH 5/7] Revert "Update all app config to leverage Node esm instead of commonJS" This reverts commit 7b5a6db71bb9ce60a223c787fca7a165584a5130. --- app/{.eslintrc.mjs => .eslintrc.js} | 8 +------- app/.prettierrc.js | 2 +- app/jest.config.js | 4 ++-- app/next-env.d.ts | 2 +- app/next.config.mjs | 9 +++++---- app/package.json | 1 - app/postcss.config.js | 2 +- app/scripts/postinstall.js | 8 ++------ app/scripts/sassOptions.js | 4 ++-- 9 files changed, 15 insertions(+), 25 deletions(-) rename app/{.eslintrc.mjs => .eslintrc.js} (93%) diff --git a/app/.eslintrc.mjs b/app/.eslintrc.js similarity index 93% rename from app/.eslintrc.mjs rename to app/.eslintrc.js index 1455b820..fc07b0da 100644 --- a/app/.eslintrc.mjs +++ b/app/.eslintrc.js @@ -1,10 +1,4 @@ -import { dirname } from "path"; -import { fileURLToPath } from "url"; - -const __filename = fileURLToPath(import.meta.url); -const __dirname = dirname(__filename); - -export default { +module.exports = { root: true, extends: [ "eslint:recommended", diff --git a/app/.prettierrc.js b/app/.prettierrc.js index 87ee7ac0..d52ac129 100644 --- a/app/.prettierrc.js +++ b/app/.prettierrc.js @@ -1,7 +1,7 @@ // @ts-check /** @type {import("@ianvs/prettier-plugin-sort-imports").PrettierConfig} */ -export default { +module.exports = { /** * Sort imports so that the order is roughly: * - Built-in Node modules (`import ... from "fs"`) diff --git a/app/jest.config.js b/app/jest.config.js index ccbe4771..295f09ba 100644 --- a/app/jest.config.js +++ b/app/jest.config.js @@ -1,5 +1,5 @@ // See https://nextjs.org/docs/testing -import nextJest from "next/jest"; +const nextJest = require("next/jest"); const createJestConfig = nextJest({ // Provide the path to your Next.js app to load next.config.js and .env files in your test environment @@ -22,4 +22,4 @@ const customJestConfig = { }, }; -export default createJestConfig(customJestConfig); +module.exports = createJestConfig(customJestConfig); diff --git a/app/next-env.d.ts b/app/next-env.d.ts index 1b3be084..4f11a03d 100644 --- a/app/next-env.d.ts +++ b/app/next-env.d.ts @@ -2,4 +2,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/app/next.config.mjs b/app/next.config.mjs index eeb5695f..a78d7f17 100644 --- a/app/next.config.mjs +++ b/app/next.config.mjs @@ -1,7 +1,8 @@ // @ts-check -import sassOptions from "./scripts/sassOptions.js"; -import withNextIntl from "next-intl/plugin"; -const intlPlugin = withNextIntl("./src/i18n/server.ts"); +import { createRequire } from "node:module"; +const require = createRequire(import.meta.url); +const withNextIntl = require("next-intl/plugin")("./src/i18n/server.ts"); +const sassOptions = require("./scripts/sassOptions"); /** * Configure the base path for the app. Useful if you're deploying to a subdirectory (like GitHub Pages). @@ -28,4 +29,4 @@ const nextConfig = { ], }; -export default intlPlugin(nextConfig); +export default withNextIntl(nextConfig); diff --git a/app/package.json b/app/package.json index 19282668..3e66749c 100644 --- a/app/package.json +++ b/app/package.json @@ -1,5 +1,4 @@ { - "type": "module", "name": "app", "version": "0.1.0", "private": true, diff --git a/app/postcss.config.js b/app/postcss.config.js index 80a53174..6fe40e79 100644 --- a/app/postcss.config.js +++ b/app/postcss.config.js @@ -3,7 +3,7 @@ * does out of the box. * https://github.com/storybookjs/storybook/issues/23234 */ -export default { +module.exports = { plugins: { autoprefixer: {}, }, diff --git a/app/scripts/postinstall.js b/app/scripts/postinstall.js index 0b9761f0..1a25c0c2 100644 --- a/app/scripts/postinstall.js +++ b/app/scripts/postinstall.js @@ -4,12 +4,8 @@ * This runs after `npm install` */ // @ts-check -import fs from "fs"; -import path, { dirname } from "path"; -import { fileURLToPath } from "url"; - -const __filename = fileURLToPath(import.meta.url); -const __dirname = dirname(__filename); +const fs = require("fs"); +const path = require("path"); const uswdsPath = path.resolve(__dirname, "../node_modules/@uswds/uswds/dist"); const publicPath = path.resolve(__dirname, "../public/uswds"); diff --git a/app/scripts/sassOptions.js b/app/scripts/sassOptions.js index a11d1fa6..94462082 100644 --- a/app/scripts/sassOptions.js +++ b/app/scripts/sassOptions.js @@ -1,5 +1,5 @@ // @ts-check -import * as sass from "sass"; +const sass = require("sass"); /** * Configure Sass to load USWDS assets, and expose a Sass function for setting the @@ -19,4 +19,4 @@ function sassOptions(basePath = "") { }; } -export default sassOptions; +module.exports = sassOptions; From 7f177f9afa3ba1445601eeaa976670cdc7071ba3 Mon Sep 17 00:00:00 2001 From: mqwebster-nava Date: Wed, 9 Apr 2025 14:56:33 -0500 Subject: [PATCH 6/7] Revert code to original form and use `import.meta.dirname` to resolve Storybook build errors --- app/.storybook/main.js | 8 ++------ app/next-env.d.ts | 2 +- app/{next.config.mjs => next.config.js} | 4 +--- 3 files changed, 4 insertions(+), 10 deletions(-) rename app/{next.config.mjs => next.config.js} (89%) diff --git a/app/.storybook/main.js b/app/.storybook/main.js index 178f4e40..c5591e15 100644 --- a/app/.storybook/main.js +++ b/app/.storybook/main.js @@ -5,11 +5,7 @@ */ // @ts-check -import path, { dirname } from "path"; -import { fileURLToPath } from "url"; - -const __filename = fileURLToPath(import.meta.url); -const __dirname = dirname(__filename); +import path from "path"; // Support deploying to a subdirectory, such as GitHub Pages. const NEXT_PUBLIC_BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH ?? ""; @@ -30,7 +26,7 @@ const config = { // https://storybook.js.org/docs/get-started/nextjs name: "@storybook/nextjs", options: { - nextConfigPath: path.resolve(__dirname, "../next.config.js"), + nextConfigPath: path.resolve(import.meta.dirname, "../next.config.js"), builder: { // lazyCompilation breaks Storybook when running from within Docker // Google Translate this page for context: https://zenn.dev/yutaosawa/scraps/7764e5f17173d1 diff --git a/app/next-env.d.ts b/app/next-env.d.ts index 4f11a03d..1b3be084 100644 --- a/app/next-env.d.ts +++ b/app/next-env.d.ts @@ -2,4 +2,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. +// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/app/next.config.mjs b/app/next.config.js similarity index 89% rename from app/next.config.mjs rename to app/next.config.js index a78d7f17..4bb8db71 100644 --- a/app/next.config.mjs +++ b/app/next.config.js @@ -1,6 +1,4 @@ // @ts-check -import { createRequire } from "node:module"; -const require = createRequire(import.meta.url); const withNextIntl = require("next-intl/plugin")("./src/i18n/server.ts"); const sassOptions = require("./scripts/sassOptions"); @@ -29,4 +27,4 @@ const nextConfig = { ], }; -export default withNextIntl(nextConfig); +module.exports = withNextIntl(nextConfig); From dce96694e8927028dae35da8544c8098d362914a Mon Sep 17 00:00:00 2001 From: mqwebster-nava Date: Wed, 9 Apr 2025 15:02:51 -0500 Subject: [PATCH 7/7] Define Storybook config as .mjs file type to ensure esm use --- app/.storybook/{main.js => main.mjs} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename app/.storybook/{main.js => main.mjs} (100%) diff --git a/app/.storybook/main.js b/app/.storybook/main.mjs similarity index 100% rename from app/.storybook/main.js rename to app/.storybook/main.mjs