From d1785d80c3c6f1756f6186f71d77aed1504676da Mon Sep 17 00:00:00 2001
From: Drew Powers <1369770+drwpow@users.noreply.github.com>
Date: Tue, 29 Jun 2021 19:37:50 -0600
Subject: [PATCH] Add test for React SSR + window (#581)
* Add test for React SSR + window
* Add helpful error message on window undefined in SSR
Fixes #551
---
packages/astro/src/runtime.ts | 20 ++++++++++++++++++-
.../src/components/GetSearch.jsx | 7 +++++++
.../react-component/src/pages/window.astro | 8 ++++++++
packages/astro/test/react-component.test.js | 11 ++++++++++
4 files changed, 45 insertions(+), 1 deletion(-)
create mode 100644 packages/astro/test/fixtures/react-component/src/components/GetSearch.jsx
create mode 100644 packages/astro/test/fixtures/react-component/src/pages/window.astro
diff --git a/packages/astro/src/runtime.ts b/packages/astro/src/runtime.ts
index fe7890e28..bf1ad7235 100644
--- a/packages/astro/src/runtime.ts
+++ b/packages/astro/src/runtime.ts
@@ -48,7 +48,12 @@ type LoadResultSuccess = {
};
type LoadResultNotFound = { statusCode: 404; error: Error; collectionInfo?: CollectionInfo };
type LoadResultRedirect = { statusCode: 301 | 302; location: string; collectionInfo?: CollectionInfo };
-type LoadResultError = { statusCode: 500 } & ({ type: 'parse-error'; error: CompileError } | { type: 'not-found'; error: CompileError } | { type: 'unknown'; error: Error });
+type LoadResultError = { statusCode: 500 } & (
+ | { type: 'parse-error'; error: CompileError }
+ | { type: 'ssr'; error: Error }
+ | { type: 'not-found'; error: CompileError }
+ | { type: 'unknown'; error: Error }
+);
export type LoadResult = (LoadResultSuccess | LoadResultNotFound | LoadResultRedirect | LoadResultError) & { collectionInfo?: CollectionInfo };
@@ -250,6 +255,19 @@ async function load(config: RuntimeConfig, rawPathname: string | undefined): Pro
};
}
+ if (err instanceof ReferenceError && err.toString().includes('window is not defined')) {
+ return {
+ statusCode: 500,
+ type: 'ssr',
+ error: new Error(
+ `[${reqPath}]
+ The window object is not available during server-side rendering (SSR).
+ Try using \`import.meta.env.SSR\` to write SSR-friendly code.
+ https://github.com/snowpackjs/astro/blob/main/docs/reference/api-reference.md#importmeta`
+ ),
+ };
+ }
+
if (err instanceof NotFoundError && rawPathname) {
const fileMatch = err.toString().match(/\(([^\)]+)\)/);
const missingFile: string | undefined = (fileMatch && fileMatch[1].replace(/^\/_astro/, '').replace(/\.proxy\.js$/, '')) || undefined;
diff --git a/packages/astro/test/fixtures/react-component/src/components/GetSearch.jsx b/packages/astro/test/fixtures/react-component/src/components/GetSearch.jsx
new file mode 100644
index 000000000..d3fee2f9a
--- /dev/null
+++ b/packages/astro/test/fixtures/react-component/src/components/GetSearch.jsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+function GetSearch() {
+ return ({window.location.search}
);
+}
+
+export default GetSearch
diff --git a/packages/astro/test/fixtures/react-component/src/pages/window.astro b/packages/astro/test/fixtures/react-component/src/pages/window.astro
new file mode 100644
index 000000000..e780f3c44
--- /dev/null
+++ b/packages/astro/test/fixtures/react-component/src/pages/window.astro
@@ -0,0 +1,8 @@
+---
+import GetSearch from '../components/GetSearch.jsx';
+---
+
+
+
+
+
diff --git a/packages/astro/test/react-component.test.js b/packages/astro/test/react-component.test.js
index 738664ad4..93f464d3c 100644
--- a/packages/astro/test/react-component.test.js
+++ b/packages/astro/test/react-component.test.js
@@ -42,6 +42,17 @@ React('Can load React', async () => {
assert.equal($('#arrow-fn-component').length, 1, 'Can use function components');
});
+React('Throws helpful error message on window SSR', async () => {
+ const result = await runtime.load('/window');
+ assert.match(
+ result.error.toString('utf8'),
+ `[/window]
+ The window object is not available during server-side rendering (SSR).
+ Try using \`import.meta.env.SSR\` to write SSR-friendly code.
+ https://github.com/snowpackjs/astro/blob/main/docs/reference/api-reference.md#importmeta`
+ );
+});
+
React('Can load Vue', async () => {
const result = await runtime.load('/');
if (result.error) throw new Error(result.error);