[vite-plugin] fix: replace process.env.NODE_ENV for nodejs_compat builds (cloudflare#8823)

dario-piotrowicz · web-flow · commit f5666806ebe8 · 2025-04-07T16:59:32.000+01:00
diff --git a/.changeset/little-cities-yell.md b/.changeset/little-cities-yell.md
@@ -0,0 +1,10 @@
+---
+"@cloudflare/vite-plugin": patch
+---
+
+fix: replace `process.env.NODE_ENV` for nodejs_compat builds
+
+make sure that occurrences of `process.env.NODE_ENV` are replaced with the
+current `process.env.NODE_ENV` value or `"production"` on builds that include
+the `nodejs_compat` flag, this enables libraries checking such value
+(e.g. `react-dom`) to be properly treeshaken
diff --git a/packages/vite-plugin-cloudflare/package.json b/packages/vite-plugin-cloudflare/package.json
@@ -44,6 +44,7 @@
 	"dependencies": {
 		"@cloudflare/unenv-preset": "workspace:*",
 		"@hattip/adapter-node": "^0.0.49",
+		"@rollup/plugin-replace": "^6.0.1",
 		"get-port": "^7.1.0",
 		"miniflare": "workspace:*",
 		"picocolors": "^1.1.1",
diff --git a/packages/vite-plugin-cloudflare/playground/react-dom-server/__tests__/base-tests.ts b/packages/vite-plugin-cloudflare/playground/react-dom-server/__tests__/base-tests.ts
@@ -0,0 +1,24 @@
+import { readFileSync } from "node:fs";
+import { expect, test } from "vitest";
+import { isBuild, page } from "../../__test-utils__";
+
+export function testPageContent() {
+	test("the page content has been server side rendered by react", async () => {
+		const h1Content = await page.textContent("h1");
+		expect(h1Content).toEqual("Server Side React");
+		const pContent = await page.textContent("p");
+		expect(pContent).toEqual(
+			"This page was server side rendered by using directly 'renderToString' from 'react-dom/server'"
+		);
+	});
+}
+
+test.skipIf(!isBuild)(
+	"the build output does not include react development code (such is tree-shaken away)",
+	async () => {
+		const outputJs = readFileSync("./dist/worker/index.js", "utf8");
+		expect(outputJs).not.toContain("react-dom.development.js");
+		// the react development code links to the facebook/react repo in a few places
+		expect(outputJs).not.toContain("https://github.com/facebook/react");
+	}
+);
diff --git a/packages/vite-plugin-cloudflare/playground/react-dom-server/__tests__/react-dom-server.spec.ts b/packages/vite-plugin-cloudflare/playground/react-dom-server/__tests__/react-dom-server.spec.ts
@@ -0,0 +1 @@
+import "./base-tests";
diff --git a/packages/vite-plugin-cloudflare/playground/react-dom-server/__tests__/with-nodejs-compat/react-dom-server.spec.ts b/packages/vite-plugin-cloudflare/playground/react-dom-server/__tests__/with-nodejs-compat/react-dom-server.spec.ts
@@ -0,0 +1 @@
+import "../base-tests";
diff --git a/packages/vite-plugin-cloudflare/playground/react-dom-server/package.json b/packages/vite-plugin-cloudflare/playground/react-dom-server/package.json
@@ -0,0 +1,25 @@
+{
+	"name": "@playground/react-dom-server",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"build": "vite build --app",
+		"check:types": "tsc --build",
+		"dev": "vite dev",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"react": "^19.1.0",
+		"react-dom": "^19.1.0"
+	},
+	"devDependencies": {
+		"@cloudflare/vite-plugin": "workspace:*",
+		"@cloudflare/workers-tsconfig": "workspace:*",
+		"@cloudflare/workers-types": "^4.20250405.0",
+		"@types/react": "^19.1.0",
+		"@types/react-dom": "^19.1.1",
+		"typescript": "catalog:default",
+		"vite": "catalog:vite-plugin",
+		"wrangler": "workspace:*"
+	}
+}
diff --git a/packages/vite-plugin-cloudflare/playground/react-dom-server/src/index.ts b/packages/vite-plugin-cloudflare/playground/react-dom-server/src/index.ts
@@ -0,0 +1,32 @@
+import React from "react";
+import { renderToString } from "react-dom/server";
+
+export default {
+	async fetch() {
+		const txt = renderToString(
+			React.createElement("div", null, [
+				React.createElement("h1", null, `Server Side React`),
+				React.createElement(
+					"p",
+					null,
+					"This page was server side rendered by using directly 'renderToString' from 'react-dom/server'"
+				),
+			])
+		);
+
+		return new Response(
+			`<!DOCTYPE html>
+			<html>
+				<head>
+					<title>React Server Render</title>
+				</head>
+				<body>
+					<div id="app">${txt}</div>
+				</body>
+			</html>`,
+			{
+				headers: { "Content-Type": "text/html" },
+			}
+		);
+	},
+};
diff --git a/packages/vite-plugin-cloudflare/playground/react-dom-server/tsconfig.json b/packages/vite-plugin-cloudflare/playground/react-dom-server/tsconfig.json
@@ -0,0 +1,7 @@
+{
+	"files": [],
+	"references": [
+		{ "path": "./tsconfig.node.json" },
+		{ "path": "./tsconfig.worker.json" }
+	]
+}
diff --git a/packages/vite-plugin-cloudflare/playground/react-dom-server/tsconfig.node.json b/packages/vite-plugin-cloudflare/playground/react-dom-server/tsconfig.node.json
@@ -0,0 +1,4 @@
+{
+	"extends": ["@cloudflare/workers-tsconfig/base.json"],
+	"include": ["vite.config.ts", "__tests__"]
+}
diff --git a/packages/vite-plugin-cloudflare/playground/react-dom-server/tsconfig.worker.json b/packages/vite-plugin-cloudflare/playground/react-dom-server/tsconfig.worker.json
@@ -0,0 +1,4 @@
+{
+	"extends": ["@cloudflare/workers-tsconfig/worker.json"],
+	"include": ["src"]
+}
diff --git a/packages/vite-plugin-cloudflare/playground/react-dom-server/turbo.json b/packages/vite-plugin-cloudflare/playground/react-dom-server/turbo.json
@@ -0,0 +1,9 @@
+{
+	"$schema": "http://turbo.build/schema.json",
+	"extends": ["//"],
+	"tasks": {
+		"build": {
+			"outputs": ["dist/**"]
+		}
+	}
+}
diff --git a/packages/vite-plugin-cloudflare/playground/react-dom-server/vite.config.ts b/packages/vite-plugin-cloudflare/playground/react-dom-server/vite.config.ts
@@ -0,0 +1,6 @@
+import { cloudflare } from "@cloudflare/vite-plugin";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+	plugins: [cloudflare({ inspectorPort: false, persistState: false })],
+});
diff --git a/packages/vite-plugin-cloudflare/playground/react-dom-server/vite.config.with-nodejs-compat.ts b/packages/vite-plugin-cloudflare/playground/react-dom-server/vite.config.with-nodejs-compat.ts
@@ -0,0 +1,12 @@
+import { cloudflare } from "@cloudflare/vite-plugin";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+	plugins: [
+		cloudflare({
+			inspectorPort: false,
+			persistState: false,
+			configPath: "wrangler.with-nodejs-compat.jsonc",
+		}),
+	],
+});
diff --git a/packages/vite-plugin-cloudflare/playground/react-dom-server/wrangler.jsonc b/packages/vite-plugin-cloudflare/playground/react-dom-server/wrangler.jsonc
@@ -0,0 +1,5 @@
+{
+	"name": "worker",
+	"main": "./src/index.ts",
+	"compatibility_date": "2024-12-30",
+}
diff --git a/packages/vite-plugin-cloudflare/playground/react-dom-server/wrangler.with-nodejs-compat.jsonc b/packages/vite-plugin-cloudflare/playground/react-dom-server/wrangler.with-nodejs-compat.jsonc
@@ -0,0 +1,6 @@
+{
+	"name": "worker",
+	"main": "./src/index.ts",
+	"compatibility_date": "2024-12-30",
+	"compatibility_flags": ["nodejs_compat"],
+}
diff --git a/packages/vite-plugin-cloudflare/src/index.ts b/packages/vite-plugin-cloudflare/src/index.ts
@@ -3,6 +3,7 @@ import * as fs from "node:fs";
 import * as fsp from "node:fs/promises";
 import * as path from "node:path";
 import { createMiddleware } from "@hattip/adapter-node";
+import replace from "@rollup/plugin-replace";
 import MagicString from "magic-string";
 import { Miniflare } from "miniflare";
 import colors from "picocolors";
@@ -547,6 +548,17 @@ export function cloudflare(pluginConfig: PluginConfig = {}): vite.Plugin[] {
 				// Only configure this environment if it is a Worker using Node.js compatibility.
 				if (isNodeCompat(getWorkerConfig(name))) {
 					return {
+						build: {
+							rollupOptions: {
+								plugins: [
+									replace({
+										"process.env.NODE_ENV": JSON.stringify(
+											process.env.NODE_ENV ?? "production"
+										),
+									}),
+								],
+							},
+						},
 						resolve: {
 							builtins: [...nodeCompatExternals],
 						},
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +	"extends": ["@cloudflare/workers-tsconfig/base.json"],
 +	"include": ["vite.config.ts", "__tests__"]
 +}