fix(vite-plugin): ensure node compat globals are injected before any imports (#9581)

* add failing test

* add fix

* Apply suggestions from code review

Co-authored-by: Victor Berchet <[email protected]>

---------

Co-authored-by: Victor Berchet <[email protected]>

Author: petebacondarwin

.changeset/six-parrots-clap.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/vite-plugin": patch
+---
+
+fix: ensure that globals are polyfilled before every import

packages/vite-plugin-cloudflare/playground/node-compat/worker-process/early-process-access.ts

@@ -0,0 +1 @@
+export const stderr = process.stderr;

packages/vite-plugin-cloudflare/playground/node-compat/worker-process/index.ts

@@ -1,4 +1,5 @@
 import assert from "node:assert";
+import { stderr } from "./early-process-access";
 
 export default {
 	async fetch() {
@@ -7,6 +8,8 @@ export default {
 } satisfies ExportedHandler;
 
 function testProcessBehaviour() {
+	// workerd does not implement `process.stderr`, it comes from unenv.
+	assert(stderr, "process.stderr was not polyfilled early enough!");
 	const originalProcess = process;
 	try {
 		assert(process !== undefined, "process is missing");

packages/vite-plugin-cloudflare/src/index.ts

@@ -35,7 +35,9 @@ import {
 	getPreviewMiniflareOptions,
 } from "./miniflare-options";
 import {
+	getGlobalVirtualModule,
 	injectGlobalCode,
+	isGlobalVirtualModule,
 	isNodeAls,
 	isNodeAlsModule,
 	isNodeCompat,
@@ -600,6 +602,9 @@ export function cloudflare(pluginConfig: PluginConfig = {}): vite.Plugin[] {
 			// rather than allowing the resolve hook here to alias then to polyfills.
 			enforce: "pre",
 			async resolveId(source, importer, options) {
+				if (isGlobalVirtualModule(source)) {
+					return source;
+				}
 				// See if we can map the `source` to a Node.js compat alias.
 				const result = resolveNodeJSImport(source);
 				if (!result) {
@@ -626,6 +631,9 @@ export function cloudflare(pluginConfig: PluginConfig = {}): vite.Plugin[] {
 				// We are in build mode so return the absolute path to the polyfill.
 				return this.resolve(result.resolved, importer, options);
 			},
+			load(id) {
+				return getGlobalVirtualModule(id);
+			},
 			async transform(code, id) {
 				// Inject the Node.js compat globals into the entry module for Node.js compat environments.
 				const workerConfig = getWorkerConfig(this.environment.name);

packages/vite-plugin-cloudflare/src/node-js-compat.ts

@@ -67,28 +67,75 @@ export function isNodeAlsModule(path: string) {
 	return /^(node:)?async_hooks$/.test(path);
 }
 
+/**
+ * Map of module identifiers to
+ * - `injectedName`: the name injected on `globalThis`
+ * - `exportName`: the export name from the module
+ * - `importName`: the imported name
+ */
+const injectsByModule = new Map<
+	string,
+	{ injectedName: string; exportName: string; importName: string }[]
+>();
+/**
+ * Map of virtual module (prefixed by `virtualModulePrefix`) to injectable module id,
+ * which then maps via `injectsByModule` to the global code to be injected.
+ */
+const virtualModulePathToSpecifier = new Map<string, string>();
+const virtualModulePrefix = `\0_nodejs_global_inject-`;
+
+for (const [injectedName, moduleSpecifier] of Object.entries(env.inject)) {
+	const [module, exportName, importName] = Array.isArray(moduleSpecifier)
+		? [moduleSpecifier[0], moduleSpecifier[1], moduleSpecifier[1]]
+		: [moduleSpecifier, "default", "defaultExport"];
+
+	if (!injectsByModule.has(module)) {
+		injectsByModule.set(module, []);
+		virtualModulePathToSpecifier.set(
+			virtualModulePrefix + module.replaceAll("/", "-"),
+			module
+		);
+	}
+	const injects = injectsByModule.get(module);
+	assert(injects, `expected injects for ${module} to be defined`);
+	injects.push({ injectedName, exportName, importName });
+}
+
+/**
+ * Does the given module id resolve to a virtual module corresponding to a global injection module?
+ */
+export function isGlobalVirtualModule(modulePath: string) {
+	return virtualModulePathToSpecifier.has(modulePath);
+}
+
+/**
+ * Get the contents of the virtual module corresponding to a global injection module.
+ */
+export function getGlobalVirtualModule(modulePath: string) {
+	const module = virtualModulePathToSpecifier.get(modulePath);
+	if (!module) {
+		return undefined;
+	}
+	const injects = injectsByModule.get(module);
+	assert(injects, `expected injects for ${module} to be defined`);
+
+	const imports = injects.map(({ exportName, importName }) =>
+		importName === exportName ? exportName : `${exportName} as ${importName}`
+	);
+
+	return (
+		`import { ${imports.join(", ")} } from "${module}";\n` +
+		`${injects.map(({ injectedName, importName }) => `globalThis.${injectedName} = ${importName};`).join("\n")}`
+	);
+}
+
 /**
  * Gets the necessary global polyfills to inject into the entry-point of the user's code.
  */
 export function injectGlobalCode(id: string, code: string) {
-	const injectedCode = Object.entries(env.inject)
-		.map(([globalName, globalInject]) => {
-			if (typeof globalInject === "string") {
-				const moduleSpecifier = globalInject;
-				// the mapping is a simple string, indicating a default export, so the string is just the module specifier.
-				return `import var_${globalName} from "${moduleSpecifier}";\nglobalThis.${globalName} = var_${globalName};\n`;
-			}
-
-			// the mapping is a 2 item tuple, indicating a named export, made up of a module specifier and an export name.
-			const [moduleSpecifier, exportName] = globalInject;
-			assert(
-				moduleSpecifier !== undefined,
-				"Expected moduleSpecifier to be defined"
-			);
-			assert(exportName !== undefined, "Expected exportName to be defined");
-			return `import var_${globalName} from "${moduleSpecifier}";\nglobalThis.${globalName} = var_${globalName}.${exportName};\n`;
-		})
-		.join("\n");
+	const injectedCode = Array.from(virtualModulePathToSpecifier.keys())
+		.map((moduleId) => `import "${moduleId}";\n`)
+		.join("");
 
 	// Some globals are not injected using the approach above but are added to globalThis via side-effect imports of polyfills from the unenv-preset.
 	const polyfillCode = env.polyfill