codesandbox / sandpack-bundler Goto Github PK
View Code? Open in Web Editor NEWThe new bundler/runtime powering client-side sandpack sandboxes
Home Page: https://sandpack-bundler.codesandbox.io
License: Apache License 2.0
sandpack-bundler's Issues
Failing to install npm dependencies when using self-hosted bundlerURL
Bug report
Packages affected
- sandpack-client
- sandpack-react
Description of the problem
I have this sandpack-bundler running: https://github.com/codesandbox/sandpack-bundler
In the example sandbox below, you will see I am setting the bundlerURL in the SandboxProvider.
The sandpack created doesn't actually work though due to failing to properly important the library. It works fine when I don't set bundlerURL and use the default bundler. Example of the error:
(Sometimes the error is about failing to import other stuff like Cannot find module 'process' from '/node_modules/vfile/lib/minproc.js')
It works fine when I try other libraries like "uuid: latest", but testing with "react-markdown: latest" has given me these errors. I've tried a couple other libraries and had issues with them too. It's like it's not doing npm install properly.
Again I should note that if I don't define bundlerURL and use the default, it works fine.
(Side note: sandpack-client and sandpack-react seem to use a different bundler version, 1.7.0 vs 1.8.8)
Link to sandbox: link
Your Environment
| Software | Name/Version |
|---|---|
| Sandpack-client version | |
| Sandpack-react version | 1.0.0 and also tried 1.8.8 |
| Browser | Chrome |
| Operating System | MacOS |
Architecture chart link doesn't work
README.md has a link to https://www.figma.com/file/I2Gm2pGCRdWMoBWxXrvYib/sandpack-bundler-architecture?node-id=0%3A1 but following the link (and logging into figma) leads me to a page with the following error message
File not found
Either this file doesn’t exist or you don’t have permission to view it. Ask the file owner to verify the link and/or update permissions.
Remove console.warn("Unknown preset parcel, falling back to React") when using experimental bundler
Is it possible to get rid of the warning in console "Unknown preset parcel, falling back to React":
My config is as follows.
<Sandpack
template="vanilla"
options={{
showConsole: true,
bundlerURL: "https://sandpack-bundler.codesandbox.io",
}}
/>Feature: dispatch bundler state from bundler to protocol
Currently, the v1 returns the bundler-state to Sandpack, which contains a lot of useful information. For example, the compiled files are mandatory information to render SandpackTranspiledCode.
V1: https://github.com/codesandbox/codesandbox-client/blob/master/packages/app/src/sandbox/compile.ts#L873-L876
Sandpack: https://github.com/codesandbox/sandpack/blob/main/sandpack-client/src/client.ts#L214-L217
If you point me out the right place, I can try to implement it
Missing DOCTYPE causes browsers to use Quirks Mode
The bundled HTML doesn't have a doctype, meaning browsers choose quirks mode for the Sandpack previews. I noticed this on https://react.dev, which has many previews.
An easy way to reproduce is to check https://react.dev/learn
- Firefox (v111.0) Open console and see the warning about Quirks Mode
- Chrome (v111.0.5563.110) Open dev tools, select an iframe, in console run document.compatMode, which returns "BackCompat"
- Safari (v16.3) Same as Chrome
It looks like the bundler starts with its own index.html and uses src/utils/html/replaceHTML to replace the body with the user's HTML body. Seems like the simplest fix is to add <!DOCTYPE html> to the start of the bundler's index.html. I ran react.dev and sandpack-bundler locally and that got rid of quirks mode.
The current approach is a little confusing, though. The user's own index.html (which sometimes comes from Sandpack's templates) gets passed to the bundler and then ignored, which made for a surprising debugging experience. In the long term, it would be nice if the index.html supplied by the user had priority over the bundler's index.html
Request the template resolution of a Vue
Live editing does not work with experimental bundler
I expected the code changes to reflect in the preview panel.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.