Codesandbox preview error when using React 19

[cherniavskii]

🐛 bug report

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project
  adheres to.
• I have searched the issue tracker for an issue that matches the one I want
  to file, without success.

Description of the problem

After React 19 was released, we noticed that some of our demos (e.g. https://mui.com/x/react-data-grid/#pro-plan) show an error when opened in Codesandbox: https://codesandbox.io/p/sandbox/floral-http-hll4y8

When the preview is opened in a new tab, the error isn't shown: https://hll4y8.csb.app/

How has this issue affected you? What are you trying to accomplish?

We get bug reports about this in our repo: mui/mui-x#15765

To Reproduce

Link to sandbox:

The error is only reproducible with React 19.

❌ With React 19: https://codesandbox.io/p/sandbox/elastic-forest-nhckjq
✅ With React 18: https://codesandbox.io/p/sandbox/rough-browser-xvhfll

It looks like the Codesandbox client patches the console.error function.
If I use console.log instead of console.error, the error is gone.
When I patched console.error myself, the error was gone too: https://codesandbox.io/p/sandbox/white-shadow-4hpjxn

Your Environment

Software	Name/Version
Сodesandbox	0.0.375
Browser	Chromium: 131.0.6778.85 (Official Build) (arm64)
Operating System	MacOS 15.1.1

[cherniavskii]

Looks like the issue is coming from the react devtools package used by https://codesandbox.io/p/preview-protocol.js in the preview editor:

https://github.com/facebook/react/blob/18-3-1/packages/react-devtools-shared/src/backend/console.js#L190

codesandbox-client/packages/sandbox-hooks/console/index.js

Lines 64 to 69 in 0dd52a7

	if (isIFramePreview && insideCodeSandboxPreview) {
	// This is a temporary fix for deprecating the V1 editor. We need to load both V1 and V2 preview protocol
	// and this is the simplest way to achieve that. Later everything will be V2 preview protocol
	(function LoadV2PreviewProtocol() {
	const script = document.createElement('script');
	script.src = 'https://codesandbox.io/p/preview-protocol.js';

[filipelima18]

Hi @cherniavskii - thanks for reporting this. I have forwarded this to our engineering team for analysis and we'll keep you posted once we have an update.

[CompuIves]

Looking at this right now!

[CompuIves]

Thanks a lot for the pointers, makes it much easier to debug. I think you're right, the react devtools are interfering. I cannot reproduce this error when opening the preview standalone, and the react devtools are loaded conditionally based on whether there they're in an iframe. I will update react devtools and deploy that to staging to see if the issue can be reproduced still.

[CompuIves]

Let's first verify if prod is fixed 😄

[CompuIves]

Interesting... I still see the error in prod but I cannot repro it in staging or dev... Need to dive a bit deeper into this. I still think it's related to react devtools.

[cherniavskii]

@CompuIves Could codesandbox.io/p/preview-protocol.js be cached by CDN or something? This is the behavior I see:

Screen.Recording.2025-01-10.at.22.30.47.mov

[CompuIves]

Ohhh you're right!! You're a genius! I will cache bust it as soon as I'm at my laptop again

…

On Fri, Jan 10, 2025 at 22:34, Andrew Cherniavskii < ***@***.*** > wrote: @CompuIves ( https://github.com/CompuIves ) Could codesandbox.io/p/preview-protocol.js ( https://codesandbox.io/p/preview-protocol.js ) be cached by CDN or something? This is the behavior I see: https://github.com/user-attachments/assets/913cd1b0-45d4-4e39-a120-f7a62d2c8bd3 — Reply to this email directly, view it on GitHub ( #8673 (comment) ) , or unsubscribe ( https://github.com/notifications/unsubscribe-auth/AAEPKCD5KHJPCSBQOKRBTQ32KA4FBAVCNFSM6AAAAABTI3KBVSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKOBUGMYTCMJWGM ). You are receiving this because you were mentioned. Message ID: <codesandbox/codesandbox-client/issues/8673/2584311163 @ github. com>

[CompuIves]

Forgot to follow up on this, but I did the cache bust at the time. Does it work for you now?

[cherniavskii]

Does it work for you now?

Not always, I can still reproduce the issue intermittently as in #8673 (comment)