test: migrate playgrounds to ESM (#13094)

.eslintrc.cjs

@@ -181,6 +181,21 @@ module.exports = defineConfig({
         '@typescript-eslint/no-empty-function': 'off',
       },
     },
+    {
+      files: ['playground/**'],
+      excludedFiles: [
+        'playground/ssr-resolve/**',
+        'playground/**/*{commonjs,cjs}*/**',
+        'playground/**/*{commonjs,cjs}*',
+        'playground/**/*dep*/**',
+        'playground/resolve/browser-module-field2/index.web.js',
+        'playground/resolve/browser-field/**',
+        'playground/tailwind/**', // blocked by https://github.com/postcss/postcss-load-config/issues/239
+      ],
+      rules: {
+        'import/no-commonjs': 'error',
+      },
+    },
     {
       files: [
         'playground/tsconfig-json/**',

playground/alias/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-alias",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/alias/vite.config.js

@@ -1,6 +1,9 @@
 import path from 'node:path'
+import module from 'node:module'
 import { defineConfig } from 'vite'
 
+const require = module.createRequire(import.meta.url)
+
 export default defineConfig({
   resolve: {
     alias: [

playground/assets-sanitize/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-assets-sanitize",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/assets/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-assets",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "debug": "node --inspect-brk ../../packages/vite/bin/vite",
     "dev": "vite",

playground/backend-integration/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-backend-integration",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/backend-integration/postcss.config.js

@@ -1,5 +1,10 @@
-// postcss.config.js
-module.exports = {
+import { fileURLToPath } from 'node:url'
+import { dirname } from 'node:path'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+export default {
   plugins: {
     tailwindcss: { config: __dirname + '/tailwind.config.js' },
   },

playground/backend-integration/tailwind.config.js

@@ -1,4 +1,6 @@
-module.exports = {
+/** @type {import('tailwindcss').Config} */
+
+export default {
   content: [__dirname + '/frontend/**/*.{css,html,ts,js}'],
   theme: {
     extend: {},

playground/build-old/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-build-old",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/cli/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-cli",
   "private": true,
   "version": "0.0.0",
+  "type": "commonjs",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/config/__tests__/load.spec.ts

@@ -20,7 +20,7 @@ it('loadConfigFromFile', async () => {
           4,
         ],
       ],
-      "moduleCondition": "require condition",
+      "moduleCondition": "import condition",
     }
   `)
 })

playground/config/packages/entry/package.json

@@ -1,5 +1,6 @@
 {
   "name": "@vite/test-config-entry",
+  "type": "module",
   "dependencies": {
     "@vite/test-config-plugin-module-condition": "link:../plugin-module-condition"
   }

playground/config/packages/plugin-module-condition/package.json

@@ -1,5 +1,6 @@
 {
   "name": "@vite/test-config-plugin-module-condition",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./index.d.ts",

playground/config/packages/siblings/foo.ts

@@ -1,3 +1,3 @@
-import { partition } from 'lodash'
+import lodash from 'lodash'
 
-export const array = partition([1, 2, 3, 4], (n) => n % 2)
+export const array = lodash.partition([1, 2, 3, 4], (n) => n % 2)

playground/config/packages/siblings/package.json

@@ -1,5 +1,6 @@
 {
   "name": "@vite/test-config-sibling",
+  "type": "module",
   "devDependencies": {
     "@types/lodash": "^4.14.194",
     "lodash": "^4.17.21"

playground/css-codesplit-cjs/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-css-codesplit-cjs",
   "private": true,
   "version": "0.0.0",
+  "type": "commonjs",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/css-codesplit/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-css-codesplit",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/css-dynamic-import/package.json

@@ -1,5 +1,6 @@
 {
   "name": "@vitejs/test-css-dynamic-import",
   "private": true,
+  "type": "module",
   "version": "0.0.0"
 }

playground/css-sourcemap/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-css-sourcemap",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/css/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-css",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/css/postcss-caching/blue-app/package.json

@@ -2,6 +2,7 @@
   "name": "blue-app",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/css/postcss-caching/blue-app/postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: [replacePinkWithBlue],
 }
 

playground/css/postcss-caching/green-app/package.json

@@ -2,6 +2,7 @@
   "name": "green-app",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/css/postcss-caching/green-app/postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: [replacePinkWithGreen],
 }
 

playground/css/postcss.config.js

@@ -1,11 +1,12 @@
-module.exports = {
-  plugins: [require('postcss-nested'), testDirDep, testSourceInput],
-}
+import fs from 'node:fs'
+import path from 'node:path'
+import glob from 'fast-glob'
+import { normalizePath } from 'vite'
+import postcssNested from 'postcss-nested'
 
-const fs = require('node:fs')
-const path = require('node:path')
-const glob = require('fast-glob')
-const { normalizePath } = require('vite')
+export default {
+  plugins: [postcssNested, testDirDep, testSourceInput],
+}
 
 /**
  * A plugin for testing the `dir-dependency` message handling.

playground/data-uri/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-data-uri",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/define/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-define",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/dynamic-import/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-dynamic-import",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/dynamic-import/vite.config.js

@@ -1,8 +1,8 @@
 import fs from 'node:fs'
 import path from 'node:path'
-import vite from 'vite'
+import { defineConfig } from 'vite'
 
-export default vite.defineConfig({
+export default defineConfig({
   plugins: [
     {
       name: 'copy',

playground/env-nested/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-env-nested",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/env/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-env",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "VITE_INLINE=inline-serve vite",
     "build": "VITE_INLINE=inline-build vite build",

playground/extensions/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-extensions",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/external/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-external",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/fs-serve/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-fs-serve",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite root",
     "build": "vite build root",

playground/glob-import/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-import-context",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/hmr/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-hmr",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/hmr/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "include": ["."],
-  "exclude": ["**/dist/**", "**/__tests__/**"],
-  "compilerOptions": {
-    "target": "ES2020",
-    "module": "ESNext",
-    "outDir": "dist",
-    "allowJs": true,
-    "esModuleInterop": true,
-    "moduleResolution": "bundler",
-    "baseUrl": ".",
-    "jsx": "preserve",
-    "types": ["vite/client", "node"]
-  }
-}

playground/html/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-html",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/import-assertion/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-import-assertion",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/js-sourcemap/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-js-sourcemap",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/json/__tests__/csr/json.spec.ts

@@ -1,10 +1,10 @@
 import { readFileSync } from 'node:fs'
 import { expect, test } from 'vitest'
-import testJson from '../test.json'
-import hmrJson from '../hmr.json'
+import deepJson from 'vue/package.json'
+import testJson from '../../test.json'
+import hmrJson from '../../hmr.json'
 import { editFile, isBuild, isServe, page, untilUpdated } from '~utils'
 
-const deepJson = require('vue/package.json')
 const stringified = JSON.stringify(testJson)
 const deepStringified = JSON.stringify(deepJson)
 const hmrStringified = JSON.stringify(hmrJson)
@@ -45,7 +45,7 @@ test('?url', async () => {
 
 test('?raw', async () => {
   expect(await page.textContent('.raw')).toBe(
-    readFileSync(require.resolve('../test.json'), 'utf-8'),
+    readFileSync(require.resolve('../../test.json'), 'utf-8'),
   )
 })
 

playground/json/__tests__/ssr/json.spec.ts

@@ -0,0 +1,20 @@
+import { beforeEach, test } from 'vitest'
+import { port } from './serve'
+import { page, untilUpdated } from '~utils'
+
+const url = `http://localhost:${port}`
+
+beforeEach(async () => {
+  await page.goto(url)
+})
+
+test('load json module', async () => {
+  await untilUpdated(
+    () => page.textContent('.fetch-json-module pre'),
+    'export default JSON.parse("{\\n  \\"hello\\": \\"hi\\"\\n}\\n")',
+  )
+})
+
+test('fs json', async () => {
+  await untilUpdated(() => page.textContent('.fetch-json-fs pre'), '61')
+})

playground/json/__tests__/ssr/serve.ts

@@ -0,0 +1,35 @@
+// this is automatically detected by playground/vitestSetup.ts and will replace
+// the default e2e test serve behavior
+
+import path from 'node:path'
+import kill from 'kill-port'
+import { ports, rootDir } from '~utils'
+
+export const port = ports.json
+
+export async function serve(): Promise<{ close(): Promise<void> }> {
+  await kill(port)
+
+  const { createServer } = await import(path.resolve(rootDir, 'server.js'))
+  const { app, vite } = await createServer(rootDir)
+
+  return new Promise((resolve, reject) => {
+    try {
+      const server = app.listen(port, () => {
+        resolve({
+          // for test teardown
+          async close() {
+            await new Promise((resolve) => {
+              server.close(resolve)
+            })
+            if (vite) {
+              await vite.close()
+            }
+          },
+        })
+      })
+    } catch (e) {
+      reject(e)
+    }
+  })
+}

playground/json/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-json",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -12,8 +13,8 @@
     "debug:ssr": "node --inspect-brk server"
   },
   "devDependencies": {
-    "express": "^4.18.2",
     "@vitejs/test-json-module": "file:./json-module",
+    "express": "^4.18.2",
     "vue": "^3.2.47"
   }
 }

playground/json/server.js

@@ -1,21 +1,22 @@
 // @ts-check
-const fs = require('node:fs')
-const path = require('node:path')
-const express = require('express')
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import express from 'express'
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
 const isTest = process.env.VITEST
 
-async function createServer(
-  root = process.cwd(),
-  isProd = process.env.NODE_ENV === 'production',
-) {
+export async function createServer(root = process.cwd()) {
   const resolve = (p) => path.resolve(__dirname, p)
   const app = express()
 
   /**
    * @type {import('vite').ViteDevServer}
    */
-  const vite = await require('vite').createServer({
+  const vite = await (
+    await import('vite')
+  ).createServer({
     root,
     logLevel: isTest ? 'error' : 'info',
     server: {
@@ -50,13 +51,16 @@ async function createServer(
 
       if (url === '/json-fs') {
         console.time('transform module')
-        const source = fs.readFileSync('./test.json', { encoding: 'utf-8' })
+        const source = fs.readFileSync(path.resolve(__dirname, './test.json'), {
+          encoding: 'utf-8',
+        })
         const json = await vite.ssrTransform(
           `export default ${source}`,
           null,
           './output.json',
         )
         console.timeEnd('transform module')
+        // @ts-expect-error ignore in test
         res.status(200).end(String(json.code.length))
         return
       }
@@ -83,6 +87,3 @@ if (!isTest) {
     }),
   )
 }
-
-// for test use
-exports.createServer = createServer

playground/legacy/__tests__/client-and-ssr/serve.ts

@@ -34,7 +34,7 @@ export async function serve(): Promise<{ close(): Promise<void> }> {
 
   app.use('/', async (_req, res) => {
     const { render } = await import(
-      path.resolve(rootDir, './dist/server/entry-server-sequential.mjs')
+      path.resolve(rootDir, './dist/server/entry-server-sequential.js')
     )
     const html = await render()
     res.status(200).set({ 'Content-Type': 'text/html' }).end(html)

playground/legacy/__tests__/ssr/serve.ts

@@ -22,7 +22,7 @@ export async function serve(): Promise<{ close(): Promise<void> }> {
 
   app.use('/', async (_req, res) => {
     const { render } = await import(
-      path.resolve(rootDir, './dist/server/entry-server.mjs')
+      path.resolve(rootDir, './dist/server/entry-server.js')
     )
     const html = await render()
     res.status(200).set({ 'Content-Type': 'text/html' }).end(html)

playground/legacy/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-legacy",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build --debug legacy",

playground/lib/__tests__/lib.spec.ts

@@ -15,8 +15,10 @@ describe.runIf(isBuild)('build', () => {
 
   test('umd', async () => {
     expect(await page.textContent('.umd')).toBe('It works')
-    const code = readFile('dist/my-lib-custom-filename.umd.js')
-    const noMinifyCode = readFile('dist/nominify/my-lib-custom-filename.umd.js')
+    const code = readFile('dist/my-lib-custom-filename.umd.cjs')
+    const noMinifyCode = readFile(
+      'dist/nominify/my-lib-custom-filename.umd.cjs',
+    )
     // esbuild helpers are injected inside of the UMD wrapper
     expect(code).toMatch(/^\(function\(/)
     expect(noMinifyCode).toMatch(
@@ -46,7 +48,7 @@ describe.runIf(isBuild)('build', () => {
     expect(code).not.toMatch('__vitePreload')
 
     // Test that library chunks are hashed
-    expect(code).toMatch(/await import\("\.\/message-[a-z\d]{8}.mjs"\)/)
+    expect(code).toMatch(/await import\("\.\/message-[a-z\d]{8}.js"\)/)
   })
 
   test('@import hoist', async () => {
@@ -57,9 +59,9 @@ describe.runIf(isBuild)('build', () => {
   })
 
   test('preserve process.env', () => {
-    const es = readFile('dist/my-lib-custom-filename.mjs')
+    const es = readFile('dist/my-lib-custom-filename.js')
     const iife = readFile('dist/my-lib-custom-filename.iife.js')
-    const umd = readFile('dist/my-lib-custom-filename.umd.js')
+    const umd = readFile('dist/my-lib-custom-filename.umd.cjs')
     expect(es).toMatch('process.env.NODE_ENV')
     expect(iife).toMatch('process.env.NODE_ENV')
     expect(umd).toMatch('process.env.NODE_ENV')

playground/lib/index.dist.html

@@ -14,7 +14,7 @@
 </script>
 
 <script type="module">
-  import myLib from './my-lib-custom-filename.mjs'
+  import myLib from './my-lib-custom-filename.js'
 
   myLib('.es')
 </script>
@@ -25,7 +25,7 @@
   message('.dynamic-import-message')
 </script>
 
-<script src="./my-lib-custom-filename.umd.js"></script>
+<script src="./my-lib-custom-filename.umd.cjs"></script>
 <script>
   MyLib('.umd')
   delete window.MyLib // so that it won't affect iife

playground/lib/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-my-lib",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/minify/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-minify",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/multiple-entrypoints/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-multiple-entrypoints",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/nested-deps/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-nested-deps",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/object-hooks/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-object-hooks",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/optimize-deps-no-discovery/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-optimize-deps-no-discovery",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/optimize-deps/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@vitejs/test-optimize-deps",
   "private": true,
+  "type": "module",
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",

playground/optimize-deps/vite.config.js

@@ -1,5 +1,7 @@
 import fs from 'node:fs'
+import module from 'node:module'
 import { defineConfig } from 'vite'
+const require = module.createRequire(import.meta.url)
 
 // Overriding the NODE_ENV set by vitest
 process.env.NODE_ENV = ''

playground/optimize-missing-deps/__test__/optimize-missing-deps.spec.ts

@@ -1,4 +1,3 @@
-import { platform } from 'node:os'
 import fetch from 'node-fetch'
 import { expect, test } from 'vitest'
 import { port } from './serve'
@@ -6,8 +5,7 @@ import { page, untilUpdated } from '~utils'
 
 const url = `http://localhost:${port}/`
 
-// TODO: on macOS this test causing the process exists for some reason
-test.skipIf(platform() === 'darwin')('optimize', async () => {
+test('optimize', async () => {
   await page.goto(url)
   // reload page to get optimized missing deps
   await page.reload()

playground/optimize-missing-deps/__test__/serve.ts

@@ -7,7 +7,7 @@ import { hmrPorts, ports, rootDir } from '~utils'
 export const port = ports['optimize-missing-deps']
 
 export async function serve(): Promise<{ close(): Promise<void> }> {
-  const { createServer } = require(path.resolve(rootDir, 'server.js'))
+  const { createServer } = await import(path.resolve(rootDir, 'server.js'))
   const { app, vite } = await createServer(
     rootDir,
     hmrPorts['optimize-missing-deps'],

playground/optimize-missing-deps/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-optimize-missing-deps",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "node server"
   },

playground/optimize-missing-deps/server.js

@@ -1,11 +1,11 @@
 // @ts-check
-const fs = require('node:fs')
-const path = require('node:path')
-const express = require('express')
+import fs from 'node:fs'
+import path from 'node:path'
+import express from 'express'
 
 const isTest = process.env.VITEST
 
-async function createServer(root = process.cwd(), hmrPort) {
+export async function createServer(root = process.cwd(), hmrPort) {
   const resolve = (p) => path.resolve(__dirname, p)
 
   const app = express()
@@ -13,7 +13,9 @@ async function createServer(root = process.cwd(), hmrPort) {
   /**
    * @type {import('vite').ViteDevServer}
    */
-  const vite = await require('vite').createServer({
+  const vite = await (
+    await import('vite')
+  ).createServer({
     root,
     logLevel: isTest ? 'error' : 'info',
     server: {
@@ -62,6 +64,3 @@ if (!isTest) {
     }),
   )
 }
-
-// for test use
-exports.createServer = createServer

playground/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@vitejs/vite-playground",
   "private": true,
+  "type": "module",
   "version": "1.0.0",
   "scripts": {
     "typecheck": "tsc --noEmit"

playground/preload/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-preload",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/preserve-symlinks/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-preserve-symlinks",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite --force",
     "build": "vite build",

playground/resolve-config/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-resolve-config",
   "private": true,
   "version": "0.0.0",
+  "type": "commonjs",
   "scripts": {
     "dev": "vite --force",
     "build": "vite build",

playground/resolve-linked/package.json

@@ -2,5 +2,6 @@
   "name": "@vitejs/test-resolve-linked",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "main": "src/index.js"
 }

playground/resolve/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-resolve",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/resolve/vite.config.js

@@ -1,6 +1,6 @@
 import path from 'node:path'
 import { defineConfig, normalizePath } from 'vite'
-import { a } from './config-dep'
+import { a } from './config-dep.cjs'
 
 const virtualFile = '@virtual-file'
 const virtualId = '\0' + virtualFile

playground/ssr-deps/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@vitejs/test-ssr-deps",
   "private": true,
-  "version": "0.0.0",
   "type": "module",
+  "version": "0.0.0",
   "scripts": {
     "dev": "node server",
     "serve": "NODE_ENV=production node server",

playground/ssr-resolve/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-ssr-resolve",
   "private": true,
   "version": "0.0.0",
+  "type": "commonjs",
   "scripts": {
     "build": "vite build",
     "debug": "node --inspect-brk ../../packages/vite/bin/vite build"

playground/tailwind-sourcemap/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-tailwind-sourcemap",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/tailwind-sourcemap/postcss.config.js

@@ -1,4 +1,10 @@
-module.exports = {
+import { fileURLToPath } from 'node:url'
+import { dirname } from 'node:path'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+export default {
   plugins: {
     tailwindcss: { config: __dirname + '/tailwind.config.js' },
   },

playground/tailwind-sourcemap/tailwind.config.js

@@ -1,4 +1,6 @@
-module.exports = {
+/** @type {import('tailwindcss').Config} */
+
+export default {
   content: ['./index.html'],
   theme: {
     extend: {},

playground/tailwind/tailwind.config.js

@@ -1,3 +1,5 @@
+/** @type {import('tailwindcss').Config} */
+
 module.exports = {
   content: [
     // Before editing this section, make sure no paths are matching with `/src/App.vue`

playground/test-utils.ts

@@ -18,6 +18,7 @@ export * from './vitestSetup'
 export const ports = {
   cli: 9510,
   'cli-module': 9511,
+  json: 9512,
   'legacy/ssr': 9520,
   lib: 9521,
   'optimize-missing-deps': 9522,

playground/transform-plugin/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-transform-plugin",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/tsconfig-json-load-error/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-tsconfig-json-load-error",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/tsconfig-json/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-tsconfig-json",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/vitestSetup.ts

@@ -63,7 +63,7 @@ export let testDir: string
 export let testName: string
 /**
  * current test using vite inline config
- * when using server.js is not possible to get the config
+ * when using serve.[jt]s is not possible to get the config
  */
 export let viteConfig: InlineConfig | undefined
 

playground/wasm/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-wasm",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

playground/worker/package.json

@@ -2,6 +2,7 @@
   "name": "@vitejs/test-worker",
   "private": true,
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "dev": "vite --config ./vite.config-iife.js",
     "build": "vite --config ./vite.config-iife.js build",

playground/worker/vite.config-es.js

@@ -1,7 +1,7 @@
-import vite from 'vite'
+import { defineConfig } from 'vite'
 import workerPluginTestPlugin from './worker-plugin-test-plugin'
 
-export default vite.defineConfig({
+export default defineConfig({
   base: '/es/',
   resolve: {
     alias: {

playground/worker/vite.config-iife.js

@@ -1,7 +1,7 @@
-import vite from 'vite'
+import { defineConfig } from 'vite'
 import workerPluginTestPlugin from './worker-plugin-test-plugin'
 
-export default vite.defineConfig({
+export default defineConfig({
   base: '/iife/',
   resolve: {
     alias: {

playground/worker/vite.config-relative-base-iife.js

@@ -1,7 +1,7 @@
-import vite from 'vite'
+import { defineConfig } from 'vite'
 import workerPluginTestPlugin from './worker-plugin-test-plugin'
 
-export default vite.defineConfig({
+export default defineConfig({
   base: './',
   resolve: {
     alias: {

playground/worker/vite.config-relative-base.js

@@ -1,7 +1,7 @@
-import vite from 'vite'
+import { defineConfig } from 'vite'
 import workerPluginTestPlugin from './worker-plugin-test-plugin'
 
-export default vite.defineConfig({
+export default defineConfig({
   base: './',
   resolve: {
     alias: {

playground/worker/vite.config-sourcemap.js

@@ -1,4 +1,4 @@
-import vite from 'vite'
+import { defineConfig } from 'vite'
 import workerPluginTestPlugin from './worker-plugin-test-plugin'
 
 /** @param {boolean | 'inline' | 'hidden' | 'sourcemap'} sourcemap */
@@ -15,7 +15,7 @@ export default (sourcemap) => {
   const typeName =
     typeof sourcemap === 'boolean' ? 'sourcemap' : 'sourcemap-' + sourcemap
 
-  return vite.defineConfig({
+  return defineConfig({
     base: `/iife-${typeName}/`,
     resolve: {
       alias: {

playground/worker/worker-plugin-test-plugin.js

@@ -1,4 +1,4 @@
-module.exports = () => ({
+export default () => ({
   name: 'plugin-for-worker',
   transform(code, id) {
     if (id.includes('worker/modules/test-plugin.js')) {