https://www.growthbook.io/ logo
#announcements
Title
# announcements
a

ambitious-parrot-39602

07/24/2023, 4:00 PM
it’s not clear from the documentation: when do the dom mutations get applied for the react sdk? I’m having some trouble getting the visual editor to work in my react app, and I think it might be due to the order of operations of when the mutations are applied and when my component is mounted
f

fresh-football-47124

07/24/2023, 4:00 PM
@swift-helmet-3648 ^
s

swift-helmet-3648

07/24/2023, 4:07 PM
Hi @ambitious-parrot-39602 Using the Visual Editor with SPAs like React can be a little wonky. We mention this in the docs here (https://docs.growthbook.io/app/visual) If you're using React, we generally recommend using the React SDK w/ Feature Flags for a smoother integration. FYI what's happening under the hood - The Visual Editor is attached to a MutationObserver that is monitoring all DOM updates on the page and waits until the most recent DOM update to apply it's own mutations. With React and Vue, we've found that this doesn't work 100% of the time and results in some weird race conditions.
a

ambitious-parrot-39602

07/24/2023, 5:38 PM
gotcha. so this used to work using the old method where we inject the js via the script tag method (which i think is deprecated?) - ideally i’d love to get the visual editor working as we have some non-technical folks wanting to use it and run tests, which i don’t think woudl be possible using feature flags?
does the mutation observer get set up as soon as the growthbook param is valid passed into the
GrowthBookProvider
?
s

swift-helmet-3648

07/24/2023, 5:44 PM
I understand. Do you remember exactly what it was that worked previously with the old method? We want to address any regressions that come up. RE: MutationObserver - it is attached when we detect that the current page (URL) is targeted by a running experiment. This happens a few steps after instantiating the GrowthBookProvider, and always after making the first fetch to the features endpoint
a

ambitious-parrot-39602

07/24/2023, 6:17 PM
do i need to manually communicate this change to the provider? or does it happen automatically?
s

swift-helmet-3648

07/24/2023, 6:18 PM
You do need to invoke
setURL
within an SPA like React since the route changes may not behave like normal browser navigation events ... Here is a section in the docs with an example https://docs.growthbook.io/app/visual#spa-support
a

ambitious-parrot-39602

07/24/2023, 7:45 PM
to answer your question about the old way, we just had a hook that did the following:
Copy code
window.GROWTHBOOK_CONFIG = ...

const script = document.createElement('script');
script.setAttribute('src',<SCRIPT LOCATION>);
document.head.appendChild(script);
👍 1
that worked for us
s

swift-helmet-3648

07/24/2023, 9:36 PM
Glad that
setURL
worked
a

ambitious-parrot-39602

07/24/2023, 9:45 PM
ah, no, i meant that old method used to work. i still can’t get it to work using setURL
i’m doing setURL with each router change event, and also making sure that growthbook is initialized into the provider
is there a way to manually call the dom mutation?
or to verify somewhere in logs to see when dom mutation is trying to be applied? visiblity on this would help
s

swift-helmet-3648

07/24/2023, 9:48 PM
One thing you can try is opening the GrowthBook Devtools panel, finding the experiment, and manually selecting a variation
The variations should have their respective domMutations listed ... And you should see them take effect as you select them
a

ambitious-parrot-39602

07/24/2023, 9:51 PM
oh you mean with the growthbook extension? or doing it through the dashboard that appends the ?param ?
appending the param doesn’t work for me, which is why i went down this path
s

swift-helmet-3648

07/24/2023, 9:51 PM
The extension
Ah I see, well the param may not work for other reasons ... Like the experiment not being sent to the client for example
a

ambitious-parrot-39602

07/25/2023, 4:11 AM
from the extension, it works. but not when clicking on “Preview” link in the experiment dash. is that expected? (i definitely see the expeirment data sent down)
s

swift-helmet-3648

07/25/2023, 4:35 AM
Is the experiment running or in draft state?
a

ambitious-parrot-39602

07/25/2023, 4:57 AM
draft
but it doesn’t work in running state either
here’s what could be helpful: do you have a very basic create react app SPA where you can show me the visual editor mutations working?
s

swift-helmet-3648

07/25/2023, 4:26 PM
Hm, I have one locally. Is there something I can show you from it?
Hi James, if you want we can schedule time to go over this on a call. Let me know how I can best help
There are probably improvements we can make to our documentation or our onboarding for this workflow so would be happy to get input on the process
a

ambitious-parrot-39602

07/25/2023, 7:54 PM
could you share the code? i think i can get clarity by looking at it. if not, i’d love to schedule a time to chat
s

swift-helmet-3648

07/25/2023, 9:02 PM
Ok, let me clean it up a bit and get back to you
🙌 1
a

ambitious-parrot-39602

07/25/2023, 10:07 PM
if it’s easier, my email is james@sudowrite.com
s

swift-helmet-3648

07/26/2023, 2:55 AM
a

ambitious-parrot-39602

07/26/2023, 3:38 PM
ok i figured it out! it turns out I wasn’t properly passing in the id attribute!
so then it gb was never bucketing into the experiment (afaiu)
s

swift-helmet-3648

07/26/2023, 4:36 PM
Hmm, okay. The preview links didn't work despite that though?
a

ambitious-parrot-39602

07/27/2023, 3:28 PM
when i didn’t set id, the preview links did not work. this makes sense to me, as GB wouldn’t know how to bucket
7 Views