Upgrade deps

client/eslint.config.js

@@ -0,0 +1,50 @@
+/* eslint-env node */
+import globals from 'globals';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import rootConfig from '../eslint.config.js';
+import tsEslintParser from '@typescript-eslint/parser';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+
+// mimic CommonJS variables -- not needed if using CommonJS
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default [
+  ...rootConfig,
+  {
+    // Note: there should be no other properties in this object
+    ignores: ['src/server-types.d.ts', 'eslint.config.js', 'postcss.config.js'],
+  },
+  {
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'module',
+      globals: { ...globals.browser },
+      parser: tsEslintParser,
+      parserOptions: {
+        project: './tsconfig.eslint.json',
+        tsconfigRootDir: __dirname,
+      },
+    },
+    plugins: { 'react-hooks': reactHooks, 'react-refresh': reactRefresh },
+    rules: {
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+      'no-restricted-imports': [
+        'error',
+        {
+          paths: [
+            {
+              name: '@sentry/react',
+              message: '@sentry/react should only be lazy imported',
+            },
+          ],
+        },
+      ],
+    },
+  },
+];

client/package.json

@@ -16,26 +16,26 @@
     "typecheck": "pnpm exec tsc --build"
   },
   "dependencies": {
-    "@sentry/react": "^8.25.0",
-    "@sentry/vite-plugin": "^2.22.0",
-    "@tanstack/react-query": "^5.50.1",
+    "@sentry/react": "^9.16.1",
+    "@sentry/vite-plugin": "^3.4.0",
+    "@tanstack/react-query": "^5.75.5",
     "classnames": "^2.5.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^16.0.0",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react-swc": "^3.7.0",
-    "autoprefixer": "^10.4.19",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.7",
-    "jsdom": "^24.1.0",
-    "postcss": "^8.4.39",
-    "tailwindcss": "^3.4.4",
-    "vite": "^5.3.2",
-    "vitest": "^2.0.2"
+    "@tailwindcss/postcss": "^4.1.5",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.1.3",
+    "@types/react-dom": "^19.1.3",
+    "@vitejs/plugin-react-swc": "^3.9.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "jsdom": "^26.1.0",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^4.1.5",
+    "vite": "^6.3.5",
+    "vitest": "^3.1.3"
   }
 }

client/postcss.config.js

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };

client/src/components/ui.modal.tsx

@@ -52,16 +52,18 @@ export const Modal = ({
   return (
     <div
       className={classNames(
-        'fixed inset-0 bg-black bg-opacity-70 flex justify-center items-center z-50',
-        isOpen ? 'animate-fadeIn' : 'animate-fadeOut',
+        'fixed inset-0 bg-black/70 flex justify-center items-center',
+        isOpen ? 'animate-(--animate-fade-in)' : 'animate-(--animate-fade-out)',
       )}
       onClick={onClose}
       onAnimationEnd={handleAnimationEnd}
     >
       <div
         className={classNames(
-          'rounded-lg p-6 m-4',
-          isOpen ? 'animate-scaleIn' : 'animate-scaleOut',
+          'relative rounded-lg p-6 m-4',
+          isOpen
+            ? 'animate-(--animate-scale-in)'
+            : 'animate-(--animate-scale-out)',
           className ?? '',
         )}
         onClick={(e) => e.stopPropagation()}

client/src/example.tsx

@@ -21,11 +21,11 @@ const useServerOkQuery = () => {
           if (!res.ok) {
             throw res;
           }
-          return res.json();
+          return res.text();
         })
         .catch((error) => {
           captureException(error);
-          return null;
+          throw error;
         });
     },
   });

client/src/index.css

@@ -1,6 +1,68 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@theme {
+  --animate-fade-in: fadeIn 0.3s ease-out forwards;
+  --animate-fade-out: fadeOut 0.3s ease-out forwards;
+  --animate-scale-in: scaleIn 0.3s ease-out forwards;
+  --animate-scale-out: scaleOut 0.3s ease-out forwards;
+
+  --font-sans: Ubuntu, sans-serif;
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  @keyframes fadeOut {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  @keyframes scaleIn {
+    0% {
+      transform: scale(0.95);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+  @keyframes scaleOut {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    100% {
+      transform: scale(0.95);
+      opacity: 0;
+    }
+  }
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
 
 @layer base {
   html {

e2e/eslint.config.js

@@ -0,0 +1,30 @@
+/* eslint-env node */
+import path from 'path';
+import { fileURLToPath } from 'url';
+import globals from 'globals';
+import rootConfig from '../eslint.config.js';
+import tsEslintParser from '@typescript-eslint/parser';
+
+// mimic CommonJS variables -- not needed if using CommonJS
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default [
+  ...rootConfig,
+  {
+    // Note: there should be no other properties in this object
+    ignores: ['eslint.config.js'],
+  },
+  {
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'module',
+      globals: { ...globals.browser },
+      parser: tsEslintParser,
+      parserOptions: {
+        project: './tsconfig.eslint.json',
+        tsconfigRootDir: __dirname,
+      },
+    },
+  },
+];

e2e/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@create-react-spa-cloudflare/e2e",
+  "type": "module",
+  "version": "0.0.0",
+  "scripts": {
+    "lint": "eslint .",
+    "typecheck": "pnpm exec tsc --build"
+  }
+}