3 files changed, 45 insertions, 15 deletions
diff --git a/packages/renderers/renderer-react/index.js b/packages/renderers/renderer-react/index.js
index 2d2c91fb0..fdebd3fcb 100644
--- a/packages/renderers/renderer-react/index.js
+++ b/packages/renderers/renderer-react/index.js
@@ -1,8 +1,7 @@
 export default {
   name: '@astrojs/renderer-react',
-  client: './client',
-  server: './server',
-  knownEntrypoints: ['react', 'react/jsx-runtime', 'react-dom', 'react-dom/server.js'],
+  client: './client.js',
+  server: './server.js',
   jsxImportSource: 'react',
   jsxTransformOptions: async () => {
     const {
@@ -12,4 +11,18 @@ export default {
       plugins: [jsx({}, { runtime: 'automatic', importSource: 'react' })],
     };
   },
+  viteConfig() {
+    return {
+      optimizeDeps: {
+        include: ['@astrojs/renderer-react/client.js', 'react', 'react/jsx-runtime', 'react/jsx-dev-runtime', 'react-dom'],
+        exclude: ['@astrojs/renderer-react/server.js'],
+      },
+      resolve: {
+        dedupe: ['react', 'react-dom'],
+      },
+      ssr: {
+        external: ['react-dom/server.js'],
+      },
+    };
+  },
 };
diff --git a/packages/renderers/renderer-react/package.json b/packages/renderers/renderer-react/package.json
index c397c156d..de7a41892 100644
--- a/packages/renderers/renderer-react/package.json
+++ b/packages/renderers/renderer-react/package.json
@@ -4,14 +4,15 @@
   "type": "module",
   "exports": {
     ".": "./index.js",
-    "./client": "./client.js",
-    "./server": "./server.js",
+    "./*": "./*",
+    "./client.js": "./client.js",
+    "./server.js": "./server.js",
     "./package.json": "./package.json"
   },
   "dependencies": {
+    "@babel/plugin-transform-react-jsx": "^7.14.9",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "@babel/plugin-transform-react-jsx": "^7.14.5"
+    "react-dom": "^17.0.2"
   },
   "engines": {
     "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
diff --git a/packages/renderers/renderer-react/server.js b/packages/renderers/renderer-react/server.js
index f97569616..905390f38 100644
--- a/packages/renderers/renderer-react/server.js
+++ b/packages/renderers/renderer-react/server.js
@@ -1,14 +1,24 @@
-import { Component as BaseComponent, createElement as h, PureComponent } from 'react';
-import { renderToStaticMarkup as reactRenderToStaticMarkup, renderToString } from 'react-dom/server.js';
+import React from 'react';
+import ReactDOM from 'react-dom/server.js';
 import StaticHtml from './static-html.js';
 
 const reactTypeof = Symbol.for('react.element');
 
+function errorIsComingFromPreactComponent(err) {
+  return err.message && (err.message.startsWith("Cannot read property '__H'") || err.message.includes("(reading '__H')"));
+}
+
 function check(Component, props, children) {
+  // Note: there are packages that do some unholy things to create "components".
+  // Checking the $$typeof property catches most of these patterns.
+  if (typeof Component === 'object') {
+    const $$typeof = Component['$$typeof'];
+    return $$typeof && $$typeof.toString().slice('Symbol('.length).startsWith('react');
+  }
   if (typeof Component !== 'function') return false;
 
   if (Component.prototype != null && typeof Component.prototype.render === 'function') {
-    return BaseComponent.isPrototypeOf(Component) || PureComponent.isPrototypeOf(Component);
+    return React.Component.isPrototypeOf(Component) || React.PureComponent.isPrototypeOf(Component);
   }
 
   let error = null;
@@ -20,10 +30,12 @@ function check(Component, props, children) {
         isReactComponent = true;
       }
     } catch (err) {
-      error = err;
+      if (!errorIsComingFromPreactComponent(err)) {
+        error = err;
+      }
     }
 
-    return h('div');
+    return React.createElement('div');
   }
 
   renderToStaticMarkup(Tester, props, children, {});
@@ -35,12 +47,16 @@ function check(Component, props, children) {
 }
 
 function renderToStaticMarkup(Component, props, children, metadata) {
-  const vnode = h(Component, { ...props, children: h(StaticHtml, { value: children }), innerHTML: children });
+  delete props['class'];
+  const vnode = React.createElement(Component, {
+    ...props,
+    children: React.createElement(StaticHtml, { value: children }),
+  });
   let html;
   if (metadata && metadata.hydrate) {
-    html = renderToString(vnode);
+    html = ReactDOM.renderToString(vnode);
   } else {
-    html = reactRenderToStaticMarkup(vnode);
+    html = ReactDOM.renderToStaticMarkup(vnode);
   }
   return { html };
 }