Provide a good error message when loading react spectrum

.changeset/poor-ways-relax.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Provides a better error message when using @adobe/react-spectrum

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;
 }

packages/astro/src/template/5xx.ts

@@ -71,9 +71,9 @@ export default function template({
  statusCode ? `<span class="statusCode">${statusCode}: </span> ` : ''
  }<span class="statusMessage">${title}</span></h1>
  </header>
- <pre>${encode(error)}</pre>
+ <pre class="error-message">${encode(error)}</pre>
  ${url ? `<a target="_blank" href="${url}">${url}</a>` : ''}
- <pre>${encode(stack)}</pre>
+ <pre class="error-stack">${encode(stack)}</pre>
  </main>
  </body>
  </html>`;

packages/astro/src/vite-plugin-astro-server/index.ts

@@ -37,6 +37,14 @@ function removeViteHttpMiddleware(server: vite.Connect.Server) {
  }
 }
 
+function truncateString(str: string, n: number) {
+ if (str.length > n) {
+ return str.substring(0, n) + '…';
+ } else {
+ return str;
+ }
+}
+
 function writeHtmlResponse(res: http.ServerResponse, statusCode: number, html: string) {
  res.writeHead(statusCode, {
  'Content-Type': 'text/html; charset=utf-8',
@@ -157,9 +165,9 @@ async function handle500Response(
  statusCode: 500,
  title: 'Internal Error',
  tabTitle: '500: Error',
- message: stripAnsi(err.message),
+ message: stripAnsi(err.hint ?? err.message),
  url: err.url || undefined,
- stack: stripAnsi(err.stack),
+ stack: truncateString(stripAnsi(err.stack), 500),
  });
  const transformedHtml = await viteServer.transformIndexHtml(pathname, html);
  writeHtmlResponse(res, 500, transformedHtml);

packages/astro/test/error-react-spectrum.test.js

@@ -0,0 +1,29 @@
+import { isWindows, loadFixture } from './test-utils.js';
+import { expect } from 'chai';
+import * as cheerio from 'cheerio';
+
+describe('Error packages: react-spectrum', () => {
+ if (isWindows) return;
+
+ /** @type {import('./test-utils').Fixture} */
+ let fixture;
+ /** @type {import('./test-utils').DevServer} */
+ let devServer;
+
+ before(async () => {
+ fixture = await loadFixture({
+ root: './fixtures/error-react-spectrum',
+ });
+ });
+ after(async () => {
+ devServer && devServer.stop();
+ });
+
+ it('properly detect syntax errors in template', async () => {
+ devServer = await fixture.startDevServer();
+ let html = await fixture.fetch('/').then(res => res.text());
+ let $ = cheerio.load(html);
+ const msg = $('.error-message').text();
+ expect(msg).to.match(/@adobe\/react-spectrum is not compatible/);
+ });
+});

packages/astro/test/fixtures/error-react-spectrum/astro.config.mjs

@@ -0,0 +1,7 @@
+import { defineConfig } from 'astro/config';
+import react from '@astrojs/react';
+
+// https://astro.build/config
+export default defineConfig({
+ integrations: [react()],
+});

packages/astro/test/fixtures/error-react-spectrum/package.json

@@ -0,0 +1,15 @@
+{
+ "name": "@test/error-react-spectrum",
+ "version": "0.0.0",
+ "private": true,
+ "dependencies": {
+ "astro": "workspace:*",
+ "@astrojs/react": "workspace:*",
+ "@adobe/react-spectrum": "^3.17.0",
+ "react": "^18.0.0",
+ "react-dom": "^18.0.0"
+ }
+}
+
+
+

packages/astro/test/fixtures/error-react-spectrum/src/pages/index.astro

@@ -0,0 +1,19 @@
+---
+// Just importing causes a failure
+import '@adobe/react-spectrum';
+---
+
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width" />
+ <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+ <style>
+ </style>
+ </head>
+ <body>
+ <main>
+ testing
+ </main>
+ </body>
+</html>