[vite-plugin]: fix applications not being able to import assets from dependencies (#8672)

* [vite-plugin]: fix applications not being able to import assets from dependencies

* remove runtime checking in favour of config validation

* update lock file

* add missing optional chaining

* add e2e to make sure validation takes place

* add TODO

* Apply suggestions from code review

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

* update inline snapshots

* problematic -> disallowed

* fix typo in filename

* update changeset

---------

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

Author: dario-piotrowicz

.changeset/twenty-ads-follow.md

@@ -0,0 +1,15 @@
+---
+"@cloudflare/vite-plugin": patch
+---
+
+replace modules runtime checks with vite environment config validation
+
+currently at runtime the vite plugin applies checks to make sure that
+external files are not being imported, such checks are however too
+restrictive and prevent worker code to perform some valid imports from
+node_modules (e.g. `import stylesheet from "<some-package>/styles.css?url";`)
+
+the changes here replace the runtime checks (allowing valid imports from
+node_modules) with some validation to the worker vite environment configurations,
+specifically they make sure that the environment doesn't specify invalid
+`optimizeDeps.exclude` and `resolve.external` options

packages/vite-plugin-cloudflare/e2e/fixtures/invalid-worker-env-configs/index.js

@@ -0,0 +1,5 @@
+export default {
+	async fetch() {
+		return new Response("Hello World!");
+	},
+};

packages/vite-plugin-cloudflare/e2e/fixtures/invalid-worker-env-configs/package.json

@@ -0,0 +1,12 @@
+{
+	"name": "@vite-plugin-cloudflare-e2e/invalid-worker-env-configs",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev"
+	},
+	"devDependencies": {
+		"@cloudflare/vite-plugin": "*",
+		"vite": "^6.2.3"
+	}
+}

packages/vite-plugin-cloudflare/e2e/fixtures/invalid-worker-env-configs/vite.config.ts

@@ -0,0 +1,19 @@
+import { cloudflare } from "@cloudflare/vite-plugin";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+	plugins: [
+		cloudflare({
+			inspectorPort: false,
+			persistState: false,
+			viteEnvironment: { name: "worker" },
+		}),
+	],
+	environments: {
+		worker: {
+			optimizeDeps: {
+				exclude: ["pkg"],
+			},
+		},
+	},
+});

packages/vite-plugin-cloudflare/e2e/fixtures/invalid-worker-env-configs/wrangler.toml

@@ -0,0 +1,3 @@
+name = "worker"
+main = "./index.js"
+compatibility_date = "2024-12-30"

packages/vite-plugin-cloudflare/e2e/invalid-worker-env-configs.test.ts

@@ -0,0 +1,18 @@
+import { describe } from "vitest";
+import { test } from "./helpers.js";
+
+// Note: the test here just makes sure that the validation does take place, for more fine grained
+//       testing regarding the validation there are unit tests in src/__tests__/validate_worker_environments_resolved_configs.spec.ts
+
+describe("during development wrangler config files are validated", () => {
+	test("for the entry worker", async ({ expect, seed, viteDev }) => {
+		const projectPath = await seed("invalid-worker-env-configs", "pnpm");
+
+		const proc = viteDev(projectPath);
+
+		expect(await proc.exitCode).not.toBe(0);
+		expect(proc.stderr).toContain(
+			"The following environment configurations are incompatible with the Cloudflare vite plugin"
+		);
+	});
+});

packages/vite-plugin-cloudflare/playground/deps-assets-importing/__tests__/assets-importing-from-dependencies.spec.ts

@@ -0,0 +1,8 @@
+import { expect, test } from "vitest";
+import { getTextResponse } from "../../__test-utils__";
+
+test("it is possible to import assets from dependencies", async () => {
+	expect(await getTextResponse()).toMatch(
+		/Hello! This is an application built using vite@[^ ]+? \(information retrieved from "[^"]+?\.json"\)/
+	);
+});

packages/vite-plugin-cloudflare/playground/deps-assets-importing/package.json

@@ -0,0 +1,19 @@
+{
+	"name": "@playground/deps-assets-importing",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"build": "vite build --app",
+		"check:types": "tsc --build",
+		"dev": "vite dev",
+		"preview": "vite preview"
+	},
+	"devDependencies": {
+		"@cloudflare/vite-plugin": "workspace:*",
+		"@cloudflare/workers-tsconfig": "workspace:*",
+		"@cloudflare/workers-types": "^4.20250321.0",
+		"typescript": "catalog:default",
+		"vite": "catalog:vite-plugin",
+		"wrangler": "workspace:*"
+	}
+}

packages/vite-plugin-cloudflare/playground/deps-assets-importing/src/index.ts

@@ -0,0 +1,11 @@
+import vitePackageJson from "vite/package.json?raw";
+import url from "vite/package.json?url";
+
+export default {
+	async fetch() {
+		const json = JSON.parse(vitePackageJson);
+		return new Response(
+			`Hello! This is an application built using ${json.name}@${json.version} (information retrieved from "${url}")`
+		);
+	},
+} satisfies ExportedHandler;

packages/vite-plugin-cloudflare/playground/deps-assets-importing/tsconfig.json

@@ -0,0 +1,7 @@
+{
+	"files": [],
+	"references": [
+		{ "path": "./tsconfig.node.json" },
+		{ "path": "./tsconfig.worker.json" }
+	]
+}