Comments (9)
So, i spent some time around this. And here are some of the observations. This should be handled in many ways, but the first solution is the best way to do it imo.
Solution
First @codesandbox/codesandbox-client is using process
and it's a pure node
thing. Which is being polyfilled by bundlers all these years, but from webpack~5
the node built-ins are not polyfilled anymore. So,
- Any packages that target
browser
shouldn't useprocess
inside them. If they still do so, it's good to remove it in build or anything shipped tonpm
. And as i see currentlysandpack
is just transpiling and not doing a build. - If the usage is mandatory, then the
process
needs to be polyfilled by the library and so people who consumes it don't need to do it again on their side. (But if every package stat's doing it, then we have node-polyfiils duplicated everywhere in the end build). So, the best way is to removeprocess
from the end build.
I tried making the existing 0.0.6
work. But here the hurdles.
- Docusaurus uses
webpack~5
so no auto polyfills. And so, thenpm start
is failing. It doesn't happen in one of mysandpack
use here because it's anextjs
which has a server running and stuff. And soprocess
and some node-builtins are polyfilled to have backwards compatibility with next~10 (vercel/next.js#16022). - So, i wrote a custom
docusaurus
plugin which polyfills node-buildins. Which you can find here https://github.com/JayaKrishnaNamburu/docusaurus-node-polyfills. It's just a simple wrapper, that injectswebpack-node-polyfills
insidedocusaurus
config. Here i added and tested it out in a fork of the above example https://github.com/JayaKrishnaNamburu/sandpack-docusaurus-test/blob/trail/node-polyfill/docusaurus.config.js#L80 - And this solves the
process
polyfill issue withsandpack
. But there is one more blocker. Sandpack internally usescodemirror
andcodemirror
internall useslezer
(https://unpkg.com/browse/[email protected]/package.json). - And lezer again uses
process
. Which is ok as we got a polyfill, butlezer
is configured asesm
withtype:module
flag. And so, the polyfill need to mention theimport
extensions.mjs
or.js
. Here are more details Richienb/node-polyfill-webpack-plugin#14.
So, currently these are all the things, if process/browser
resolves in lezer
esm. Then docusaurus-node-polyfills
unblocks the webpack error.
Here is the fork of the example above
https://github.com/JayaKrishnaNamburu/sandpack-docusaurus-test/blob/trail/node-polyfill/docusaurus.config.js
https://github.com/JayaKrishnaNamburu/sandpack-docusaurus-test/blob/trail/node-polyfill/package.json#L20
Docusaurus plugin for polyfills
https://github.com/JayaKrishnaNamburu/docusaurus-node-polyfills
from sandpack.
wow, nice research @JayaKrishnaNamburu! thanks for taking the time!
On our side we can remove the usage of process in sandpack-client
and rely on props when setting up storybook or anything else to run with a local bundler, but we would still have the issue from codemirror I guess.
from sandpack.
Here is a update, I have the working repo here https://github.com/JayaKrishnaNamburu/sandpack-docusaurus-test/tree/trail/node-polyfill
Just added a new package docusaurus-node-polyfills
which i just released by wrapping up the changes https://github.com/JayaKrishnaNamburu/docusaurus-node-polyfills
from sandpack.
this is strange, feels like the error is coming from this line: https://github.com/codesandbox/sandpack/blob/main/sandpack-client/src/client.ts#L91 but that should be solved by the bundler?! Not familiar with docusaurus, this happens at build time?
from sandpack.
Yes, the issue still exists with codemirror
. Unfortunately, we will run into such issues unless the browser targeted libraries stop using process in end build 😅. So, now only two things left
- Either this PR get's merged and this plugin upgrades it.
- Or just write the fallback in the plugin directly since it's a small change. I will see today if i can write the fallback in the docusaurus plugin itself :)
from sandpack.
Unfortunately, we will run into such issues unless the browser targeted libraries stop using process in end build 😅
I feel like this is almost impossible, since a lot of libraries rely on env variables, even just for checking NODE_ENV
from sandpack.
Yes, yes. So, for the moment polyfilling is the right way to solve those problems. Unless web standards come up with something for in browsers 😄
from sandpack.
None of my use cases use the editor, I use sandpack for running the preview, so I don't need codemirror. Not sure how often other people use/will use sandpack without the editor, but have you considered having the preview runner in its own separated package?
from sandpack.
Hey, we believe that this issue has been solved in the latest release (v0.1.13); please let me know if this bug still persists.
Thanks for reporting it!
from sandpack.
Related Issues (20)
- Service Worker registration failed: TypeError HOT 1
- Prettier code formatting HOT 2
- NextJS Server-side Rendering bug / docs error HOT 4
- CDN install does not work with versions after 2.8.0
- Documentation: SandpackFileExplorer Options display is incorrect
- Update Next.js template and node version to suport next.js app router template HOT 1
- Prioritization error regarding custom style
- Failed to get shell by ID
- Is it possible to load local files HOT 2
- Throw a string in SandpackTests will make the component crash
- Page becomes unresponsive HOT 4
- How to "host" the app HOT 2
- Invalid left-hand side in assignment HOT 1
- Full Reset on any state changes in React Codesandbox HOT 1
- %c%s & color: rgba(125, 125, 125, 0.5) in console.log <Sandpack/> (strictMode?) HOT 1
- Changing decorators recreates Codemirror HOT 1
- ts-node template HOT 1
- Broken example with Sandpack Console HOT 1
- Documentation: Sandpack Layout does not accept a theme prop. But the docs says it does. Also the link is broken showing the example. HOT 3
- Broken Korean text in sandpack-react test error messages
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.
from sandpack.