sandpack
sandpack copied to clipboard
codesandbox
feat(react-devtools): update to react-devtools-inline
Open in CodeSandbox Web Editor | VS Code
As Sandpack recently supports React@18, we're ready now to support the latest version of react-devtools-inline, in order to be used on React Docs.
Size changes
sandpack-react
| Total base (gzip) | Total current (gzip) | +/- |
|---|---|---|
| 174 kb | 174 kb | ⚠️ +153 bytes (+0.09%) |
Details
| Dependency name / file | Base | Current | +/- |
|---|---|---|---|
0 |
522 kb | 1 mb | ⚠️ +517 kb (+99.03%) |
main |
518 kb | 518 kb | ⚠️ +304 bytes (+0.06%) |
@codesandbox/sandpack-react |
63 kb | 63 kb | ⚠️ +350 bytes (+0.55%) |
@code-hike/classer |
1 kb | 1 kb | ✅ 0 byte |
@codesandbox/sandpack-client |
8 kb | 8 kb | ✅ 0 byte |
@stitches/core |
16 kb | 16 kb | ✅ 0 byte |
@codemirror/state |
35 kb | 35 kb | ✅ 0 byte |
@codemirror/view |
167 kb | 167 kb | ✅ 0 byte |
@codemirror/closebrackets |
6 kb | 6 kb | ✅ 0 byte |
@codemirror/matchbrackets |
4 kb | 4 kb | ✅ 0 byte |
@codemirror/commands |
24 kb | 24 kb | ✅ 0 byte |
@codemirror/comment |
5 kb | 5 kb | ✅ 0 byte |
@codemirror/gutter |
10 kb | 10 kb | ✅ 0 byte |
@codemirror/highlight |
12 kb | 12 kb | ✅ 0 byte |
@codemirror/history |
9 kb | 9 kb | ✅ 0 byte |
@react-hook/intersection-observer |
2 kb | 2 kb | ✅ 0 byte |
@codemirror/lang-css |
11 kb | 11 kb | ✅ 0 byte |
@codemirror/lang-javascript |
6 kb | 6 kb | ✅ 0 byte |
@codemirror/lang-html |
15 kb | 15 kb | ✅ 0 byte |
@codemirror/lang-markdown |
9 kb | 9 kb | ✅ 0 byte |
@codemirror/text |
13 kb | 13 kb | ✅ 0 byte |
style-mod |
3 kb | 3 kb | ✅ 0 byte |
@codemirror/rangeset |
16 kb | 16 kb | ✅ 0 byte |
w3c-keyname |
2 kb | 2 kb | ✅ 0 byte |
@lezer/common |
34 kb | 34 kb | ✅ 0 byte |
@codemirror/language |
19 kb | 19 kb | ✅ 0 byte |
@react-hook/passive-layout-effect |
191 bytes | 191 bytes | ✅ 0 byte |
@lezer/css |
9 kb | 9 kb | ✅ 0 byte |
@lezer/html |
12 kb | 12 kb | ✅ 0 byte |
@lezer/javascript |
54 kb | 54 kb | ✅ 0 byte |
@codemirror/autocomplete |
34 kb | 34 kb | ✅ 0 byte |
@lezer/markdown |
42 kb | 42 kb | ✅ 0 byte |
@lezer/lr |
31 kb | 31 kb | ✅ 0 byte |
@codemirror/tooltip |
14 kb | 14 kb | ✅ 0 byte |
lodash.isequal |
18 kb | 18 kb | ✅ 0 byte |
lz-string |
9 kb | 9 kb | ✅ 0 byte |
react-devtools-inline |
823 kb | 1 mb | ⚠️ +519 kb (+63.09%) |
codesandbox-import-utils |
3 kb | 3 kb | ✅ 0 byte |
package-build-stats |
487 bytes | 487 bytes | ✅ 0 byte |
intersection-observer |
13 kb | 13 kb | ✅ 0 byte |
react-is |
2 kb | 2 kb | ✅ 0 byte |
sandpack-client
| Total base (gzip) | Total current (gzip) | +/- |
|---|---|---|
| 7 kb | 7 kb | ✅ 0 byte |
Details
| Dependency name / file | Base | Current | +/- |
|---|---|---|---|
main |
20 kb | 20 kb | ✅ 0 byte |
@codesandbox/sandpack-client |
8 kb | 8 kb | ✅ 0 byte |
codesandbox-import-utils |
3 kb | 3 kb | ✅ 0 byte |
lodash.isequal |
18 kb | 18 kb | ✅ 0 byte |
package-build-stats |
487 bytes | 487 bytes | ✅ 0 byte |
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Hey @bvaughn, by any chance, do you know why I'm now getting the following error? Does it look familiar to you? I remember facing this issue before, but when we implemented the latest version in another branch, it was fixed. However, migrating the previous implementation to the main branch, I'm facing this again.
Sorry for not giving much details, but unfortunately, I didn't get many useful tracing errors or useful error messages.
Looks like the wrong version of React is being imported? Needs to be one of the experimental releases b'c of the unstable APIs DevTools is still using.
Ohh I thought React 18 would support all the react-devtools-inline dependencies. So definitely, this is the issue because I'm using 18 as the main version. Thanks!
Not yet! React DevTools is still using some suspense APIs that aren't finalized. Also useTransition and useDeferredValue which I think aren't stable yet either? I don't remember what's in stable. I've lived on the bleeding edge for too long.