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')
+})