Hi everyone! We've been using Growthbook, specifi...
# ask-questions
b
Hi everyone! We've been using Growthbook, specifically the React SDK, and love it. We're now wanting to use the Visual Editor, but seem to be having some issues with it not working when previewing or putting live. When creating the experiment with the Growthbook tool, everything works as expected when switching between the versions. However, even when previewing the variations with the query params, I no longer see the changes being made. I've had issues in the past with JS frameworks like React battling with other libraries that change the DOM (like Growthbook), and I'm wondering if that's likely what's happening here. Attached is a screenshot of the Growthbook extension showing that the experiment should be on. However, the text is not updated. I've also included the debug pane if that helps. Other than this, Thanks!
To add more detail, I realized that I can actually click the variations in the first screenshot to switch between them, and THAT works. So it seems like the initial load ends up being overwritten by a re-render? Just wondering if this is correct, and whether there's a way to workaround this problem in react.
f
it should work fine with React - sometimes the URL targeting is different from the testing url used to set up the visual test- can you confirm that the experiment should be loading on that page?
b
Thanks for the reply! I tried a few variations of the "open URL" and the target URL, from using wildcards to regex's to the specific page I'm expecting. The second screenshot shows the
/dashboard*
that says it should load on that page, and that's the page I tested against afterwards that didn't work. So works in the GB editor mode, doesn't work when forcing the parameter on via query params or when running the experiment live.
r
Hi Harrison, our Visual Editor expert will be back from the holidays early next week. I'll ask him to take a look.
b
Thanks!
s
Hi @bright-nail-49463 Thanks for providing those screenshots. Every screenshot you've provided indicates that the SDK is configured correctly. I have to assume that it's a React issue, which happens rarely but does happen as we've noted in our docs. Usually, our SDK will be smart enough to re-apply the visual changes in the case that there are updates to the page. However it seems like that's not happening here. Is it possible that the DOM is being re-rendered in a way that breaks the CSS selectors in your DOM mutations array? For example, a few of them use the
nth-child
css selector - it's possible that the page has been modified such that these selectors aren't valid anymore. Let me know if that makes sense or not.
b
I suppose that's entirely possible, I haven't looked too much into it but I can double check today