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

Author: sapphi-red

.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-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,