From 7ebeacc3356ec65c61f19cdc903a9eff58930d48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= <info@michaeldeboey.be>
Date: Thu, 3 Oct 2024 23:24:11 +0200
Subject: [PATCH] feat: move to ESM (#255)

---
 .eslintrc.js => .eslintrc.cjs           | 6 +++---
 README.md                               | 2 +-
 cypress/{.eslintrc.js => .eslintrc.cjs} | 0
 mocks/index.js                          | 4 ++--
 package.json                            | 8 ++++----
 postcss.config.js                       | 2 +-
 prettier.config.js                      | 2 +-
 remix.config.js                         | 3 +--
 tsconfig.json                           | 2 +-
 9 files changed, 14 insertions(+), 15 deletions(-)
 rename .eslintrc.js => .eslintrc.cjs (96%)
 rename cypress/{.eslintrc.js => .eslintrc.cjs} (100%)

diff --git a/.eslintrc.js b/.eslintrc.cjs
similarity index 96%
rename from .eslintrc.js
rename to .eslintrc.cjs
index 9381f335..67a6f3a2 100644
--- a/.eslintrc.js
+++ b/.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,
         },
       },
diff --git a/README.md b/README.md
index d9895663..d274954c 100644
--- a/README.md
+++ b/README.md
@@ -176,7 +176,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
 
diff --git a/cypress/.eslintrc.js b/cypress/.eslintrc.cjs
similarity index 100%
rename from cypress/.eslintrc.js
rename to cypress/.eslintrc.cjs
diff --git a/mocks/index.js b/mocks/index.js
index ca2210ce..2cbbbe76 100644
--- a/mocks/index.js
+++ b/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 = [
diff --git a/package.json b/package.json
index 899440a0..8741f2b7 100644
--- a/package.json
+++ b/package.json
@@ -2,16 +2,17 @@
   "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=\"--import ./mocks/index.js\" remix-serve ./build/index.js",
     "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": "remix-serve ./build/index.js",
-    "start:mocks": "binode --require ./mocks -- @remix-run/serve:remix-serve ./build/index.js",
+    "start:mocks": "NODE_OPTIONS=\"--import ./mocks/index.js\" 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.3.1",
     "@vitest/coverage-v8": "^2.0.5",
     "autoprefixer": "^10.4.20",
-    "binode": "^1.0.5",
     "cookie": "^0.6.0",
     "cross-env": "^7.0.3",
     "cypress": "^13.14.2",
@@ -80,7 +80,7 @@
     "tsx": "^4.19.0",
     "typescript": "^5.6.2",
     "vite": "^5.4.3",
-    "vite-tsconfig-paths": "^4.3.2",
+    "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.0.5"
   },
   "engines": {
diff --git a/postcss.config.js b/postcss.config.js
index 12a703d9..2aa7205d 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
diff --git a/prettier.config.js b/prettier.config.js
index 776594f0..fb6fba22 100644
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -1,4 +1,4 @@
 /** @type {import("prettier").Config} */
-module.exports = {
+export default {
   plugins: ["prettier-plugin-tailwindcss"],
 };
diff --git a/remix.config.js b/remix.config.js
index 29582b29..4047ae45 100644
--- a/remix.config.js
+++ b/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",
 };
diff --git a/tsconfig.json b/tsconfig.json
index c0a761dd..17bce856 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,7 +7,7 @@
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
-    "module": "CommonJS",
+    "module": "ES2020",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "target": "ES2020",