chore!: update rollup commonjs plugin to v22 (#8743)

Co-authored-by: sapphi-red <green@sapphi.red>

package.json

@@ -20,6 +20,7 @@
     "test": "run-s test-unit test-serve test-build",
     "test-serve": "vitest run -c vitest.config.e2e.ts",
     "test-build": "cross-env VITE_TEST_BUILD=1 vitest run -c vitest.config.e2e.ts",
+    "test-build-legacy-cjs": "cross-env VITE_TEST_LEGACY_CJS_PLUGIN=1 pnpm test-build",
     "test-unit": "vitest run",
     "test-docs": "pnpm run docs-build",
     "debug-serve": "cross-env VITE_DEBUG_SERVE=1 vitest run -c vitest.config.e2e.ts",

packages/vite/package.json

@@ -71,7 +71,7 @@
     "@babel/types": "^7.18.4",
     "@jridgewell/trace-mapping": "^0.3.13",
     "@rollup/plugin-alias": "^3.1.9",
-    "@rollup/plugin-commonjs": "^21.1.0",
+    "@rollup/plugin-commonjs": "^22.0.1",
     "@rollup/plugin-dynamic-import-vars": "^1.4.3",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "13.3.0",

packages/vite/rollup.config.ts

@@ -1,6 +1,7 @@
 /* eslint-disable no-restricted-globals */
 import fs from 'node:fs'
 import path from 'node:path'
+import url from 'node:url'
 import nodeResolve from '@rollup/plugin-node-resolve'
 import typescript from '@rollup/plugin-typescript'
 import commonjs from '@rollup/plugin-commonjs'
@@ -134,15 +135,13 @@ function createNodePlugins(
         },
         // postcss-load-config calls require after register ts-node
         'postcss-load-config/src/index.js': {
-          src: `require(configFile)`,
-          replacement: `__require(configFile)`
-        },
-        // @rollup/plugin-commonjs uses incorrect esm
-        '@rollup/plugin-commonjs/dist/index.es.js': {
-          src: `import { sync } from 'resolve';`,
-          replacement: `import __resolve from 'resolve';const sync = __resolve.sync;`
+          pattern: /require(?=\((configFile|'ts-node')\))/g,
+          replacement: `eval('require')`
         }
       }),
+
+    buildTimeImportMetaUrl(),
+
     commonjs({
       extensions: ['.js'],
       // Optional peer deps of ws. Native deps that are mostly for performance.
@@ -287,6 +286,21 @@ function shimDepsPlugin(deps: Record<string, ShimOptions>): Plugin {
   }
 }
 
+// The use of `import.meta.url` in source code is not reliable after bundling.
+// For example, it is affected by the `isEntry` bug brought in by the Rollup CJS plugin
+// https://github.com/rollup/plugins/pull/1180
+// The better way is to resolve it at build time.
+function buildTimeImportMetaUrl(): Plugin {
+  return {
+    name: 'buildTimeImportMetaUrl',
+    resolveImportMeta: (property, chunk) => {
+      if (property === 'url') {
+        return `'${url.pathToFileURL(chunk.moduleId).href}'`
+      }
+    }
+  }
+}
+
 function licensePlugin() {
   return license({
     thirdParty(dependencies) {

packages/vite/src/node/config.ts

@@ -594,6 +594,13 @@ export async function resolveConfig(
   config = mergeConfig(config, externalConfigCompat(config, configEnv))
   const optimizeDeps = config.optimizeDeps || {}
 
+  if (process.env.VITE_TEST_LEGACY_CJS_PLUGIN) {
+    config.legacy = {
+      ...config.legacy,
+      buildRollupPluginCommonjs: true
+    }
+  }
+
   const BASE_URL = resolvedBase
 
   const resolved: ResolvedConfig = {

playground/external/vite.config.js

@@ -5,6 +5,9 @@ export default defineConfig({
     minify: false,
     rollupOptions: {
       external: ['vue']
+    },
+    commonjsOptions: {
+      esmExternals: ['vue']
     }
   }
 })

playground/optimize-deps/__tests__/optimize-deps.spec.ts

@@ -103,11 +103,16 @@ test('vue + vuex', async () => {
   expect(await page.textContent('.vue')).toMatch(`[success]`)
 })
 
-test('esbuild-plugin', async () => {
-  expect(await page.textContent('.esbuild-plugin')).toMatch(
-    `Hello from an esbuild plugin`
-  )
-})
+// When we use the Rollup CommonJS plugin instead of esbuild prebundling,
+// the esbuild plugins won't apply to dependencies
+test.skipIf(isBuild && process.env.VITE_TEST_LEGACY_CJS_PLUGIN)(
+  'esbuild-plugin',
+  async () => {
+    expect(await page.textContent('.esbuild-plugin')).toMatch(
+      `Hello from an esbuild plugin`
+    )
+  }
+)
 
 test('import from hidden dir', async () => {
   expect(await page.textContent('.hidden-dir')).toBe('hello!')

playground/optimize-deps/vite.config.js

@@ -72,7 +72,7 @@ module.exports = {
       apply: 'build',
       enforce: 'pre',
       load(id) {
-        if (id === '__vite-browser-external:fs') {
+        if (id === '__vite-browser-external') {
           return `export default {}; export function readFileSync() {}`
         }
       }