codesandbox / codesandbox/codesandbox-client
Embed of Codesandbox results in browserfs JS error
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 13.6k
- Forks
- 2.4k
- Avg merge
- 6d 19h
- Merged PRs (30d)
- 2
Description
🐛 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
I am embedding Codesandboxes in my React (vite) app. Everything seems to work fine, however i noticed that when i load the Codesandbox in the embed (this doesnt happen when i open the editor on Codedsandbox.io) - i see this JS Error inthe console:
browserfs.rollup.js:11171 Uncaught TypeError: Cannot read properties of null (reading 'isReadOnly')
at browserfs.rollup.js:11171:1
at Worker.<anonymous> (browserfs.rollup.js:11168:1)
(anonymous) @ browserfs.rollup.js:11171
(anonymous) @ browserfs.rollup.js:11168
I've also noticed, which i assume is somehow related subsequent errors:
codesandbox.io/public/14/vs/editor/editor.main.js:146 Uncaught Error: Cannot read properties of undefined (reading 'readFile')
TypeError: Cannot read properties of undefined (reading 'readFile')
at t.syncFile (codesandbox.io/public/14/vs/language/typescript/tsWorker.js:7:2975102)
at codesandbox.io/public/14/vs/language/typescript/tsWorker.js:7:2973824
at codesandbox.io/public/14/vs/base/worker/workerMain.js#typescript:147:690
at Array.forEach (<anonymous>)
at t.acceptRemovedModel (codesandbox.io/public/14/vs/base/worker/workerMain.js#typescript:147:663)
at e._handleMessage (codesandbox.io/public/14/vs/base/worker/workerMain.js#typescript:106:579)
at Object.handleMessage (codesandbox.io/public/14/vs/base/worker/workerMain.js#typescript:106:196)
at e._handleMessage (codesandbox.io/public/14/vs/base/worker/workerMain.js#typescript:104:402)
at e.handleMessage (codesandbox.io/public/14/vs/base/worker/workerMain.js#typescript:103:975)
at e.onmessage (codesandbox.io/public/14/vs/base/worker/workerMain.js#typescript:106:275)
at codesandbox.io/public/14/vs/editor/editor.main.js:146:526
I appears browserfs is being loaded from https://codesandbox.io/static/browserfs12/browserfs.min.js.
Any idea why this is happening?
The codesandbox.io embed seems to work fine - but the browser console has many errors generated from Codesandbox.io embed.
How has this issue affected you? What are you trying to accomplish?
To Reproduce
Link to sandbox: link (optional)
Your Environment
| Software | Name/Version |
|---|---|
| Сodesandbox | ? |
| Browser | Google Chrome Version 106.0.5249.119 (Official Build) (arm64) |
| Operating System | macOS 12.5.1 |
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the embedded CodeSandbox in a React/Vite app using Chrome, then inspect the browserfs.rollup.js error and the related TypeScript worker readFile failure. Compare the embed with the editor on codesandbox.io and trace when browserfs is loaded; done means identifying the cause and confirming the embed no longer emits these errors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react, typescript, vite
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100