Fixes using React.lazy and Suspense (#3160)

matthewp · web-flow · commit 1dc756eac003 · 2022-04-21T12:10:06.000-04:00
* Revert "Revert "Fixes using React.lazy and Suspense"" This reverts commit 62e93ec. * Adds a changeset * Fix ts errors * Remove netlify metadata folder
diff --git a/packages/integrations/netlify/src/integration-edge-functions.ts b/packages/integrations/netlify/src/integration-edge-functions.ts
@@ -86,6 +86,10 @@ export function netlifyEdgeFunctions({ dist }: NetlifyEdgeFunctionsOptions = {})
 			},
 			'astro:build:setup': ({ vite, target }) => {
 				if (target === 'server') {
+					vite.resolve = vite.resolve || {};
+					vite.resolve.alias = vite.resolve.alias || {};
+					const alias = vite.resolve.alias as Record<string, string>;
+					alias['react-dom/server'] = 'react-dom/server.browser'
 					vite.ssr = {
 						noExternal: true,
 					};
diff --git a/packages/integrations/netlify/test/edge-functions/deps.ts b/packages/integrations/netlify/test/edge-functions/deps.ts
@@ -1,3 +1,4 @@
 // @ts-nocheck
 export { fromFileUrl } from 'https://deno.land/std@0.110.0/path/mod.ts';
 export { assertEquals, assert } from 'https://deno.land/std@0.132.0/testing/asserts.ts';
+export * from 'https://deno.land/x/deno_dom/deno-dom-wasm.ts';
diff --git a/packages/integrations/netlify/test/edge-functions/edge-basic.test.ts b/packages/integrations/netlify/test/edge-functions/edge-basic.test.ts
@@ -1,20 +1,25 @@
 // @ts-ignore
 import { runBuild } from './test-utils.ts';
 // @ts-ignore
-import { assertEquals, assert } from './deps.ts';
+import { assertEquals, assert, DOMParser } from './deps.ts';
 
 // @ts-ignore
 Deno.test({
 	name: 'Edge Basics',
 	async fn() {
 		let close = await runBuild('./fixtures/edge-basic/');
 		const { default: handler } = await import(
-			'./fixtures/edge-basic/dist/edge-functions/entry.mjs'
+			'./fixtures/edge-basic/dist/edge-functions/entry.js'
 		);
 		const response = await handler(new Request('http://example.com/'));
 		assertEquals(response.status, 200);
 		const html = await response.text();
 		assert(html, 'got some html');
+
+		const doc = new DOMParser().parseFromString(html, `text/html`)!;
+		const div = doc.querySelector('#react');
+		assert(div, 'div exists');
+
 		await close();
 	},
 });
diff --git a/packages/integrations/netlify/test/edge-functions/fixtures/edge-basic/astro.config.mjs b/packages/integrations/netlify/test/edge-functions/fixtures/edge-basic/astro.config.mjs
@@ -1,10 +1,12 @@
 import { defineConfig } from 'astro/config';
 import { netlifyEdgeFunctions } from '@astrojs/netlify';
+import react from "@astrojs/react";
 
 export default defineConfig({
 	adapter: netlifyEdgeFunctions({
 		dist: new URL('./dist/', import.meta.url),
 	}),
+	integrations: [react()],
 	experimental: {
 		ssr: true
 	}
diff --git a/packages/integrations/netlify/test/edge-functions/fixtures/edge-basic/package.json b/packages/integrations/netlify/test/edge-functions/fixtures/edge-basic/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "astro": "workspace:*",
+    "@astrojs/react": "workspace:*",
     "@astrojs/netlify": "workspace:*"
   }
 }
diff --git a/packages/integrations/netlify/test/edge-functions/fixtures/edge-basic/src/components/React.jsx b/packages/integrations/netlify/test/edge-functions/fixtures/edge-basic/src/components/React.jsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default function() {
+	return (
+		<div id="react">testing</div>
+	)
+}
diff --git a/packages/integrations/netlify/test/edge-functions/fixtures/edge-basic/src/pages/index.astro b/packages/integrations/netlify/test/edge-functions/fixtures/edge-basic/src/pages/index.astro
@@ -1,3 +1,6 @@
+---
+import ReactComponent from '../components/React.jsx';
+---
 <html>
 <head><title>Testing</title></head>
 <body>
@@ -6,5 +9,6 @@
 	<ul>
 		<li><a href="/two/">Two</a></li>
 	</ul>
+	<ReactComponent />
 </body>
 </html>

Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,7 @@`
`4`	`4`	`"private": true,`
`5`	`5`	`"dependencies": {`
`6`	`6`	`"astro": "workspace:*",`
	`7`	`+ "@astrojs/react": "workspace:*",`
`7`	`8`	`"@astrojs/netlify": "workspace:*"`
`8`	`9`	`}`
`9`	`10`	`}`