diff --git a/packages/app/src/prompt/PromptGetCodeModal.vue b/packages/app/src/prompt/PromptGetCodeModal.vue index d2b1a30be11..1edd9cc8c81 100644 --- a/packages/app/src/prompt/PromptGetCodeModal.vue +++ b/packages/app/src/prompt/PromptGetCodeModal.vue @@ -46,11 +46,11 @@ const closeModal = () => { const container = ref(null) const error = ref(null) const ReactGetCodeModalContents = ref(null) -const reactRoot = ref(null) +const containerReactRootMap = new WeakMap() const promptStore = usePromptStore() const maybeRenderReactComponent = () => { - if (!ReactGetCodeModalContents.value || !!error.value) { + if (!ReactGetCodeModalContents.value || !!error.value || !container.value) { return } @@ -63,11 +63,18 @@ 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 = () => { @@ -75,7 +82,13 @@ const unmountReactComponent = () => { return } - reactRoot.value?.unmount() + const reactRoot = containerReactRootMap.get(container.value) + + if (!reactRoot) { + return + } + + reactRoot.unmount() } onMounted(maybeRenderReactComponent) diff --git a/packages/app/src/prompt/PromptMoreInfoNeededModal.vue b/packages/app/src/prompt/PromptMoreInfoNeededModal.vue index 4f638cdf49e..a1e9609dca0 100644 --- a/packages/app/src/prompt/PromptMoreInfoNeededModal.vue +++ b/packages/app/src/prompt/PromptMoreInfoNeededModal.vue @@ -46,11 +46,11 @@ const closeModal = () => { const container = ref(null) const error = ref(null) const ReactMoreInfoNeededModalContents = ref(null) -const reactRoot = ref(null) +const containerReactRootMap = new WeakMap() const promptStore = usePromptStore() const maybeRenderReactComponent = () => { - if (!ReactMoreInfoNeededModalContents.value || !!error.value) { + if (!ReactMoreInfoNeededModalContents.value || !!error.value || !container.value) { return } @@ -65,11 +65,18 @@ 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 = () => { @@ -77,7 +84,13 @@ const unmountReactComponent = () => { return } - reactRoot.value?.unmount() + const reactRoot = containerReactRootMap.get(container.value) + + if (!reactRoot) { + return + } + + reactRoot.unmount() } onMounted(maybeRenderReactComponent) diff --git a/packages/driver/cypress/e2e/commands/prompt/prompt.cy.ts b/packages/driver/cypress/e2e/commands/prompt/prompt.cy.ts index 83ef624492a..68572046cc4 100644 --- a/packages/driver/cypress/e2e/commands/prompt/prompt.cy.ts +++ b/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!']) }) })