Skip to main content

When using the quickstart-react scaffold provided, I could use the live preview with the ngrok URL that was generated, but upon making a few changes, the Live Preview broke.

image


The app was still working perfectly fine independently when opened in a new tab via localhost or the ngrok link. Trying to use the Monday preview, however, would give me this error:


`Uncaught TypeError: can't access property "forEach", hook.renderers is undefined`

I created a fresh React app using create-react-app v4.0.3 and set it up to expose with ngrok, but that would also fail (only within the Monday preview) with the same error.


When running build and uploading the zipped build folder, the preview works fine. I’m not sure if this is an issue with the way the Live Preview is attempting to render the app within its iframe or if it’s an issue with my app (or both). Is there a specific version of node/react/react-scripts that is required to use to get the preview working?

Hey @BuzzBumble 👋


It does sound a little odd! After some digging online, we were able to identify that the issue might be related to a version of the react-scripts you are running. The comments seem to suggest that downgrading to 3.0.1 should work:


github.com/facebook/create-react-app

I hope this helps!


That said, I’m going to go ahead and reach out to our developers to see if this is something we can adjust on a more long-term basis. Thank you for bringing this to our attention.


-Alex

Thanks, @AlexSavchuk !


I did find that thread at some point and downgrading react-scripts to 3.4.0 rather than 3.0.1 (since the quickstart-react scaffold uses 3.4.0) also works. There’s a bit more configuration to add to get JSX Transform to work and all that, but at a base level this seems to fix the issue.


Edit:


This is apparently only a problem specifically within the Monday live preview and specifically from my Windows machine. The live preview seems to work fine on my Linux and OSX machines, but on Windows it breaks with that same error (without downgrading react-scripts etc)


Yet Another Edit:


The problem seems to have been caused by AdGuard (Which was running on my computer, so disabling the browser extension wasn’t making a difference). It was likely messing with the way the React DevTools Global Hook was being loaded in

@BuzzBumble


Thanks so much for shedding even more light on the behaviour here 🙂 I’m sorry to hear this was an ad-block kind of issue all along - but I appreciate you sharing that context for others that may have a similar issue in the future.


I hope your app building is otherwise a smooth sail 🙂


-Alex

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

Terms & ConditionsCookie settings