[vite-plugin]: make sure that process.env is correctly populated (#8489)

* set `keepProcessEnv` to `true` when the `nodejs_compat` and `nodejs_compat_populate_process_env` flags are set

* remove `__VITE_ROOT__` and `__VITE_ENTRY_PATH__` bindings

remove the `__VITE_ROOT__` and `__VITE_ENTRY_PATH__` bindings that pollute
the populated `process.env`. instead of using such bundings these values
are not passed to the environment via the init request

---------

Co-authored-by: Pete Bacon Darwin <[email protected]>
Co-authored-by: James Opstad <[email protected]>

Author: 3 people

.changeset/crazy-groups-lie.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/vite-plugin": patch
+---
+
+fix: make sure `process.env` is populated when the `nodejs_compat_populate_process_env` flag is set

packages/vite-plugin-cloudflare/playground/module-resolution/__tests__/base-tests.ts

@@ -0,0 +1,119 @@
+import { afterAll, describe, expect, test } from "vitest";
+import {
+	getJsonResponse,
+	getTextResponse,
+	isBuild,
+	serverLogs,
+} from "../../__test-utils__";
+
+describe("module resolution", async () => {
+	afterAll(() => {
+		expect(serverLogs.errors).toEqual([]);
+	});
+
+	describe("basic module resolution", () => {
+		test("`require` js/cjs files with specifying their file extension", async () => {
+			const result = await getJsonResponse("/require-ext");
+			expect(result).toEqual({
+				"(requires/ext) hello.cjs (wrong-extension)": null,
+				"(requires/ext) helloWorld": "hello (.js) world (.cjs)",
+				"(requires/ext) world.js (wrong-extension)": null,
+			});
+		});
+
+		test("`require` js/cjs files without specifying their file extension", async () => {
+			const result = await getJsonResponse("/require-no-ext");
+			expect(result).toEqual({
+				"(requires/no-ext) helloWorld": "hello (.js) world (.cjs)",
+			});
+		});
+
+		test("`require` json files", async () => {
+			const result = await getJsonResponse("/require-json");
+			expect(result).toEqual({
+				"(requires/json) package name":
+					"@playground/module-resolution-requires",
+				"(requires/json) package version": "1.0.0",
+			});
+		});
+	});
+
+	describe("Cloudflare specific module resolution", () => {
+		test("internal imports from `cloudflare:*`", async () => {
+			const result = await getJsonResponse("/cloudflare-imports");
+
+			// Note: in some cases the DurableObject class name (erroneously) includes
+			//       the `Base` suffix, that's a workerd bug that happens for us on builds
+			const durableObjectName = isBuild ? "DurableObjectBase" : "DurableObject";
+
+			expect(result).toEqual({
+				"(cloudflare:workers) WorkerEntrypoint.name": "WorkerEntrypoint",
+				"(cloudflare:workers) DurableObject.name": durableObjectName,
+				"(cloudflare:sockets) typeof connect": "function",
+			});
+		});
+
+		test("external imports from `cloudflare:*`", async () => {
+			const result = await getJsonResponse("/external-cloudflare-imports");
+
+			// Note: in some cases the DurableObject class name (erroneously) includes
+			//       the `Base` suffix, that's a workerd bug that happens for us on builds
+			const durableObjectName = isBuild ? "DurableObjectBase" : "DurableObject";
+
+			expect(result).toEqual({
+				"(EXTERNAL) (cloudflare:workers) DurableObject.name": durableObjectName,
+			});
+		});
+	});
+
+	/**
+	 *  These tests check that module resolution works as intended for various third party npm packages (these tests are more
+	 *  realistic but less helpful than the other ones (these can be considered integration tests whilst the other unit tests)).
+	 *
+	 *  These are packages that involve non-trivial module resolutions (and that in the past we had issues with), they have no
+	 *  special meaning to us.
+	 */
+	describe("third party packages resolutions", () => {
+		test("react", async () => {
+			const result = await getJsonResponse("/third-party/react");
+			expect(result).toEqual({
+				"(react) reactVersionsMatch": true,
+				"(react) typeof React": "object",
+				"(react) typeof React.cloneElement": "function",
+			});
+		});
+
+		test("@remix-run/cloudflare", async () => {
+			const result = await getJsonResponse("/third-party/remix");
+			expect(result).toEqual({
+				"(remix) remixRunCloudflareCookieName":
+					"my-remix-run-cloudflare-cookie",
+			});
+		});
+
+		test("discord-api-types/v10", async () => {
+			const result = await getJsonResponse("/third-party/discord-api-types");
+			expect(result).toEqual({
+				"(discord-api-types/v10) RPCErrorCodes.InvalidUser": 4010,
+				"(discord-api-types/v10) Utils.isLinkButton({})": false,
+			});
+		});
+
+		test("slash-create", async () => {
+			const result = await getJsonResponse("/third-party/slash-create");
+			expect(result).toEqual({
+				"(slash-create/web) VERSION": "6.2.1",
+				"(slash-create/web) myCollection.random()": 54321,
+				"(slash-create/web) slashCreatorInstance is instance of SlashCreator":
+					true,
+			});
+		});
+	});
+
+	describe("user aliases", () => {
+		test("imports from an aliased package", async () => {
+			const result = await getTextResponse("/@alias/test");
+			expect(result).toBe("OK!");
+		});
+	});
+});

packages/vite-plugin-cloudflare/playground/module-resolution/__tests__/module-resolution.spec.ts

@@ -1,121 +1 @@
-import { afterAll, describe, expect, test } from "vitest";
-import {
-	getJsonResponse,
-	getTextResponse,
-	isBuild,
-	page,
-	serverLogs,
-	viteTestUrl,
-} from "../../__test-utils__";
-
-describe("module resolution", async () => {
-	afterAll(() => {
-		expect(serverLogs.errors).toEqual([]);
-	});
-
-	describe("basic module resolution", () => {
-		test("`require` js/cjs files with specifying their file extension", async () => {
-			const result = await getJsonResponse("/require-ext");
-			expect(result).toEqual({
-				"(requires/ext) hello.cjs (wrong-extension)": null,
-				"(requires/ext) helloWorld": "hello (.js) world (.cjs)",
-				"(requires/ext) world.js (wrong-extension)": null,
-			});
-		});
-
-		test("`require` js/cjs files without specifying their file extension", async () => {
-			const result = await getJsonResponse("/require-no-ext");
-			expect(result).toEqual({
-				"(requires/no-ext) helloWorld": "hello (.js) world (.cjs)",
-			});
-		});
-
-		test("`require` json files", async () => {
-			const result = await getJsonResponse("/require-json");
-			expect(result).toEqual({
-				"(requires/json) package name":
-					"@playground/module-resolution-requires",
-				"(requires/json) package version": "1.0.0",
-			});
-		});
-	});
-
-	describe("Cloudflare specific module resolution", () => {
-		test("internal imports from `cloudflare:*`", async () => {
-			const result = await getJsonResponse("/cloudflare-imports");
-
-			// Note: in some cases the DurableObject class name (erroneously) includes
-			//       the `Base` suffix, that's a workerd bug that happens for us on builds
-			const durableObjectName = isBuild ? "DurableObjectBase" : "DurableObject";
-
-			expect(result).toEqual({
-				"(cloudflare:workers) WorkerEntrypoint.name": "WorkerEntrypoint",
-				"(cloudflare:workers) DurableObject.name": durableObjectName,
-				"(cloudflare:sockets) typeof connect": "function",
-			});
-		});
-
-		test("external imports from `cloudflare:*`", async () => {
-			const result = await getJsonResponse("/external-cloudflare-imports");
-
-			// Note: in some cases the DurableObject class name (erroneously) includes
-			//       the `Base` suffix, that's a workerd bug that happens for us on builds
-			const durableObjectName = isBuild ? "DurableObjectBase" : "DurableObject";
-
-			expect(result).toEqual({
-				"(EXTERNAL) (cloudflare:workers) DurableObject.name": durableObjectName,
-			});
-		});
-	});
-
-	/**
-	 *  These tests check that module resolution works as intended for various third party npm packages (these tests are more
-	 *  realistic but less helpful than the other ones (these can be considered integration tests whilst the other unit tests)).
-	 *
-	 *  These are packages that involve non-trivial module resolutions (and that in the past we had issues with), they have no
-	 *  special meaning to us.
-	 */
-	describe("third party packages resolutions", () => {
-		test("react", async () => {
-			const result = await getJsonResponse("/third-party/react");
-			expect(result).toEqual({
-				"(react) reactVersionsMatch": true,
-				"(react) typeof React": "object",
-				"(react) typeof React.cloneElement": "function",
-			});
-		});
-
-		test("@remix-run/cloudflare", async () => {
-			const result = await getJsonResponse("/third-party/remix");
-			expect(result).toEqual({
-				"(remix) remixRunCloudflareCookieName":
-					"my-remix-run-cloudflare-cookie",
-			});
-		});
-
-		test("discord-api-types/v10", async () => {
-			const result = await getJsonResponse("/third-party/discord-api-types");
-			expect(result).toEqual({
-				"(discord-api-types/v10) RPCErrorCodes.InvalidUser": 4010,
-				"(discord-api-types/v10) Utils.isLinkButton({})": false,
-			});
-		});
-
-		test("slash-create", async () => {
-			const result = await getJsonResponse("/third-party/slash-create");
-			expect(result).toEqual({
-				"(slash-create/web) VERSION": "6.2.1",
-				"(slash-create/web) myCollection.random()": 54321,
-				"(slash-create/web) slashCreatorInstance is instance of SlashCreator":
-					true,
-			});
-		});
-	});
-
-	describe("user aliases", () => {
-		test("imports from an aliased package", async () => {
-			const result = await getTextResponse("/@alias/test");
-			expect(result).toBe("OK!");
-		});
-	});
-});
+import "./base-tests";

packages/vite-plugin-cloudflare/playground/module-resolution/__tests__/nodejs-compat/module-resolution.spec.ts

@@ -0,0 +1 @@
+import "../base-tests";

packages/vite-plugin-cloudflare/playground/module-resolution/package.json

@@ -5,11 +5,14 @@
 	"scripts": {
 		"build": "vite build --app",
 		"build:no-prebundling": "vite build --app -c ./vite.config.no-prebundling.ts",
+		"build:nodejs-compat": "vite build --app -c ./vite.config.nodejs-compat.ts",
 		"check:types": "tsc --build",
 		"dev": "vite dev",
 		"dev:no-prebundling": "vite dev -c ./vite.config.no-prebundling.ts",
+		"dev:nodejs-compat": "vite dev -c ./vite.config.nodejs-compat.ts",
 		"preview": "vite preview",
-		"preview:no-prebundling": "vite preview -c ./vite.config.no-prebundling.ts"
+		"preview:no-prebundling": "vite preview -c ./vite.config.no-prebundling.ts",
+		"preview:nodejs-compat": "vite preview -c ./vite.config.nodejs-compat.ts"
 	},
 	"devDependencies": {
 		"@cloudflare-dev-module-resolution/imports": "file:./packages/imports",

packages/vite-plugin-cloudflare/playground/module-resolution/vite.config.nodejs-compat.ts

@@ -0,0 +1,12 @@
+import { resolve } from "node:path";
+import { cloudflare } from "@cloudflare/vite-plugin";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+	resolve: {
+		alias: {
+			"@alias/test": resolve(__dirname, "./src/aliasing.ts"),
+		},
+	},
+	plugins: [cloudflare({ persistState: false })],
+});

packages/vite-plugin-cloudflare/playground/module-resolution/wrangler.nodejs-compat.toml

@@ -0,0 +1,4 @@
+name = "worker"
+main = "./src/index.ts"
+compatibility_date = "2024-12-30"
+compatibility_flags = [ "nodejs_compat" ]

packages/vite-plugin-cloudflare/playground/node-compat/__tests__/worker-process-populated-env/process.spec.ts

@@ -0,0 +1,7 @@
+import { expect, test } from "vitest";
+import { getTextResponse } from "../../../__test-utils__";
+
+test("should get a populated process.env object", async () => {
+	const result = await getTextResponse();
+	expect(result).toBe(`OK!`);
+});

packages/vite-plugin-cloudflare/playground/node-compat/package.json

@@ -22,6 +22,10 @@
 		"postgres:dev": "vite dev -c vite.config.worker-postgres.ts",
 		"postgres:preview": "vite preview -c vite.config.worker-postgres.ts",
 		"postgres:test": "vitest run -c ../vitest.config.e2e.ts worker-postgres",
+		"process-populated-env:build": "vite build --app -c vite.config.worker-process-populated-env.ts",
+		"process-populated-env:dev": "vite dev -c vite.config.worker-process-populated-env.ts",
+		"process-populated-env:preview": "vite preview -c vite.config.worker-process-populated-env.ts",
+		"process-populated-env:test": "vitest run -c ../vitest.config.e2e.ts worker-process-populated-env",
 		"process:build": "vite build --app -c vite.config.worker-process.ts",
 		"process:dev": "vite dev -c vite.config.worker-process.ts",
 		"process:preview": "vite preview -c vite.config.worker-process.ts",

packages/vite-plugin-cloudflare/playground/node-compat/vite.config.worker-process-populated-env.ts

@@ -0,0 +1,14 @@
+import { cloudflare } from "@cloudflare/vite-plugin";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+	build: {
+		outDir: "dist/worker-process-populated-env",
+	},
+	plugins: [
+		cloudflare({
+			configPath: "./worker-process-populated-env/wrangler.toml",
+			persistState: false,
+		}),
+	],
+});