The default React app does not work at all

[gregg-cbs]

🐛 bug report

Preflight Checklist

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

Description of the problem

React app does not load anything and produces a white screen. The console is full of errors.

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

Cant run a react app.

To Reproduce

Create a new react app in firefox and notice the issues.

Here is my sandbox: https://codesandbox.io/s/hidden-feather-5zvh26

Link to sandbox: link

[alexnm]

Hi @gregg-cbs, we deployed a change to the product today and you should be getting the new editor for sandboxes, can you let us know if you still have the issue? I loaded your sandbox and it looks ok

[nrayann]

For me, the most of my React sandboxes are crashing the browser, very slow or not working.

https://codesandbox.io/p/sandbox/resolucao-props-atividade-07-botao-mp853n

https://codesandbox.io/p/sandbox/props-atividade-07-botao-xrcwxl

[nrayann]

https://codesandbox.io/p/sandbox/resolucao-props-atividade-09-cartao-de-contato-caramelo-9m4z44

[alexnm]

@nrayann can you give me a few more details about your issues with the editor? which browser are you loading this in? and can you expand or copy-paste some of the error messages you get in the first sandbox?

I tried all your example in Firefox and Chrome this morning and they work as expected. Wondering if you caught a period of time last evening where we had some overload in our infrastructure. if the problem persists, let me know.

[nrayann]

I am using Chrome. I am trying to open the first sandbox link I sent but it doesn't open...

Errors I am seeing since yesterday: The page takes time to load, or the page crashes, or the page and editor loads but with a blank screen on browser area, or the hole page is black.

I am worried because I use these sandboxes in my classes and I have a class tonight.

https://codesandbox.io/p/devbox/components-atividade-03-componentizacao-8xmqkn

[nrayann]

I downloaded Firefox and it seems to be OK on it, but the problem persists on Chrome

[gregg-cbs]

I am also noticing refresh issues in Chrome. Where if i change code it acts like it has refreshed the preview but i need to close the preview and reopen it to actually see the changes.

Sandbox I am working on is this one (the new editor, you need to bring back the play button for preview) https://codesandbox.io/p/sandbox/ckeditor-forked-pjtv4g?file=%2Fsrc%2Frichtext.js%3A19%2C18

Sometimes changes reflect othertimes they dont.

[christianalfoni]

@nrayann We are having an issue with Cloudflare. For some reason it returns partial content on our bundled JS. This happens randomly and we are on it. Doing a hard refresh normally fixes it 👍 This has the highest priority on our end now, so hopefully it is resolved soon.

About the performance issues (freezes) you see there, I am not sure how that could happen. The Sandboxes themselves are very simple, so I think this is more about installing the editor. If you are in a state of a successfully installed editor, does this freeze still happen when you refresh?

@gregg-cbs When you say you need to close the preview and open it again, did you also try hitting "refresh" button? Or did it only work when you closed the whole preview and opened it again? I forked your sandbox and can not reproduce the issue, could you describe the changes you make when it fails?

I am contacting some colleagues about the bundler and its ability to detect infinite loops 👍

Thanks for taking the time to write down these issues and help us resolve them! We are making a big shift here which impacts our infra and UX, but we are working hard on resolving it, thanks for your patience 😄

NOTE! You can always switch back to the V1 editor through the settings in the Dashboard.

[nrayann]

@christianalfoni for now I can't open the sandbox to check it, the page becomes unresponsive before the page loads, if it opens I will try to change the editor version.

[gregg-cbs]

@gregg-cbs When you say you need to close the preview and open it again, did you also try hitting "refresh" button? Or did it only work when you closed the whole preview and opened it again? I forked your sandbox and can not reproduce the issue, could you describe the changes you make when it fails?

I have to close the preview window and open it again - i was confused how to open the preview window by the way, the plus icon is not obvious enough. Refreshing the preview does not help. I dont know if I will have time to look into what exactly causes the issue today, its been one of those days where nothing is going right and i am behind on time.

[CompuIves]

Hey! We did some fixes with preview updates on save, can you still reproduce this issue?

[ckifer]

I know this is a separate issue but I can't get TypeScript or Intellisense to work at all in the beta editor, I haven't been able to on any internet connection or any browser.

I've tried connecting to VPN, off VPN, on public internet, on my phone hotspot - nothing can connect to the TS server. Lots of errors in the console. Have tried both Mac and Windows computers.

The non-beta editor works fine - there shouldn't be a difference between the two from a customer perspective on what gets blocked or not in terms of network stuff...

[gregg-cbs]

@CompuIves - Issue is still prevalent in Firefox. Just created a new browser based sandbox with react app + ts template and getting a blank preview screen. I am logged into codesandbox on a brand new linux machine, so its not cache or anything else.

Console:

[nfjdu]

Had the same error - site was loading too long, then just crash.. Had this in console

SOLUTION(for me): Dev Tools -> Application -> Storage -> Clear site data + Dev Tools -> Application -> Service Workers -> See all registrations -> Find all 'codesandbox' related workers and unregister them Then just reload the page

[christianalfoni]

@ckifer Hi there!

I see in the log that it is trying to download d3-color@1 - 2, this is an invalid package version. What does this package version look like in your package.json?

@gregg-cbs

There seems to be a setting in your browser that blocks BrowserFS. For our new editor and previews we will shortly deprecate all legacy assets, including this BrowserFS. I am very curious what kind of security settings you have that disables it though 🤔 "No available storage method found" also peaks my interest there. That might be the root cause.

@nfjdu Thanks for the tip! We have identified that we are making a lot unnecessary SVG requests during installation of the editor (Like in the many hundreds), which might be the reason. That it suddenly worked after a reset is a bit puzzling though. We are sending out an email to all beta testers shortly and will bring this tip in there. Our introduction of service workers in combination with making big changes to the editor has caused some unwanted side effects of users being on older versions of the editor, but things are stabilising now 😄

[ckifer]

@christianalfoni The team solved this in a recent beta version, I've been working with the feedback team to get it fixed. There shouldn't be TS server or autocomplete issues because of a problem installing a dependency (or at least there never was in previous versions of the codesandbox)

There was no invalid package version as far as I could tell. Not really sure what the issue is other than victory-vendor (the package that made this happen every time) is a CJS mirror of d3 and has some funky things in their setup. All good now though, thanks!

[gregg-cbs]

There seems to be a setting in your browser that blocks BrowserFS. For our new editor and previews we will shortly deprecate all legacy assets, including this BrowserFS. I am very curious what kind of security settings you have that disables it though 🤔 "No available storage method found" also peaks my interest there. That might be the root cause.

@ckifer You could be right! I use Firefox Developer Edition with strict-ish security rules. Maybe one of those rules are blocking BrowserFS. I dont see anything obvious here:

[CompuIves]

I could be wrong, from what I can understand from the screenshot BrowserFS is either trying to access localStorage or IndexedDB (which is uses to create a persisted filesystem) and it errors out when it tries to access it.

On Thu, Dec 21 2023 at 11:08 AM, gregg-cbs < @.*** > wrote:

There seems to be a setting in your browser that blocks BrowserFS. For our new editor and previews we will shortly deprecate all legacy assets, including this BrowserFS. I am very curious what kind of security settings you have that disables it though 🤔 "No available storage method found" also peaks my interest there. That might be the root cause.

@ckifer ( https://github.com/ckifer ) You could be right! I use Firefox Developer Edition with strict-ish security rules. Maybe one of those rules are blocking BrowserFS. I dont see anything obvious here: image.png (view on web) ( https://github.com/codesandbox/codesandbox-client/assets/57114335/e7fcfc08-d4e8-406e-aa95-c8c9d399f30c )

— Reply to this email directly, view it on GitHub ( https://github.com/codesandbox/codesandbox-client/issues/8191#issuecomment-1865987336 ) , or unsubscribe ( https://github.com/notifications/unsubscribe-auth/AAEPKCEWDIS5TTOFYKNNN33YKQDCHAVCNFSM6AAAAAA7TINFY6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNRVHE4DOMZTGY ). You are receiving this because you were mentioned. Message ID: <codesandbox/codesandbox-client/issues/8191/1865987336 @ github. com>