codesandbox
CDN install does not work with versions after 2.8.0
Bug report
Packages affected
- [ ] sandpack-client
- [x] sandpack-react
Description of the problem
I have followed the docs on how to install sandbox from a CDN. It works fine with the version specified in the docs (2.8.0), but it fails with any newer version.
The latest version (2.13.2) fails with the following error:
Uncaught TypeError: o is undefined
h https://esm.sh/v135/@lezer/[email protected]/es2022/lr.mjs:3
l https://esm.sh/v135/@lezer/[email protected]/es2022/lr.mjs:3
deserialize https://esm.sh/v135/@lezer/[email protected]/es2022/lr.mjs:3
<anonymous> https://esm.sh/v135/@lezer/[email protected]/es2022/html.mjs:2
lr.mjs:3:21968
What were you doing when the problem occurred?
Loading the page.
What steps can we take to reproduce the problem?
Open this html file:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/[email protected]",
"react-dom": "https://esm.sh/[email protected]",
"react-dom/": "https://esm.sh/[email protected]/",
"@codesandbox/sandpack-react": "https://esm.sh/@codesandbox/[email protected]"
}
}
</script>
<script type="module">
import React from "react";
import { createRoot } from "react-dom/client";
import { Sandpack } from "@codesandbox/sandpack-react";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
const sandpackComponent = React.createElement(Sandpack, {
template: "vanilla",
});
root.render(sandpackComponent);
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>
Link to sandbox
https://codesandbox.io/p/sandbox/sandpack-bug-repro-53trm3
Your Environment
| Software | Name/Version |
|---|---|
| Sandpack-client version | |
| Sandpack-react version | 2.13.2 |
| Browser | Firefox 123.0 |
| Operating System | macOS 14.1.2 |
It just started to fail even with the documented Sandpack-react version 2.8.0, with a different error:
TypeError: Cannot read properties of null (reading 'useState')
at r.useState (react.production.min.js:26:234)
where react.production.min.js is surprisingly from [email protected] instead of the imported 18.2.0:
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/[email protected]",
"react-dom": "https://esm.sh/[email protected]",
"react-dom/": "https://esm.sh/[email protected]/",
"@codesandbox/sandpack-react": "https://esm.sh/@codesandbox/[email protected]"
}
}
</script>
Actually I figured it out, you need to pass the ?deps argument to force the react/react-dom versions to be 18.2.0 for @condesandbox/sandpac-react:
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/[email protected]",
"react-dom": "https://esm.sh/[email protected]",
"react-dom/": "https://esm.sh/[email protected]/",
"@codesandbox/sandpack-react": "https://esm.sh/@codesandbox/[email protected][email protected]&[email protected]'"
}
}
</script>
Ah, this must be because of a peer dependency resolution in that case. We are pretty broad in the peer dependencies we support, so I can imagine that esm.sh then picks the latest possible. However, that's not the best choice because react and react-dom already use 18.2.0. I will update our docs to mention this.
