chore(deps): update vite to 5.3

devTools/tsconfigs/tsconfig.base.json

@@ -27,6 +27,7 @@
         "jsx": "react",
 
         "experimentalDecorators": true,
+        "useDefineForClassFields": false,
         "emitDecoratorMetadata": false,
 
         "isolatedModules": true

package.json

@@ -211,7 +211,7 @@
         "@types/workerpool": "^6.1.0",
         "@typescript-eslint/eslint-plugin": "^7.2.0",
         "@typescript-eslint/parser": "^7.2.0",
-        "@vitejs/plugin-react": "^4.1.0",
+        "@vitejs/plugin-react": "^4.3.1",
         "@yarnpkg/types": "^4.0.0",
         "bundlewatch": "^0.3.3",
         "cypress": "9.3.1",
@@ -231,10 +231,9 @@
         "sass": "^1.69.5",
         "tmex": "^1.0.8",
         "topojson-server": "^3.0.1",
-        "tsx": "^4.10.2",
-        "vite": "^4.4.10",
-        "vite-plugin-checker": "^0.6.4",
-        "vite-plugin-warmup": "^0.1.0",
+        "tsx": "^4.16.2",
+        "vite": "^5.3.4",
+        "vite-plugin-checker": "^0.7.2",
         "wrangler": "^3.61.0"
     },
     "prettier": {

packages/@ourworldindata/grapher/tsconfig.json

@@ -1,4 +1,5 @@
 {
+    "extends": "../../../devTools/tsconfigs/tsconfig.base.json",
     "references": [
         { "path": "./tsconfig.src.json" },
         { "path": "./tsconfig.test.json" }

site/viteUtils.tsx

@@ -7,7 +7,7 @@ import {
     VITE_PREVIEW,
 } from "../settings/serverSettings.js"
 import { POLYFILL_URL } from "./SiteConstants.js"
-import type { Manifest } from "vite"
+import type { Manifest, ManifestChunk } from "vite"
 import { sortBy } from "@ourworldindata/utils"
 import urljoin from "url-join"
 
@@ -97,13 +97,13 @@ export const createTagsForManifestEntry = (
     const createTags = (entry: string): React.ReactElement[] => {
         const manifestEntry =
             Object.values(manifest).find((e) => e.file === entry) ??
-            manifest[entry]
+            (manifest[entry] as ManifestChunk | undefined)
         let assets = [] as React.ReactElement[]
 
-        if (!manifestEntry)
+        if (!manifestEntry && !entry.endsWith(".css"))
             throw new Error(`Could not find manifest entry for ${entry}`)
 
-        const assetUrl = urljoin(assetBaseUrl, manifestEntry.file)
+        const assetUrl = urljoin(assetBaseUrl, manifestEntry?.file ?? entry)
 
         if (entry.endsWith(".css")) {
             assets = [
@@ -118,7 +118,7 @@ export const createTagsForManifestEntry = (
             ]
         } else if (entry.match(/\.[cm]?(js|jsx|ts|tsx)$/)) {
             // explicitly reference the entry; preload it and its dependencies
-            if (manifestEntry.isEntry) {
+            if (manifestEntry?.isEntry) {
                 assets = [
                     ...assets,
                     <script key={entry} type="module" src={assetUrl} />,
@@ -137,10 +137,10 @@ export const createTagsForManifestEntry = (
 
         // we need to recurse into both the module imports and imported css files, and add tags for them as well
         // also, we need to take care of the order here, so the imported file is loaded before the importing file
-        if (manifestEntry.css) {
+        if (manifestEntry?.css) {
             assets = [...manifestEntry.css.flatMap(createTags), ...assets]
         }
-        if (manifestEntry.imports) {
+        if (manifestEntry?.imports) {
             assets = [...manifestEntry.imports.flatMap(createTags), ...assets]
         }
         return assets
@@ -158,7 +158,7 @@ export const createTagsForManifestEntry = (
 const prodAssets = (entrypoint: ViteEntryPoint, baseUrl: string): Assets => {
     const baseDir = findBaseDir(__dirname)
     const entrypointInfo = VITE_ENTRYPOINT_INFO[entrypoint]
-    const manifestPath = `${baseDir}/dist/${entrypointInfo.outDir}/manifest.json`
+    const manifestPath = `${baseDir}/dist/${entrypointInfo.outDir}/.vite/manifest.json`
     let manifest
     try {
         manifest = fs.readJsonSync(manifestPath) as Manifest

vite.config-common.mts

@@ -1,7 +1,6 @@
 import { defineConfig } from "vite"
 import pluginReact from "@vitejs/plugin-react"
 import pluginChecker from "vite-plugin-checker"
-import { warmup as pluginWarmup } from "vite-plugin-warmup"
 import * as clientSettings from "./settings/clientSettings.js"
 import {
     VITE_ASSET_SITE_ENTRY,
@@ -37,7 +36,7 @@ export const defineViteConfigForEntrypoint = (entrypoint: ViteEntryPoint) => {
             devSourcemap: true,
         },
         define: {
-            // Replace all clientSettings with their respective values, i.e. assign e.g. BUGNSAG_API_KEY to process.env.BUGNSAG_API_KEY
+            // Replace all clientSettings with their respective values, i.e. assign e.g. BUGSNAG_API_KEY to process.env.BUGSNAG_API_KEY
             // it's important to note that we only expose values that are present in the clientSettings file - not any other things that are stored in .env
             ...Object.fromEntries(
                 Object.entries(clientSettings).map(([key, value]) => [
@@ -76,10 +75,10 @@ export const defineViteConfigForEntrypoint = (entrypoint: ViteEntryPoint) => {
                     tsconfigPath: "tsconfig.vite-checker.json",
                 },
             }),
-            pluginWarmup({ clientFiles: [VITE_ASSET_SITE_ENTRY] }),
         ],
         server: {
             port: 8090,
+            warmup: { clientFiles: [VITE_ASSET_SITE_ENTRY] },
         },
         preview: {
             port: 8090,