diff --git a/.changeset/real-feet-rule.md b/.changeset/real-feet-rule.md new file mode 100644 index 000000000..dd858c798 --- /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 000000000..7ff96e6f1 --- /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 8d743dff2..3412f2398 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 c295831a3..223e9e1bd 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;