Externalize all React entrypoints to support React 19 #229
Conversation
| 'react/compiler-runtime': { | ||
| varName: '_react_compiler_runtime', | ||
| type: 'cjs' | ||
| } |
There was a problem hiding this comment.
This isn't necessary for React 19 compat. But if you ever apply the React compiler, you need to externalize its runtime so I just went ahead and did it now to avoid future bugs.
Fixes React 19 compat issues due to bundling JSX dev runtime. Also enables future applications of React Compiler to bundled MDX.
eps1lon
force-pushed
the
externalize-react
branch
from
6dae7e5 to
ad789be
Compare
| React, | ||
| ReactDOM, | ||
| _jsx_runtime: | ||
| process.env.NODE_ENV === 'production' ? _jsx_runtime : _jsx_dev_runtime, |
There was a problem hiding this comment.
This is likely moot since you ship CJS which bundlers have a hard time tree-shaking. But once it's shipped as ESM, bundlers will be able to DCE react/jsx-dev-runtime in prod
eps1lon
changed the title
|
It's not an optimization but a bug fix. mdx-bundler currently bundles the jsx-runtime which isn't supported (it's like bundling React itself). This worked because all supported versions of React were compatible with the bundled JSX runtime. However, React 19 is not compatible with the bundled JSX runtime. Publishing a new version with an updated version of React 19 will not fix the issue since that would make mdx-bundler incompatible with React <19. By externalizing the JSX runtime, you're compatible with any React version. It's not a breaking change if you use this library as documented i.e. use |
|
Hmmm.... Looks like this is failing the tests 🤔 |
|
I'll take a look later |
What:
Fixes compatibility with React 19. We're using mdx-bundler in vercel.com, https://nextjs.org/ and various other Vercel surfaces. We're using this patch in production already. Otherwise we couldn't use React 19.
Why:
Bundling the JSX runtime always worked incidentally even though it was never officially supported. Due to changes to the React secret internals, we now enforce not bundling parts of React while externalizing others. Either you bundle everything or none.
How:
Externalize all React entrypoints
Checklist: