fix(transform): suppress React Fragment data-ds prop warning in vite and webpack

Add the same console.error filter already present in the turbopack
loader preamble to the Vite and Webpack plugins. Suppresses React's
"Invalid prop `data-ds` supplied to React.Fragment" warning that fires
when a component resolves to Fragment at runtime via a dynamic
expression.

Author: Narrator

packages/domscribe-transform/src/plugins/vite/vite.plugin.ts

@@ -304,6 +304,23 @@ export function domscribe(options: VitePluginOptions = {}): Plugin {
     transformIndexHtml(): IndexHtmlTransformResult | undefined {
       const tags: HtmlTagDescriptor[] = [];
 
+      // Suppress React's "Invalid prop `data-ds` supplied to React.Fragment"
+      // warning.  Fires when a component resolves to Fragment at runtime
+      // (e.g. `const P = hasKey ? dynamic(...) : Fragment`).  Harmless but
+      // clutters the console and triggers error overlays.
+      tags.push({
+        tag: 'script',
+        children:
+          `if(!window.__DOMSCRIBE_CONSOLE_PATCHED__){` +
+          `window.__DOMSCRIBE_CONSOLE_PATCHED__=true;` +
+          `var _ce=console.error;` +
+          `console.error=function(){` +
+          `if(typeof arguments[0]==='string'&&arguments[0].indexOf('data-ds')!==-1&&arguments[0].indexOf('React.Fragment')!==-1)return;` +
+          `return _ce.apply(console,arguments)` +
+          `}}`,
+        injectTo: 'head-prepend',
+      });
+
       // Inject relay port for overlay discovery
       // The overlay (browser UI) needs to know which port to connect to
       if (relayPort && relayHost) {
@@ -338,10 +355,7 @@ export function domscribe(options: VitePluginOptions = {}): Plugin {
         });
       }
 
-      if (tags.length > 0) {
-        return { html: '', tags };
-      }
-      return undefined;
+      return { html: '', tags };
     },
   };
 }

packages/domscribe-transform/src/plugins/webpack/webpack.plugin.ts

@@ -268,6 +268,21 @@ export class DomscribeWebpackPlugin {
     const headTags: string[] = [];
     const bodyTags: string[] = [];
 
+    // Suppress React's "Invalid prop `data-ds` supplied to React.Fragment"
+    // warning.  Fires when a component resolves to Fragment at runtime
+    // (e.g. `const P = hasKey ? dynamic(...) : Fragment`).
+    headTags.push(
+      `<script>` +
+        `if(!window.__DOMSCRIBE_CONSOLE_PATCHED__){` +
+        `window.__DOMSCRIBE_CONSOLE_PATCHED__=true;` +
+        `var _ce=console.error;` +
+        `console.error=function(){` +
+        `if(typeof arguments[0]==='string'&&arguments[0].indexOf('data-ds')!==-1&&arguments[0].indexOf('React.Fragment')!==-1)return;` +
+        `return _ce.apply(console,arguments)` +
+        `}}` +
+        `</script>`,
+    );
+
     // Add relay script tag to head
     const relayTag = this.getRelayScriptTag();
     if (relayTag) {