feat: move to ESM

.eslintrc.js → .eslintrc.cjs

@@ -110,9 +110,9 @@ module.exports = {
       },
       settings: {
         jest: {
-          // 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.
           version: 28,
         },
       },

README.md

@@ -213,7 +213,7 @@ This project uses TypeScript. It's recommended to get TypeScript set up for your
 
 ### Linting
 
-This project uses ESLint for linting. That is configured in `.eslintrc.js`.
+This project uses ESLint for linting. That is configured in `.eslintrc.cjs`.
 
 ### Formatting
 

mocks/index.js

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

package.json

@@ -2,20 +2,21 @@
   "name": "blues-stack-template",
   "private": true,
   "sideEffects": false,
+  "type": "module",
   "scripts": {
     "build": "npm-run-all --sequential build:*",
     "build:remix": "remix build",
-    "build:server": "esbuild --platform=node --format=cjs ./server.ts --outdir=build --bundle --external:fsevents",
+    "build:server": "esbuild --platform=node --format=esm ./server.ts --outdir=build --bundle --external:fsevents",
     "dev": "npm-run-all --parallel dev:*",
     "dev:server": "cross-env NODE_ENV=development npm run build:server -- --watch",
-    "dev:remix": "remix dev --manual -c \"node --require ./mocks --watch-path ./build/server.js --watch ./build/server.js\"",
+    "dev:remix": "remix dev --manual -c \"node --import ./mocks/index.js --watch-path ./build/server.js --watch ./build/server.js\"",
     "docker": "docker compose up -d",
     "format": "prettier --write .",
     "format:repo": "npm run format && npm run lint -- --fix",
     "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
     "setup": "prisma generate && prisma migrate deploy && prisma db seed",
     "start": "cross-env NODE_ENV=production node ./build/server.js",
-    "start:mocks": "cross-env NODE_ENV=production node --require ./mocks --require dotenv/config ./build/server.js",
+    "start:mocks": "cross-env NODE_ENV=production node --import ./mocks/index.js --require dotenv/config ./build/server.js",
     "test": "vitest",
     "test:e2e:dev": "start-server-and-test dev http://localhost:3000 \"npx cypress open\"",
     "pretest:e2e:run": "npm run build",

postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},

prettier.config.js

@@ -1,4 +1,4 @@
 /** @type {import("prettier").Config} */
-module.exports = {
+export default {
   plugins: ["prettier-plugin-tailwindcss"],
 };

remix.config.js

@@ -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",
 };

tsconfig.json

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