chore: switch to ES modules

Sadly, quite a few of our tools don't support ES modules, so we need to rename a few things to `.cjs`. Sigh. Also, we don't need the `PkgConfig` plugin for Vite, which also a) doesn't work with ES modules and b) isn't maintained anymore, anyway. Signed-off-by: Drew Hess <[email protected]>
hackworthltd · Apr 10, 2024 · d913a6f · d913a6f
1 parent 53e3976
commit d913a6f
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 9 deletions.
diff --git a/.eslintrc.js → .eslintrc.cjs b/.eslintrc.js → .eslintrc.cjs
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "node": "^18.6.0 || ^19.0 || ^20.0",
     "pnpm": "^8.5"
   },
+  "type": "module",
   "scripts": {
     "watch": "vite",
     "build": "vite build",
@@ -79,6 +80,7 @@
     "orval": "^6.26.0",
     "postcss": "^8.4.38",
     "postcss-import": "^16.1.0",
+    "postcss-load-config": "^5.0.3",
     "prettier": "^3.2.5",
     "storybook": "^7.5.1",
     "tailwindcss": "3.4.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/postcss.config.cjs b/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {} || null,
+    autoprefixer: {} || null,
+  },
+};
diff --git a/postcss.config.js b/postcss.config.js
diff --git a/tsconfig.base.json b/tsconfig.base.json
@@ -10,7 +10,7 @@
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": false,
     "skipLibCheck": false,
-    "esModuleInterop": false,
+    "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,

diff --git a/vite.config.ts b/vite.config.ts
@@ -2,7 +2,6 @@ import { defineConfig, loadEnv } from "vite";
 import svgr from "vite-plugin-svgr";
 import react from "@vitejs/plugin-react";
 import { checker } from "vite-plugin-checker";
-import PkgConfig from "vite-plugin-package-config";
 import tsconfigPaths from "vite-tsconfig-paths";
 import vitePluginFaviconsInject from "vite-plugin-favicons-inject";
 
@@ -22,7 +21,6 @@ export default ({ mode }) => {
       react(),
       svgr(),
       tsconfigPaths(),
-      PkgConfig(),
       // Can cause issues in development mode, and with Storybook builds. See:
       // https://github.com/JohnPremKumar/vite-plugin-favicons-inject#development-mode
       process.env.VITE_API_URL !== ""