feat: swap to tsup for builds

.github/workflows/test-matrix.yml

@@ -11,7 +11,7 @@ jobs:
       fail-fast: false # Continue other combos even if one fails
       matrix:
         node: [20, 22, 24]
-        react: ["18.2.0"] # TODO: Add "19.2.1" when ready
+        react: ["18.2.0", "19.2.3"]
 
     steps:
       - name: "Checkout"

packages/pages-components/package.json

@@ -35,8 +35,8 @@
   },
   "scripts": {
     "dev": "pnpm run storybook",
-    "build": "tsc && vite build",
-    "build:tsup": "tsup && pnpm build:css",
+    "build:vite": "tsc && vite build",
+    "build": "tsup && pnpm build:css",
     "build:css": "lightningcss --minify --bundle --targets \">= 0.25%\" src/index.css -o dist/index.css",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
@@ -49,8 +49,8 @@
   "peerDependencies": {
     "lexical": "~0.38.2",
     "mapbox-gl": "^2.9.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.2.0 || ^19.2.3",
+    "react-dom": "^18.2.0 || ^19.2.3"
   },
   "devDependencies": {
     "@playwright/test": "^1.55.1",

packages/pages-components/src/components/index.css

@@ -2,5 +2,3 @@
 @import "./analytics/debugger.css";
 @import "./hours/hoursTable.css";
 @import "./map/map.module.css";
-@import "./richText/default-styling.module.css";
-@import "./richText/lexical.module.css";

packages/pages-components/tsup.config.ts

@@ -17,25 +17,6 @@ export default defineConfig({
     ".tsx": "tsx",
   },
 
-  // A note for future maintainers:
-  // We cannot use tsup until we drop support for React 17. Building with Vite
-  // handles the React runtime automatically, adjusting imports to use the classic
-  // runtime when necessary.
-
-  // Swapping to tsup results in errors like:
-  // Error [ERR_MODULE_NOT_FOUND]: Cannot find module '../node_modules/react/jsx-runtime'
-  // imported from ../node_modules/@yext/pages-components/dist/index.js
-  // Did you mean to import "react/jsx-runtime.js"?
-
-  // We can get around this by setting "jsx":"react" in tsconfig.json (which builds with
-  // the classic runtime), and requires adding `import React from "react";` to every necessary .tsx file.
-  // With "jsx":"react-jsx", this import is not necessary. However, other dependencies
-  // are not automatically adjusted to the classic runtime like Vite does, leading to
-  // the same error but for other packages, such as lexical.
-
-  // Ideally we can switch to tsup because the bundle size is vastly smaller:
-  // ~710kB for Vite compared to ~85kB for tsup.
-
   // Production mode (strips dev internals)
   env: {
     NODE_ENV: "production",

packages/pages-components/vite.config.ts

@@ -14,7 +14,13 @@ export default defineConfig(() => ({
       formats: ["es"] as LibraryFormats[], // typescript is unhappy without this forced type definition
     },
     rollupOptions: {
-      external: ["react", "react-dom", "mapbox-gl"],
+      external: [
+        "react",
+        "react-dom",
+        "mapbox-gl",
+        "react/jsx-runtime",
+        "react/jsx-dev-runtime",
+      ],
       output: {
         globals: {
           react: "React",