chore: move to ESM & vite

- npm run dev works
- npm run build / start not yet

app/root.tsx

@@ -16,11 +16,11 @@ import {
   useMatches,
   useRouteLoaderData,
 } from "@remix-run/react";
-import stylesheet from "~/styles.css";
-import fontsStylesheet from "@digitalservice4germany/angie/fonts.css";
-import fontRegular from "~/../public/fonts/BundesSansWeb-Regular.woff2";
-import fontBold from "~/../public/fonts/BundesSansWeb-Bold.woff2";
-import ogImage from "~/../public/og-image.png";
+import "~/styles.css";
+import "@digitalservice4germany/angie/fonts.css";
+import fontRegular from "/fonts/BundesSansWeb-Regular.woff2";
+import fontBold from "/fonts/BundesSansWeb-Bold.woff2";
+import ogImage from "/og-image.png";
 import { withSentry } from "@sentry/remix";
 import { config as configWeb } from "~/services/env/web";
 import {
@@ -70,8 +70,6 @@ export const links: LinksFunction = () => [
     href: fontBold,
     crossOrigin: "anonymous",
   },
-  { rel: "stylesheet", href: fontsStylesheet },
-  { rel: "stylesheet", href: stylesheet },
   { rel: "icon", href: "/favicon.ico", sizes: "32x32" },
   { rel: "icon", href: "/favicon.svg", type: "image/svg+xml" },
   { rel: "apple-touch-icon", href: "/apple-touch-icon.png", sizes: "180x180" },

app/services/validation/YesNoAnswer.tsx

@@ -1,5 +1,5 @@
 import { z } from "zod";
-import type { ZodErrorMap } from "zod/lib/ZodError";
+import type { ZodErrorMap } from "zod";
 
 export const customRequiredErrorMessage: { errorMap: ZodErrorMap } = {
   errorMap: (issue, ctx) => ({ message: "required" }),

remix.env.d.ts → env.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="@remix-run/dev" />
+/// <reference types="vite/client" />
 /// <reference types="@remix-run/node" />

jest.config.js → jest.config.cjs

@@ -4,10 +4,10 @@ module.exports = {
   moduleNameMapper: {
     "~/(.*)": "<rootDir>/app/$1",
     "tests/(.*)": "<rootDir>/tests/$1",
-    "^.+\\.css$": "<rootDir>/tests/cssStub.js",
+    "^.+\\.css$": "<rootDir>/tests/cssStub.cjs",
   },
   preset: "ts-jest",
   setupFiles: ["<rootDir>/tests/setup.tests.ts"],
-  setupFilesAfterEnv: ["<rootDir>/tests/setupAfterEnv.tests.js"],
-  resolver: "<rootDir>/tests/resolver.js",
+  setupFilesAfterEnv: ["<rootDir>/tests/setupAfterEnv.tests.cjs"],
+  resolver: "<rootDir>/tests/resolver.cjs",
 };

package.json

@@ -9,10 +9,12 @@
   "license": "MIT",
   "private": true,
   "sideEffects": false,
+  "type": "module",
   "scripts": {
-    "build": "remix build",
     "build-storybook": "storybook build --output-dir=public/storybook",
-    "dev": "remix dev",
+    "dev": "remix vite:dev",
+    "build": "remix vite:build",
+    "start": "remix-serve ./build/server/index.js",
     "dumpCmsToFile": "ts-node ./app/services/cms/dumpCmsToFile.ts dumpCmsToFile",
     "eslint": "eslint . --fix",
     "eslint:check": "eslint --cache .",
@@ -21,7 +23,6 @@
     "init": "lefthook install",
     "prettier": "prettier --write . --ignore-path .prettierignore",
     "prettier:check": "prettier --check . --ignore-path .prettierignore",
-    "start": "remix-serve build",
     "storybook": "storybook dev -p 6006",
     "test": "jest --testPathPattern=/tests/unit/ --maxWorkers=50%",
     "test:coverage": "jest --testPathPattern=/tests/unit/ --maxWorkers=50% --coverage --collectCoverageFrom='./app/**'",
@@ -117,7 +118,10 @@
     "tailwindcss": "^3.4.1",
     "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "vite": "^5.0.12",
+    "vite-plugin-cjs-interop": "^2.0.3",
+    "vite-tsconfig-paths": "^4.3.1"
   },
   "engines": {
     "node": ">=20"

tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "include": ["remix.env.d.ts", "app/", "tests/", "stories/"],
+  "include": ["env.d.ts", "app/", "tests/", "stories/"],
   "compilerOptions": {
     "preserveSymlinks": true,
     "incremental": true,
@@ -9,7 +9,8 @@
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "jsx": "react-jsx",
-    "moduleResolution": "node",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "target": "ES2019",
     "types": ["@testing-library/jest-dom", "node"],

vite.config.ts

@@ -0,0 +1,21 @@
+import { unstable_vitePlugin as remix } from "@remix-run/dev";
+import { installGlobals } from "@remix-run/node";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+import { cjsInterop } from "vite-plugin-cjs-interop";
+
+installGlobals();
+const isStorybook = process.argv[1]?.includes("storybook");
+
+export default defineConfig({
+  server: {
+    port: 3000,
+  },
+  plugins: [
+    !isStorybook && remix(),
+    tsconfigPaths(),
+    cjsInterop({
+      dependencies: ["react-dropzone", "@digitalservicebund/icons/*"],
+    }),
+  ],
+});