diff options
| author |  Drew Powers <1369770+drwpow@users.noreply.github.com>
| 2021-06-29 19:37:50 -0600 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2021-06-29 21:37:50 -0400 |
| commit | d1785d80c3c6f1756f6186f71d77aed1504676da (patch) | |
| tree | de650bc88d40f8e9138587dc66db2374c3406eb5 | |
| parent | 44355d4ca9f003831a8c66cdf1d50a702bb4eecf (diff) | |
| download | astro-d1785d80c3c6f1756f6186f71d77aed1504676da.tar.gz astro-d1785d80c3c6f1756f6186f71d77aed1504676da.tar.zst astro-d1785d80c3c6f1756f6186f71d77aed1504676da.zip | |
Add test for React SSR + window (#581)
* Add test for React SSR + window
* Add helpful error message on window undefined in SSR
Fixes #551
4 files changed, 45 insertions, 1 deletions
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 (<div>{window.location.search}</div>); +} + +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'; +--- +<html> +<body> + <GetSearch /> +</body> +</html> 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); |