fix(deps): upgrade vite to v5 (#5285)

Co-authored-by: Espen Hovlandsdal <[email protected]>

dev/.bin/sanity

@@ -4,6 +4,7 @@ const path = require('path')
 
 require('esbuild-register/dist/node').register({
   target: `node${process.version.slice(1)}`,
+  supported: {'dynamic-import': true},
   jsx: 'automatic',
 })
 

dev/embedded-studio/package.json

@@ -19,6 +19,6 @@
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.4",
     "typescript": "5.7.2",
-    "vite": "^4.5.5"
+    "vite": "^5.4.11"
   }
 }

dev/test-studio/package.json

@@ -67,6 +67,6 @@
   "devDependencies": {
     "babel-plugin-react-compiler": "19.0.0-beta-37ed2a7-20241206",
     "chokidar": "^3.6.0",
-    "vite": "^4.5.5"
+    "vite": "^5.4.11"
   }
 }

package.json

@@ -125,7 +125,7 @@
     "@types/yargs": "^17.0.7",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
-    "@vitejs/plugin-react": "^4.3.3",
+    "@vitejs/plugin-react": "^4.3.4",
     "cac": "^6.7.12",
     "chalk": "^4.1.2",
     "depcheck": "^1.4.7",
@@ -167,7 +167,7 @@
     "semver": "^7.3.5",
     "turbo": "^2.3.0",
     "typescript": "5.7.2",
-    "vite": "^4.5.3",
+    "vite": "^5.4.11",
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^2.1.1",
     "yargs": "^17.3.0"

packages/@sanity/cli/package.json

@@ -127,7 +127,7 @@
     "semver": "^7.3.5",
     "semver-compare": "^1.0.0",
     "tar": "^6.1.11",
-    "vite": "^4.5.3",
+    "vite": "^5.4.11",
     "vitest": "^2.1.1",
     "which": "^2.0.2",
     "xdg-basedir": "^4.0.0"

packages/@sanity/cli/src/util/getCliConfig.ts

@@ -42,7 +42,7 @@ export async function getCliConfig(
 
   const {unregister} = __DEV__
     ? {unregister: () => undefined}
-    : require('esbuild-register/dist/node').register()
+    : require('esbuild-register/dist/node').register({supported: {'dynamic-import': true}})
 
   try {
     const v3Config = getSanityCliConfig(cwd)

packages/@sanity/cli/test/dev.test.ts

@@ -12,13 +12,19 @@ describeCliTest('CLI: `sanity dev`', () => {
   describe.each(studioVersions)('%s', (version) => {
     test('start', async () => {
       const testRunArgs = getTestRunArgs(version)
-      const expectedFiles = ['static/favicon.ico', 'favicon.ico', 'static/favicon.svg']
+      const basePath = '/config-base-path'
+      const expectedFiles = [
+        '/favicon.ico',
+        `${basePath}/static/favicon.ico`,
+        `${basePath}/static/favicon.svg`,
+      ]
 
       const {html: startHtml, fileHashes} = await testServerCommand({
         command: 'dev',
         port: testRunArgs.port,
         args: ['--port', `${testRunArgs.port}`],
         cwd: path.join(studiosPath, version),
+        basePath,
         expectedTitle: 'Sanity Studio',
         expectedFiles,
       })
@@ -29,11 +35,12 @@ describeCliTest('CLI: `sanity dev`', () => {
         expect(fileHashes.get(file)).not.toBe(null)
       }
 
-      if (fileHashes.has('static/favicon.svg')) {
-        const faviconHash = createHash('sha256')
+      // Check that the custom favicon is used if present, not the default one
+      if (fileHashes.has(`${basePath}/static/favicon.svg`)) {
+        const customFaviconHash = createHash('sha256')
           .update(await readFile(path.join(studiosPath, version, 'static', 'favicon.svg')))
           .digest('hex')
-        expect(fileHashes.get('static/favicon.svg')).toBe(faviconHash)
+        expect(fileHashes.get(`${basePath}/static/favicon.svg`)).toBe(customFaviconHash)
       }
     })
 
@@ -42,6 +49,7 @@ describeCliTest('CLI: `sanity dev`', () => {
       const {html: startHtml} = await testServerCommand({
         command: 'dev',
         port: testRunArgs.port - 1,
+        basePath: '/config-base-path',
         args: ['--port', `${testRunArgs.port - 1}`],
         cwd: path.join(studiosPath, `${version}-custom-document`),
         expectedTitle: 'Sanity Studio w/ custom document',
@@ -58,6 +66,7 @@ describeCliTest('CLI: `sanity dev`', () => {
       const {html: startHtml} = await testServerCommand({
         command: 'dev',
         port: testRunArgs.port - 2,
+        basePath: '/config-base-path',
         args: ['--port', `${testRunArgs.port - 2}`],
         env: {SANITY_ACTIVE_ENV: 'production'},
         cwd: path.join(studiosPath, `${version}-custom-document`),

packages/@sanity/cli/test/preview.test.ts

@@ -12,6 +12,7 @@ describeCliTest('CLI: `sanity preview`', () => {
       const {html: previewHtml, stderr} = await testServerCommand({
         command: 'preview',
         args: ['--port', '3330', '../../static'],
+        basePath: '/',
         port: 3330,
         cwd: path.join(studiosPath, 'v3'),
         expectedTitle: 'Sanity Static',
@@ -24,6 +25,7 @@ describeCliTest('CLI: `sanity preview`', () => {
       const {html: previewHtml, stdout} = await testServerCommand({
         command: 'preview',
         args: ['--port', '3456', '../../static-basepath'],
+        basePath: '/some-base-path',
         port: 3456,
         cwd: path.join(studiosPath, 'v3'),
         expectedTitle: 'Sanity Static, Base Pathed',
@@ -39,6 +41,7 @@ describeCliTest('CLI: `sanity preview`', () => {
       const {html: previewHtml} = await testServerCommand({
         command: 'preview',
         args: ['--port', '3457', '../../static-root-basepath'],
+        basePath: '/',
         port: 3457,
         cwd: path.join(studiosPath, 'v3'),
         expectedTitle: 'Sanity Static',
@@ -50,6 +53,7 @@ describeCliTest('CLI: `sanity preview`', () => {
       const {html: previewHtml} = await testServerCommand({
         command: 'start',
         args: ['--port', '3331', '../../static'],
+        basePath: '/',
         port: 3331,
         cwd: path.join(studiosPath, 'v3'),
         expectedTitle: 'Sanity Static',

packages/@sanity/cli/test/shared/devServer.ts

@@ -9,13 +9,15 @@ export async function testServerCommand({
   port,
   cwd,
   env,
+  basePath,
   expectedTitle,
   expectedFiles = [],
   args,
 }: {
   command: 'preview' | 'dev' | 'start'
   port: number
   cwd: string
+  basePath: string
   expectedTitle: string
   expectedFiles?: string[]
   env?: Record<string, string>
@@ -77,7 +79,7 @@ export async function testServerCommand({
       let res: ResponseData
       try {
         res = await Promise.race([
-          request(`http://localhost:${port}/`),
+          request(`http://localhost:${port}${basePath.replace(/\/$/, '')}/`),
           new Promise<ResponseData>((_, rejectTimeout) =>
             setTimeout(rejectTimeout, 500, new Error('Timed out trying to connect')),
           ),
@@ -97,7 +99,7 @@ export async function testServerCommand({
       for (const file of expectedFiles) {
         fileHashes.set(
           file,
-          await request(`http://localhost:${port}/${file}`)
+          await request(`http://localhost:${port}${file}`)
             .then(({body, statusCode}) =>
               statusCode === 200 ? createHash('sha256').update(body).digest('hex') : null,
             )

packages/@sanity/types/package.json

@@ -56,7 +56,7 @@
     "@repo/package.config": "workspace:*",
     "@repo/test-config": "workspace:*",
     "@sanity/insert-menu": "1.0.16",
-    "@vitejs/plugin-react": "^4.3.3",
+    "@vitejs/plugin-react": "^4.3.4",
     "react": "^18.3.1",
     "rimraf": "^5.0.10",
     "vitest": "^2.1.1"

packages/sanity/package.json

@@ -189,7 +189,7 @@
     "@types/speakingurl": "^13.0.3",
     "@types/tar-stream": "^3.1.3",
     "@types/use-sync-external-store": "^0.0.6",
-    "@vitejs/plugin-react": "^4.3.3",
+    "@vitejs/plugin-react": "^4.3.4",
     "archiver": "^7.0.0",
     "arrify": "^1.0.1",
     "async-mutex": "^0.4.1",
@@ -198,7 +198,6 @@
     "classnames": "^2.2.5",
     "color2k": "^2.0.0",
     "configstore": "^5.0.1",
-    "connect-history-api-fallback": "^1.6.0",
     "console-table-printer": "^2.11.1",
     "dataloader": "^2.1.0",
     "date-fns": "^2.26.1",
@@ -263,7 +262,7 @@
     "use-device-pixel-ratio": "^1.1.0",
     "use-hot-module-reload": "^2.0.0",
     "use-sync-external-store": "^1.2.0",
-    "vite": "^4.5.1",
+    "vite": "^5.4.11",
     "yargs": "^17.3.0"
   },
   "devDependencies": {
@@ -284,7 +283,6 @@
     "@types/archiver": "^6.0.2",
     "@types/arrify": "^1.0.4",
     "@types/configstore": "^5.0.1",
-    "@types/connect-history-api-fallback": "^1.5.2",
     "@types/debug": "^4.1.12",
     "@types/jsdom": "^20.0.0",
     "@types/lodash": "^4.17.7",

packages/sanity/src/_internal/cli/actions/exec/esbuild.ts

@@ -3,5 +3,6 @@ import {register} from 'esbuild-register/dist/node'
 if (!__DEV__) {
   register({
     target: `node${process.version.slice(1)}`,
+    supported: {'dynamic-import': true},
   })
 }

packages/sanity/src/_internal/cli/commands/migration/listMigrationsCommand.ts

@@ -78,6 +78,7 @@ export async function resolveMigrations(workDir: string): Promise<ResolvedMigrat
   if (!__DEV__) {
     unregister = register({
       target: `node${process.version.slice(1)}`,
+      supported: {'dynamic-import': true},
     }).unregister
   }
 

packages/sanity/src/_internal/cli/commands/migration/runMigrationCommand.ts

@@ -109,6 +109,7 @@ const runMigrationCommand: CliCommandDefinition<CreateFlags> = {
     if (!__DEV__) {
       register({
         target: `node${process.version.slice(1)}`,
+        supported: {'dynamic-import': true},
       })
     }
 

packages/sanity/src/_internal/cli/server/buildStaticFiles.ts

@@ -4,7 +4,6 @@ import path from 'node:path'
 
 import {type ReactCompilerConfig, type UserViteConfig} from '@sanity/cli'
 import readPkgUp from 'read-pkg-up'
-import {build} from 'vite'
 
 import {debug as serverDebug} from './debug'
 import {extendViteConfigWithUserConfig, finalizeViteConfig, getViteConfig} from './getViteConfig'
@@ -74,7 +73,7 @@ export async function buildStaticFiles(
       viteConfig,
       extendViteConfig,
     )
-    viteConfig = finalizeViteConfig(viteConfig)
+    viteConfig = await finalizeViteConfig(viteConfig)
   }
 
   // Copy files placed in /static to the built /static
@@ -88,6 +87,7 @@ export async function buildStaticFiles(
   await writeFavicons(faviconBasePath, staticPath)
 
   debug('Bundling using vite')
+  const {build} = await import('vite')
   const bundle = await build(viteConfig)
   debug('Bundling complete')
 

packages/sanity/src/_internal/cli/server/buildVendorDependencies.ts

@@ -3,7 +3,6 @@ import path from 'node:path'
 
 import resolveFrom from 'resolve-from'
 import semver from 'semver'
-import {build} from 'vite'
 
 import {createExternalFromImportMap} from './createExternalFromImportMap'
 
@@ -209,6 +208,7 @@ export async function buildVendorDependencies({
   // removes the `RollupWatcher` type
   type BuildResult = Exclude<Awaited<ReturnType<typeof build>>, {close: unknown}>
 
+  const {build} = await import('vite')
   // Use Vite to build the packages into the output directory
   let buildResult = (await build({
     // Define a custom cache directory so that sanity's vite cache

packages/sanity/src/_internal/cli/server/devServer.ts

@@ -1,6 +1,5 @@
 import {type ReactCompilerConfig, type UserViteConfig} from '@sanity/cli'
 import chalk from 'chalk'
-import {createServer} from 'vite'
 
 import {debug} from './debug'
 import {extendViteConfigWithUserConfig, getViteConfig} from './getViteConfig'
@@ -59,6 +58,7 @@ export async function startDevServer(options: DevServerOptions): Promise<DevServ
   }
 
   debug('Creating vite server')
+  const {createServer} = await import('vite')
   const server = await createServer(viteConfig)
   const info = server.config.logger.info
 

packages/sanity/src/_internal/cli/server/esbuild-register.js

@@ -1,3 +1,4 @@
 require('esbuild-register/dist/node').register({
+  supported: {'dynamic-import': true},
   jsx: 'automatic',
 })