fix: rewrite CJS specific funcs/vars in plugins (#8227)

.eslintrc.cjs

@@ -115,6 +115,12 @@ module.exports = defineConfig({
         'node/no-extraneous-import': 'off'
       }
     },
+    {
+      files: ['packages/plugin-*/**/*'],
+      rules: {
+        'no-restricted-globals': ['error', 'require', '__dirname', '__filename']
+      }
+    },
     {
       files: ['playground/**'],
       rules: {

packages/plugin-legacy/src/index.ts

@@ -1,6 +1,8 @@
 /* eslint-disable node/no-extraneous-import */
 import path from 'path'
 import { createHash } from 'crypto'
+import { createRequire } from 'module'
+import { fileURLToPath } from 'url'
 import { build } from 'vite'
 import MagicString from 'magic-string'
 import type {
@@ -171,6 +173,7 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
     }
   }
 
+  const _require = createRequire(import.meta.url)
   const legacyPostPlugin: Plugin = {
     name: 'vite:legacy-post-process',
     enforce: 'post',
@@ -331,7 +334,7 @@ function viteLegacyPlugin(options: Options = {}): Plugin[] {
               useBuiltIns: needPolyfills ? 'usage' : false,
               corejs: needPolyfills
                 ? {
-                    version: require('core-js/package.json').version,
+                    version: _require('core-js/package.json').version,
                     proposals: false
                   }
                 : undefined,
@@ -557,7 +560,7 @@ async function buildPolyfillChunk(
   minify = minify ? 'terser' : false
   const res = await build({
     // so that everything is resolved from here
-    root: __dirname,
+    root: path.dirname(fileURLToPath(import.meta.url)),
     configFile: false,
     logLevel: 'error',
     plugins: [polyfillsPlugin(imports, externalSystemJS)],

packages/plugin-legacy/tsconfig.json

@@ -4,7 +4,7 @@
   "compilerOptions": {
     "outDir": "dist",
     "target": "ES2020",
-    "module": "CommonJS",
+    "module": "ES2020",
     "moduleResolution": "Node",
     "strict": true,
     "declaration": true,

packages/plugin-react/src/fast-refresh.ts

@@ -1,11 +1,13 @@
 import fs from 'fs'
 import path from 'path'
+import { createRequire } from 'module'
 import type { types as t } from '@babel/core'
 
 export const runtimePublicPath = '/@react-refresh'
 
+const _require = createRequire(import.meta.url)
 const reactRefreshDir = path.dirname(
-  require.resolve('react-refresh/package.json')
+  _require.resolve('react-refresh/package.json')
 )
 const runtimeFilePath = path.join(
   reactRefreshDir,

packages/plugin-react/tsconfig.json

@@ -4,7 +4,7 @@
   "compilerOptions": {
     "outDir": "dist",
     "target": "ES2020",
-    "module": "CommonJS",
+    "module": "ES2020",
     "moduleResolution": "Node",
     "strict": true,
     "declaration": true,

packages/plugin-vue-jsx/src/index.ts

@@ -73,7 +73,7 @@ function vueJsxPlugin(options: Options = {}): Plugin {
       }
     },
 
-    transform(code, id, opt) {
+    async transform(code, id, opt) {
       const ssr = typeof opt === 'boolean' ? opt : (opt && opt.ssr) === true
       const {
         include,
@@ -91,7 +91,10 @@ function vueJsxPlugin(options: Options = {}): Plugin {
         const plugins = [importMeta, [jsx, babelPluginOptions], ...babelPlugins]
         if (id.endsWith('.tsx') || filepath.endsWith('.tsx')) {
           plugins.push([
-            require('@babel/plugin-transform-typescript'),
+            // @ts-ignore missing type
+            await import('@babel/plugin-transform-typescript').then(
+              (r) => r.default
+            ),
             // @ts-ignore
             { isTSX: true, allowExtensions: true }
           ])

packages/plugin-vue-jsx/tsconfig.json

@@ -4,7 +4,7 @@
   "compilerOptions": {
     "outDir": "dist",
     "target": "ES2020",
-    "module": "CommonJS",
+    "module": "ES2020",
     "moduleResolution": "Node",
     "strict": true,
     "declaration": true,

packages/plugin-vue/src/compiler.ts

@@ -5,6 +5,7 @@ declare module 'vue/compiler-sfc' {
   }
 }
 
+import { createRequire } from 'module'
 import type * as _compiler from 'vue/compiler-sfc'
 
 export function resolveCompiler(root: string): typeof _compiler {
@@ -23,8 +24,11 @@ export function resolveCompiler(root: string): typeof _compiler {
   return compiler
 }
 
+const _require = createRequire(import.meta.url)
 function tryRequire(id: string, from?: string) {
   try {
-    return from ? require(require.resolve(id, { paths: [from] })) : require(id)
+    return from
+      ? _require(_require.resolve(id, { paths: [from] }))
+      : _require(id)
   } catch (e) {}
 }

packages/plugin-vue/tsconfig.json

@@ -4,7 +4,7 @@
   "compilerOptions": {
     "outDir": "dist",
     "target": "ES2020",
-    "module": "commonjs",
+    "module": "ES2020",
     "moduleResolution": "node",
     "strict": true,
     "declaration": true,