feat: move to ESM

Author: MichaelDeBoey

.eslintrc.js renamed to .eslintrc.cjs

@@ -11,9 +11,9 @@ module.exports = {
     "cypress/globals": true,
   },
   plugins: ["cypress"],
-  // we're using vitest which has a very similar API to jest
-  // (so the linting plugins work nicely), but it means we have to explicitly
-  // set the jest version.
+  // We're using vitest which has a very similar API to jest
+  // (so the linting plugins work nicely), but it means we
+  // have to set the jest version explicitly.
   settings: {
     jest: {
       version: 28,

.eslintrc.repo.js renamed to .eslintrc.repo.cjs

@@ -6,7 +6,7 @@ const WARN = 1;
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
   extends: [
-    "./.eslintrc.js",
+    "./.eslintrc.cjs",
     "@remix-run/eslint-config/internal",
     "plugin:markdown/recommended",
   ],

cypress/.eslintrc.js renamed to cypress/.eslintrc.cjs

@@ -1,5 +1,5 @@
-const { rest } = require("msw");
-const { setupServer } = require("msw/node");
+import { rest } from "msw";
+import { setupServer } from "msw/node";
 
 // put one-off handlers that don't really need an entire file to themselves here
 const miscHandlers = [

mocks/index.js

@@ -2,17 +2,18 @@
   "name": "indie-stack-template",
   "private": true,
   "sideEffects": false,
+  "type": "module",
   "scripts": {
     "build": "remix build",
     "dev": "remix dev -c \"npm run dev:serve\"",
-    "dev:serve": "binode --require ./mocks -- @remix-run/serve:remix-serve ./build/index.js",
+    "dev:serve": "NODE_OPTIONS=\"--require ./mocks\" remix-serve ./build/index.js",
     "format": "prettier --write .",
     "format:repo": "npm run format && npm run lint:repo -- --fix",
     "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
-    "lint:repo": "npm run lint -- --config .eslintrc.repo.js",
+    "lint:repo": "npm run lint -- --config .eslintrc.repo.cjs",
     "setup": "prisma generate && prisma migrate deploy && prisma db seed",
     "start": "remix-serve ./build/index.js",
-    "start:mocks": "binode --require ./mocks -- @remix-run/serve:remix-serve ./build/index.js",
+    "start:mocks": "NODE_OPTIONS=\"--require ./mocks\" remix-serve ./build/index.js",
     "test": "vitest",
     "test:e2e:dev": "start-server-and-test dev http://localhost:3000 \"npx cypress open\"",
     "pretest:e2e:run": "npm run build",
@@ -52,7 +53,6 @@
     "@vitejs/plugin-react": "^4.0.4",
     "@vitest/coverage-v8": "^0.34.2",
     "autoprefixer": "^10.4.15",
-    "binode": "^1.0.5",
     "cookie": "^0.5.0",
     "cross-env": "^7.0.3",
     "cypress": "12.17.3",
@@ -81,6 +81,6 @@
     "node": ">=18.0.0"
   },
   "prisma": {
-    "seed": "ts-node --require tsconfig-paths/register prisma/seed.ts"
+    "seed": "ts-node --esm --require tsconfig-paths/register prisma/seed.ts"
   }
 }

package.json

@@ -1,6 +1,5 @@
 /** @type {import('@remix-run/dev').AppConfig} */
-module.exports = {
+export default {
   cacheDirectory: "./node_modules/.cache/remix",
   ignoredRouteFiles: ["**/.*", "**/*.test.{ts,tsx}"],
-  serverModuleFormat: "cjs",
 };

postcss.config.js renamed to postcss.config.cjs

@@ -190,7 +190,7 @@ const main = async ({ packageManager, rootDirectory }) => {
     fs.rm(path.join(rootDirectory, ".github", "workflows", "no-response.yml")),
     fs.rm(path.join(rootDirectory, ".github", "dependabot.yml")),
     fs.rm(path.join(rootDirectory, ".github", "PULL_REQUEST_TEMPLATE.md")),
-    fs.rm(path.join(rootDirectory, ".eslintrc.repo.js")),
+    fs.rm(path.join(rootDirectory, ".eslintrc.repo.cjs")),
     fs.rm(path.join(rootDirectory, "LICENSE.md")),
   ]);
 

remix.config.js

@@ -7,7 +7,7 @@
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
-    "module": "CommonJS",
+    "module": "ES2020",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "target": "ES2020",