fix: (cy.prompt) ensure that we do not attach a vue ref to the react root in the cy.prompt modals (#32011)

* fix: (studio) ensure that we do not attach a vue ref to the react root in the studio panel

* fix test

Author: ryanthemanuel

packages/app/src/prompt/PromptGetCodeModal.vue

@@ -46,11 +46,11 @@ const closeModal = () => {
 const container = ref<HTMLDivElement | null>(null)
 const error = ref<string | null>(null)
 const ReactGetCodeModalContents = ref<GetCodeModalContentsShape | null>(null)
-const reactRoot = ref<Root | null>(null)
+const containerReactRootMap = new WeakMap<HTMLElement, Root>()
 const promptStore = usePromptStore()
 
 const maybeRenderReactComponent = () => {
-  if (!ReactGetCodeModalContents.value || !!error.value) {
+  if (!ReactGetCodeModalContents.value || !!error.value || !container.value) {
     return
   }
 
@@ -63,19 +63,32 @@ const maybeRenderReactComponent = () => {
     },
   })
 
-  if (!reactRoot.value) {
-    reactRoot.value = window.UnifiedRunner.ReactDOM.createRoot(container.value)
+  // Store the react root in a weak map keyed by the container. We do this so that we have a reference
+  // to it that's tied to the container value but absolutely do not want to use vue to do the tracking.
+  // If vue tracks it (e.g. using a ref) it creates proxies that do not play nicely with React in
+  // production
+  let reactRoot = containerReactRootMap.get(container.value)
+
+  if (!reactRoot) {
+    reactRoot = window.UnifiedRunner.ReactDOM.createRoot(container.value) as Root
+    containerReactRootMap.set(container.value, reactRoot)
   }
 
-  reactRoot.value?.render(panel)
+  reactRoot.render(panel)
 }
 
 const unmountReactComponent = () => {
   if (!ReactGetCodeModalContents.value || !container.value) {
     return
   }
 
-  reactRoot.value?.unmount()
+  const reactRoot = containerReactRootMap.get(container.value)
+
+  if (!reactRoot) {
+    return
+  }
+
+  reactRoot.unmount()
 }
 
 onMounted(maybeRenderReactComponent)

packages/app/src/prompt/PromptMoreInfoNeededModal.vue

@@ -46,11 +46,11 @@ const closeModal = () => {
 const container = ref<HTMLDivElement | null>(null)
 const error = ref<string | null>(null)
 const ReactMoreInfoNeededModalContents = ref<MoreInfoNeededModalContentsShape | null>(null)
-const reactRoot = ref<Root | null>(null)
+const containerReactRootMap = new WeakMap<HTMLElement, Root>()
 const promptStore = usePromptStore()
 
 const maybeRenderReactComponent = () => {
-  if (!ReactMoreInfoNeededModalContents.value || !!error.value) {
+  if (!ReactMoreInfoNeededModalContents.value || !!error.value || !container.value) {
     return
   }
 
@@ -65,19 +65,32 @@ const maybeRenderReactComponent = () => {
     },
   })
 
-  if (!reactRoot.value) {
-    reactRoot.value = window.UnifiedRunner.ReactDOM.createRoot(container.value)
+  // Store the react root in a weak map keyed by the container. We do this so that we have a reference
+  // to it that's tied to the container value but absolutely do not want to use vue to do the tracking.
+  // If vue tracks it (e.g. using a ref) it creates proxies that do not play nicely with React in
+  // production
+  let reactRoot = containerReactRootMap.get(container.value)
+
+  if (!reactRoot) {
+    reactRoot = window.UnifiedRunner.ReactDOM.createRoot(container.value) as Root
+    containerReactRootMap.set(container.value, reactRoot)
   }
 
-  reactRoot.value?.render(panel)
+  reactRoot.render(panel)
 }
 
 const unmountReactComponent = () => {
   if (!ReactMoreInfoNeededModalContents.value || !container.value) {
     return
   }
 
-  reactRoot.value?.unmount()
+  const reactRoot = containerReactRootMap.get(container.value)
+
+  if (!reactRoot) {
+    return
+  }
+
+  reactRoot.unmount()
 }
 
 onMounted(maybeRenderReactComponent)

packages/driver/cypress/e2e/commands/prompt/prompt.cy.ts

@@ -12,13 +12,13 @@ describe('src/cy/commands/prompt', () => {
     // TODO: add more tests when cy.prompt is built out, but for now this just
     // verifies that the command executes without throwing an error
     // @ts-expect-error - this will not error when we actually release the experimentalPromptCommand flag
-    cy.prompt('Hello, world!')
+    cy.prompt(['Hello, world!'])
 
     cy.visit('http://www.barbaz.com:3500/fixtures/dom.html')
 
     cy.origin('http://www.barbaz.com:3500', () => {
       // @ts-expect-error - this will not error when we actually release the experimentalPromptCommand flag
-      cy.prompt('Hello, world!')
+      cy.prompt(['Hello, world!'])
     })
   })
 
@@ -37,6 +37,6 @@ describe('src/cy/commands/prompt', () => {
 
     cy.visit('http://www.foobar.com:3500/fixtures/dom.html')
     // @ts-expect-error - this will not error when we actually release the experimentalPromptCommand flag
-    cy.prompt('Hello, world!')
+    cy.prompt(['Hello, world!'])
   })
 })