From 42fd6936cdb7106aea3770bed5313e558fc8b6dc Mon Sep 17 00:00:00 2001
From: "Fred K. Schott" <fkschott@gmail.com>
Date: Thu, 11 Aug 2022 16:24:17 -0700
Subject: [PATCH] fix astro image bad imports (#4279)

---
 .changeset/real-feet-rule.md                     |  5 +++++
 .changeset/strange-meals-march.md                |  5 +++++
 packages/astro/src/core/render/dev/vite.ts       | 12 ++++++++----
 packages/integrations/image/src/lib/get-image.ts |  4 +++-
 4 files changed, 21 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/real-feet-rule.md
 create mode 100644 .changeset/strange-meals-march.md

diff --git a/.changeset/real-feet-rule.md b/.changeset/real-feet-rule.md
new file mode 100644
index 0000000000..dd858c7981
--- /dev/null
+++ b/.changeset/real-feet-rule.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Handle "not found" imports without throwing an "Invalid URL" error
diff --git a/.changeset/strange-meals-march.md b/.changeset/strange-meals-march.md
new file mode 100644
index 0000000000..7ff96e6f12
--- /dev/null
+++ b/.changeset/strange-meals-march.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/image': patch
+---
+
+Add better warnings if the integration was not properly configured.
diff --git a/packages/astro/src/core/render/dev/vite.ts b/packages/astro/src/core/render/dev/vite.ts
index 8d743dff2d..3412f2398e 100644
--- a/packages/astro/src/core/render/dev/vite.ts
+++ b/packages/astro/src/core/render/dev/vite.ts
@@ -9,6 +9,8 @@ import { STYLE_EXTENSIONS } from '../util.js';
  */
 const fileExtensionsToSSR = new Set(['.astro', '.md']);
 
+const STRIP_QUERY_PARAMS_REGEX = /\?.*$/;
+
 /** recursively crawl the module graph to get all style files imported by parent id */
 export async function* crawlGraph(
 	viteServer: vite.ViteDevServer,
@@ -43,16 +45,18 @@ export async function* crawlGraph(
 				// to only SSR modules that we can safely transform, we check against
 				// a list of file extensions based on our built-in vite plugins
 				if (importedModule.id) {
-					// use URL to strip special query params like "?content"
-					const { pathname } = new URL(`file://${importedModule.id}`);
+					// Strip special query params like "?content".
+					// NOTE: Cannot use `new URL()` here because not all IDs will be valid paths.
+					// For example, `virtual:image-loader` if you don't have the plugin installed.
+					const importedModulePathname = importedModule.id.replace(STRIP_QUERY_PARAMS_REGEX, '');
 					// If the entry is a style, skip any modules that are not also styles.
 					// Tools like Tailwind might add HMR dependencies as `importedModules`
 					// but we should skip them--they aren't really imported. Without this,
 					// every hoisted script in the project is added to every page!
-					if (entryIsStyle && !STYLE_EXTENSIONS.has(npath.extname(pathname))) {
+					if (entryIsStyle && !STYLE_EXTENSIONS.has(npath.extname(importedModulePathname))) {
 						continue;
 					}
-					if (fileExtensionsToSSR.has(npath.extname(pathname))) {
+					if (fileExtensionsToSSR.has(npath.extname(importedModulePathname))) {
 						const mod = viteServer.moduleGraph.getModuleById(importedModule.id);
 						if (!mod?.ssrModule) {
 							await viteServer.ssrLoadModule(importedModule.id);
diff --git a/packages/integrations/image/src/lib/get-image.ts b/packages/integrations/image/src/lib/get-image.ts
index c295831a34..223e9e1bdf 100644
--- a/packages/integrations/image/src/lib/get-image.ts
+++ b/packages/integrations/image/src/lib/get-image.ts
@@ -107,7 +107,9 @@ export async function getImage(
 
 	if (!loader) {
 		// @ts-ignore
-		const { default: mod } = await import('virtual:image-loader');
+		const { default: mod } = await import('virtual:image-loader').catch(() => {
+			throw new Error('[@astrojs/image] Builtin image loader not found. (Did you remember to add the integration to your Astro config?)');
+		});
 		loader = mod as ImageService;
 		globalThis.astroImage = globalThis.astroImage || {};
 		globalThis.astroImage.loader = loader;