fix: fixing createRoot reference in react-dom@19 #3236
Conversation
Summary of ChangesHello @zuiidea, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request addresses a critical compatibility issue with Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
|
你好 @zuiidea，非常感谢你的贡献. Hello, @zuiidea, Thanks for your contribution. In order to make the code more robust, please add the corresponding unit tests, and update the docs if there are API changes. |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request aims to fix the createRoot reference for React 18 and newer, which is a good improvement. However, the current implementation with a static import of react-dom/client will unfortunately break compatibility for users with React versions below 18, as the module won't be found. I've provided critical feedback with suggestions to use a dynamic require to resolve this, ensuring backward compatibility is maintained. Additionally, it appears the unit tests may need to be updated to correctly mock and verify the call to createRoot from react-dom/client.
| import { version } from 'react'; | ||
| import * as ReactDOM from 'react-dom'; | ||
| import type { Root } from 'react-dom/client'; | ||
| import * as ReactDOMClient from 'react-dom/client'; |
There was a problem hiding this comment.
This static import of react-dom/client will cause a module resolution error at runtime for projects using React versions older than 18, as this module path does not exist in those versions. This breaks the backward compatibility that this file aims to maintain. This import should be removed and createRoot should be loaded dynamically.
|
|
||
| if (mainVersion >= 18) { | ||
| createRoot = ReactDOMClone.createRoot!; | ||
| createRoot = ReactDOMClient.createRoot!; |
There was a problem hiding this comment.
To conditionally load createRoot for React 18+ without breaking support for older versions, you should use a dynamic require() call here. The surrounding try...catch block will correctly handle the error if the react-dom/client module is not found. Please also remember to remove the static ReactDOMClient import from the top of the file.
| createRoot = ReactDOMClient.createRoot!; | |
| createRoot = require('react-dom/client').createRoot; |
There was a problem hiding this comment.
-
({ createRoot } = await import('react-dom/client'))这种写法可以在react@18及以上运行，但是在react@17时，因此模块不存在，所以vite:import-analysis会报错 -
createRoot = require('react-dom/client').createRoot这种写法vite:import-analysis不会报错，但是并不能动态引入模块，因此无法拿到createRoot
|
有大量的已知业务还在使用 ~16.14.0。 所以低版本也是要支持的 |
2 participants
👀 PR includes
🐛 Bugfix
Uncaught TypeError: reactOriginalRender is not a functionwidth React 19 #3235📝 Description
Fixing
createRootreference in react-dom@19🖼️ Screenshot