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/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__/json.spec.ts → 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')
+})