The preview HTML generated by the experimental Sandpack bundler doesn't include a DOCTYPE, causing browsers to use Quirks Mode.
To reproduce, go to any page with previews (e.g. /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
When using the experimental bundler, the HTML in the iframes is minimal, e.g.
<html><head><title>Sandpack Preview</title><metacharset="utf-8"><styleid="/styles.css-css" type="text/css"><!-- styles omitted --></style></head><body><divid="root"><div><h1>Welcome to my app</h1><button>I'm a button</button></div></div></body></html>
Running the code locally, commenting out the bunderUrl in src/components/MDX/Sandpack/SandpackRoot produces fuller HTML:
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><metaname="viewport" content="width=device-width,initial-scale=1"><title>Sandbox - CodeSandbox</title><linkrel="manifest" href="/manifest.json"><linkhref="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'> <style><!-- styles omitted --> </style> <path fill-rule='evenodd' clip-rule='evenodd' d='M81.8182 18.1818V81.8182H18.1818V18.1818H81.8182ZM10 90V10H90V90H10Z'/> </svg>" rel="icon"><linkrel="mask-icon" href="/csb-ios.svg" color="#fff"><scriptsrc="/static/browserfs12/browserfs.min.js" type="text/javascript"></script><script>window.process=BrowserFS.BFSRequire("process"),window.Buffer=BrowserFS.BFSRequire("buffer").Buffer</script><linkhref="/static/js/babel.7.12.12.min.js" rel="prefetch" as="script"><styleid="/styles.css:-css" type="text/css"><!-- styles omitted --></style><scriptcharset="utf-8" src="/static/js/2.61b71a6f1.chunk.js"></script><scriptcharset="utf-8" src="/static/js/6.2298658e4.chunk.js"></script></head><body><divid="root"><div><h1>Welcome to my app</h1><button>I'm a button</button></div></div></body></html>Despite the length of HTML produced by the old bundler, the only major things missing seem to be doctype and viewport.
Presumably this is a bug in Sandpack's new bundler, which was added to the React docs in #4458
That PR mentions expected performance improvements, so this might be a temporary trade off between performance and compatibility. I didn't see Quirks Mode mentioned anywhere, though, and seemed worth raising an issue.
The preview HTML generated by the experimental Sandpack bundler doesn't include a DOCTYPE, causing browsers to use Quirks Mode.
To reproduce, go to any page with previews (e.g.
/learn)document.compatMode, which returns "BackCompat"When using the experimental bundler, the HTML in the iframes is minimal, e.g.
Running the code locally, commenting out the
bunderUrlinsrc/components/MDX/Sandpack/SandpackRootproduces fuller HTML:Despite the length of HTML produced by the old bundler, the only major things missing seem to be doctype and viewport.
Presumably this is a bug in Sandpack's new bundler, which was added to the React docs in #4458
That PR mentions expected performance improvements, so this might be a temporary trade off between performance and compatibility. I didn't see Quirks Mode mentioned anywhere, though, and seemed worth raising an issue.