Revert "refactor: remove CJS and env var Babel transforms, let Vite handle natively (#3767)"

This reverts commit b9a314b.

Author: bartlomieju

deno.lock

@@ -0,0 +1 @@
+exports.value = "ok";

packages/plugin-vite/demo/fixtures/commonjs_mod.cjs

@@ -0,0 +1,8 @@
+"use strict";
+// deno-lint-ignore no-var
+var __importDefault = (this && this.__importDefault) || function (mod) {
+  return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const assert_1 = __importDefault(require("assert"));
+(0, assert_1.default)(true);

packages/plugin-vite/demo/fixtures/commonjs_mod.js

@@ -1,4 +1,4 @@
-import { value } from "../../fixtures/commonjs_mod.js";
+import { value } from "../../fixtures/commonjs_mod.cjs";
 
 export default function Page() {
   return <h1>{value}</h1>;

packages/plugin-vite/demo/fixtures/maxmind.cjs

@@ -1,4 +1,4 @@
-import * as maxmind from "../../fixtures/maxmind.js";
+import * as maxmind from "../../fixtures/maxmind.cjs";
 
 export default function Page() {
   // deno-lint-ignore no-console

packages/plugin-vite/demo/fixtures/maxmind.js

@@ -82,43 +82,15 @@ export function fresh(config?: FreshViteConfig): Plugin[] {
   });
 
   let isDev = false;
-  let freshMode = "development";
 
   const plugins: Plugin[] = [
     {
       name: "fresh",
       sharedDuringBuild: true,
-      async config(config, env) {
+      config(config, env) {
         isDev = env.command === "serve";
-        freshMode = isDev ? "development" : "production";
-
-        // Load env files early so define entries are available
-        const root = config.root ? path.resolve(config.root) : Deno.cwd();
-        const envDir = config.envDir ? path.resolve(root, config.envDir) : root;
-        await loadEnvFile(path.join(envDir, ".env"));
-        await loadEnvFile(path.join(envDir, ".env.local"));
-        await loadEnvFile(path.join(envDir, `.env.${freshMode}`));
-        await loadEnvFile(path.join(envDir, `.env.${freshMode}.local`));
-
-        // Build define map for FRESH_PUBLIC_* env vars
-        // Replaces the Babel inlineEnvVarsPlugin with Vite's native define
-        const envDefine: Record<string, string> = {};
-        for (const [key, value] of Object.entries(Deno.env.toObject())) {
-          if (key.startsWith("FRESH_PUBLIC_")) {
-            envDefine[`process.env.${key}`] = JSON.stringify(value);
-            envDefine[`import.meta.env.${key}`] = JSON.stringify(value);
-          }
-        }
 
         return {
-          define: envDefine,
-          ssr: {
-            // Bundle all deps in SSR so that resolve.alias
-            // (react -> preact/compat) is applied consistently.
-            // CJS packages are handled by the deno plugin's load
-            // hook which wraps them in an ESM-compatible shim.
-            noExternal: true,
-          },
           server: {
             watch: {
               // Ignore temp files, editor swap files, and Vite timestamp
@@ -147,15 +119,14 @@ export function fresh(config?: FreshViteConfig): Plugin[] {
               "react-dom": "preact/compat",
               react: "preact/compat",
             },
+            // Disallow externals, because it leads to duplicate
+            // modules with `preact` vs `npm:preact@*` in the server
+            // environment.
+            noExternal: true,
           },
-
           optimizeDeps: {
-            // Disable dep optimizer because deno.ts handles all
-            // module resolution. The optimizer causes duplicate
-            // module instances when remote (JSR) islands resolve
-            // deps to /@fs/ paths while the optimizer bundles to
-            // /.vite/deps/. CJS packages in client-side islands
-            // are handled by deno.ts's load hook.
+            // Optimize deps somehow leads to duplicate modules or them
+            // being placed in the wrong chunks...
             noDiscovery: true,
           },
 
@@ -221,6 +192,14 @@ export function fresh(config?: FreshViteConfig): Plugin[] {
                       return;
                     }
 
+                    // Ignore commonjs optional exports
+                    if (
+                      warning.code === "MISSING_EXPORT" &&
+                      warning.message.includes("__require")
+                    ) {
+                      return;
+                    }
+
                     // Ignore this warnings
                     if (warning.code === "THIS_IS_UNDEFINED") {
                       return;
@@ -242,7 +221,7 @@ export function fresh(config?: FreshViteConfig): Plugin[] {
           },
         };
       },
-      configResolved(vConfig) {
+      async configResolved(vConfig) {
         // Run update check in background
         updateCheck(UPDATE_INTERVAL).catch(() => {});
 
@@ -257,45 +236,19 @@ export function fresh(config?: FreshViteConfig): Plugin[] {
           const name = fConfig.namer.getUniqueName(specName);
           fConfig.islandSpecifiers.set(spec, name);
         });
-      },
-    },
-    // Lightweight replacement for Deno.env.get() calls with FRESH_PUBLIC_*
-    // and NODE_ENV values. Replaces the Babel inlineEnvVarsPlugin for this
-    // pattern which can't be handled by Vite's define (it's a call expression).
-    {
-      name: "fresh:deno-env",
-      sharedDuringBuild: true,
-      applyToEnvironment() {
-        return true;
-      },
-      transform: {
-        filter: {
-          id: /\.([tj]sx?|[mc]?[tj]s)(\?.*)?$/,
-        },
-        handler(code) {
-          if (!code.includes("Deno.env.get(")) return;
 
-          const allEnv = Deno.env.toObject();
-          let modified = false;
-          const result = code.replace(
-            /Deno\.env\.get\(\s*["']([^"']+)["']\s*\)/g,
-            (match: string, name: string) => {
-              if (name === "NODE_ENV") {
-                modified = true;
-                return JSON.stringify(freshMode);
-              }
-              if (name.startsWith("FRESH_PUBLIC_") && name in allEnv) {
-                modified = true;
-                return JSON.stringify(allEnv[name]);
-              }
-              return match;
-            },
-          );
+        const envDir = pathWithRoot(
+          vConfig.envDir || vConfig.root,
+          vConfig.root,
+        );
 
-          if (modified) return { code: result };
-        },
+        await loadEnvFile(path.join(envDir, ".env"));
+        await loadEnvFile(path.join(envDir, ".env.local"));
+        const mode = isDev ? "development" : "production";
+        await loadEnvFile(path.join(envDir, `.env.${mode}`));
+        await loadEnvFile(path.join(envDir, `.env.${mode}.local`));
       },
-    } satisfies Plugin,
+    },
     serverEntryPlugin(fConfig),
     patches(),
     ...serverSnapshot(fConfig),

packages/plugin-vite/demo/routes/tests/commonjs.tsx

@@ -9,14 +9,18 @@ import {
 import * as path from "@std/path";
 import * as babel from "@babel/core";
 import { httpAbsolute } from "./patches/http_absolute.ts";
-import { JSX_REG } from "../utils.ts";
+import { JS_REG, JSX_REG } from "../utils.ts";
 import { builtinModules } from "node:module";
 
 // @ts-ignore Workaround for https://github.com/denoland/deno/issues/30850
 const { default: babelReact } = await import("@babel/preset-react");
 
 const BUILTINS = new Set(builtinModules);
 
+interface DenoState {
+  type: RequestedModuleType;
+}
+
 export function deno(): Plugin {
   let ssrLoader: Loader;
   let browserLoader: Loader;
@@ -81,21 +85,6 @@ export function deno(): Plugin {
         id = `${url.origin}${id}`;
       }
 
-      // Apply resolve.alias before Deno resolution so that
-      // react -> preact/compat works even in externalized packages.
-      // Vite normalizes alias config to { find, replacement }[] format.
-      const aliases = this.environment?.config?.resolve?.alias;
-      if (aliases) {
-        const list = Array.isArray(aliases) ? aliases : [];
-        for (const alias of list) {
-          const find = alias.find;
-          if (typeof find === "string" ? find === id : find?.test?.(id)) {
-            id = typeof alias.replacement === "string" ? alias.replacement : id;
-            break;
-          }
-        }
-      }
-
       // We still want to allow other plugins to participate in
       // resolution, with us being in front due to `enforce: "pre"`.
       // But we still want to ignore everything `vite:resolve` does
@@ -166,13 +155,14 @@ export function deno(): Plugin {
           resolved = path.fromFileUrl(resolved);
         }
 
-        // For file:// resolved modules (npm packages in node_modules,
-        // local files), let Vite handle loading natively. This allows
-        // Vite to externalize CJS packages in SSR mode (Node.js handles
-        // them with native require()) and avoids needing a custom CJS
-        // transform. Only \0deno:: virtual modules (jsr:, non-default
-        // types) need Fresh's custom load hook.
-        return { id: resolved };
+        return {
+          id: resolved,
+          meta: {
+            deno: {
+              type,
+            },
+          },
+        };
       } catch {
         // ignore
       }
@@ -182,80 +172,6 @@ export function deno(): Plugin {
         ? ssrLoader
         : browserLoader;
 
-      // In dev mode, CJS files need to be wrapped in an ESM shim:
-      // - SSR: module runner evaluates as ESM, needs module/exports/require
-      // - Client: browser evaluates as ESM, needs module/exports
-      // In build mode, Rollup's @rollup/plugin-commonjs handles CJS.
-      if (
-        isDev &&
-        !id.startsWith("\0") &&
-        id.includes("node_modules") &&
-        /\.(c?js|cjs)$/.test(id)
-      ) {
-        try {
-          const code = await Deno.readTextFile(id);
-          // Quick heuristic: if file has CJS patterns and no ESM
-          if (
-            !code.includes("export ") &&
-            !code.includes("import ") &&
-            (code.includes("module.exports") ||
-              code.includes("exports.") ||
-              code.includes("require("))
-          ) {
-            const isServer = this.environment.config.consumer === "server";
-
-            if (isServer) {
-              // SSR: use Node.js createRequire for full CJS compat
-              const wrapped = `
-import { createRequire as __cjs_createRequire } from "node:module";
-import { fileURLToPath as __cjs_fileURLToPath } from "node:url";
-import { dirname as __cjs_dirname } from "node:path";
-var __filename = __cjs_fileURLToPath(import.meta.url);
-var __dirname = __cjs_dirname(__filename);
-var require = __cjs_createRequire(import.meta.url);
-var module = { exports: {} };
-var exports = module.exports;
-
-${code}
-
-export default module.exports;
-`;
-              return { code: wrapped };
-            }
-
-            // Client: convert require() calls to ESM imports so
-            // browsers can load them. Hoist static require() calls
-            // to import statements at the top.
-            const imports: string[] = [];
-            let idx = 0;
-            const transformed = code.replace(
-              /\brequire\(["']([^"']+)["']\)/g,
-              (_match: string, spec: string) => {
-                const varName = `__cjs_import_${idx++}`;
-                imports.push(
-                  `import ${varName} from ${JSON.stringify(spec)};`,
-                );
-                return `(${varName}.default ?? ${varName})`;
-              },
-            );
-
-            const wrapped = `${imports.join("\n")}
-var module = { exports: {} };
-var exports = module.exports;
-var __filename = "";
-var __dirname = "";
-
-${transformed}
-
-export default module.exports;
-`;
-            return { code: wrapped };
-          }
-        } catch {
-          // Fall through to default loading
-        }
-      }
-
       if (isDenoSpecifier(id)) {
         const { type, specifier } = parseDenoSpecifier(id);
 
@@ -281,6 +197,49 @@ export default module.exports;
           code,
         };
       }
+
+      if (id.startsWith("\0")) {
+        id = id.slice(1);
+      }
+
+      const meta = this.getModuleInfo(id)?.meta.deno as
+        | DenoState
+        | undefined
+        | null;
+
+      if (meta === null || meta === undefined) return;
+
+      // Skip for non-js files like `.css`
+      if (
+        meta.type === RequestedModuleType.Default &&
+        !JS_REG.test(id)
+      ) {
+        return;
+      }
+
+      const url = path.toFileUrl(id);
+
+      const result = await loader.load(url.href, meta.type);
+      if (result.kind === "external") {
+        return null;
+      }
+
+      const code = new TextDecoder().decode(result.code);
+
+      const maybeJsx = babelTransform({
+        ssr: this.environment.config.consumer === "server",
+        media: result.mediaType,
+        id,
+        code,
+        isDev,
+      });
+      if (maybeJsx) {
+        return maybeJsx;
+      }
+
+      return {
+        code,
+      };
     },
     transform: {
       filter: {

packages/plugin-vite/demo/routes/tests/maxmind.tsx

@@ -1,6 +1,8 @@
 import type { Plugin } from "vite";
 import * as babel from "@babel/core";
+import { cjsPlugin } from "./patches/commonjs.ts";
 import { jsxComments } from "./patches/jsx_comment.ts";
+import { inlineEnvVarsPlugin } from "./patches/inline_env_vars.ts";
 import { removePolyfills } from "./patches/remove_polyfills.ts";
 import { JS_REG, JSX_REG } from "../utils.ts";
 import { codeEvalPlugin } from "./patches/code_eval.ts";
@@ -39,8 +41,10 @@ export function patches(): Plugin {
 
         const plugins: babel.PluginItem[] = [
           codeEvalPlugin(this.environment.config.consumer, env),
+          cjsPlugin,
           removePolyfills,
           jsxComments,
+          inlineEnvVarsPlugin(env, Deno.env.toObject()),
         ];
 
         const res = babel.transformSync(code, {