Description
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>
<meta charset="utf-8">
<style id="/styles.css-css" type="text/css"><!-- styles omitted --></style>
</head>
<body>
<div id="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>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Sandbox - CodeSandbox</title>
<link rel="manifest" href="/manifest.json">
<link href="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">
<link rel="mask-icon" href="/csb-ios.svg" color="#fff">
<script src="/static/browserfs12/browserfs.min.js" type="text/javascript"></script><script>window.process=BrowserFS.BFSRequire("process"),window.Buffer=BrowserFS.BFSRequire("buffer").Buffer</script>
<link href="/static/js/babel.7.12.12.min.js" rel="prefetch" as="script">
<style id="/styles.css:-css" type="text/css"><!-- styles omitted --></style>
<script charset="utf-8" src="/static/js/2.61b71a6f1.chunk.js"></script><script charset="utf-8" src="/static/js/6.2298658e4.chunk.js"></script>
</head>
<body>
<div id="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.