diff --git a/.changeset/poor-ways-relax.md b/.changeset/poor-ways-relax.md
new file mode 100644
index 000000000..39d85dcf4
--- /dev/null
+++ b/.changeset/poor-ways-relax.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Provides a better error message when using @adobe/react-spectrum
diff --git a/packages/astro/src/core/errors.ts b/packages/astro/src/core/errors.ts
index c37a05740..4046d4fd1 100644
--- a/packages/astro/src/core/errors.ts
+++ b/packages/astro/src/core/errors.ts
@@ -41,9 +41,21 @@ export function fixViteErrorMessage(_err: unknown, server: ViteDevServer) {
return err;
}
+
+const incompatiblePackages = {
+ 'react-spectrum': `@adobe/react-spectrum is not compatible with Vite's server-side rendering mode at the moment. You can still use React Spectrum from the client. Create an island React component and use the client:only directive. From there you can use React Spectrum.`
+};
+const incompatPackageExp = new RegExp(`(${Object.keys(incompatiblePackages).join('|')})`);
+
function generateHint(err: ErrorWithMetadata): string | undefined {
if (/Unknown file extension \"\.(jsx|vue|svelte|astro)\" for /.test(err.message)) {
return 'You likely need to add this package to `vite.ssr.noExternal` in your astro config file.';
+ } else {
+ const res = incompatPackageExp.exec(err.stack);
+ if(res) {
+ const key = res[0] as keyof typeof incompatiblePackages;
+ return incompatiblePackages[key];
+ }
}
return undefined;
}
diff --git a/packages/astro/src/template/5xx.ts b/packages/astro/src/template/5xx.ts
index a40c3e47d..0354fbbfb 100644
--- a/packages/astro/src/template/5xx.ts
+++ b/packages/astro/src/template/5xx.ts
@@ -71,9 +71,9 @@ export default function template({
statusCode ? `${statusCode}: ` : ''
}${title}
- ${encode(error)}
+ ${encode(error)}
${url ? `${url}` : ''}
- ${encode(stack)}
+ ${encode(stack)}