feature: warn when trying to use wrangler dev inside a WebContainer (#3187)

Wrangler v3 removes Miniflare 2 in favour of Miniflare 3 using
`workerd`. Unfortunately, `workerd` doesn't run in the browser
_(yet 😉)_, and WebContainers don't support remote mode yet.
This change adds a warning when we detect `wrangler dev` running
inside a WebContainer, so users know what's going on.

Closes #3177

Author: mrbbot

.changeset/ninety-worms-beam.md

@@ -0,0 +1,5 @@
+---
+"wrangler": minor
+---
+
+feature: add warning when trying to use `wrangler dev` inside a WebContainer

package-lock.json

@@ -135,7 +135,7 @@
 		"@types/supports-color": "^8.1.1",
 		"@types/ws": "^8.5.3",
 		"@types/yargs": "^17.0.10",
-		"@webcontainer/env": "^1.0.1",
+		"@webcontainer/env": "^1.1.0",
 		"body-parser": "^1.20.0",
 		"chalk": "^2.4.2",
 		"cli-table3": "^0.6.3",

packages/wrangler/package.json

@@ -1,4 +1,5 @@
 import path from "node:path";
+import { isWebContainer } from "@webcontainer/env";
 import chalk from "chalk";
 import { watch } from "chokidar";
 import getPort from "get-port";
@@ -293,6 +294,15 @@ export function devOptions(yargs: CommonYargsArgv) {
 type DevArguments = StrictYargsOptionsToInterface<typeof devOptions>;
 
 export async function devHandler(args: DevArguments) {
+	if (isWebContainer()) {
+		logger.error(
+			`Oh no! 😟You tried to run \`wrangler dev\` in a StackBlitz WebContainer. 🤯
+This is currently not supported 😭, but we think that we'll get it to work soon... hang in there! 🥺`
+		);
+		process.exitCode = 1;
+		return;
+	}
+
 	if (!(args.local || args.experimentalLocal)) {
 		const isLoggedIn = await loginOrRefreshIfRequired();
 		if (!isLoggedIn) {

packages/wrangler/src/dev.tsx

@@ -213,7 +213,6 @@ import path from "node:path";
 import url from "node:url";
 import { TextEncoder } from "node:util";
 import TOML from "@iarna/toml";
-import { HostURL } from "@webcontainer/env";
 import { fetch } from "undici";
 import {
 	getConfigCache,
@@ -365,15 +364,7 @@ export function validateScopeKeys(
 	return scopes.every((scope) => scope in Scopes);
 }
 
-/**
- * To allow OAuth callbacks in environments such as WebContainer we need to
- * create a host URL which only resolves `localhost` to a WebContainer
- * hostname if the process is running in a WebContainer. On local this will
- * be a no-op and it leaves the URL unmodified.
- *
- * @see https://www.npmjs.com/package/@webcontainer/env
- */
-const CALLBACK_URL = HostURL.parse("http://localhost:8976/oauth/callback").href;
+const CALLBACK_URL = "http://localhost:8976/oauth/callback";
 
 let LocalState: State = {
 	...getAuthTokens(),