Rescript中ReactDOM.createRoot报错及render字段找不到问题求解

问题场景 #

编写了以下代码：

switch (ReactDOM.querySelector("#myapp")) {
| Some(myapp) => ReactDOM.createRoot(myapp).render(<MyComponent />)
| None => Js.log("we could not find myapp div!"); ()
};

Rescript编译器报错：The value createRoot can't be found in ReactDOM。尝试改用ReactDOM.Experimental.createRoot(myapp).render(<MyComponent />)后，又出现报错：The record field render can't be found.

解决方法 #

1. 确认依赖版本 #

• 确保@rescript/react包版本在0.11.0及以上，该版本正式适配React 18的createRoot API，之前的版本仅在Experimental模块提供非完整绑定。
• 同时确认react和react-dom的npm包版本为18.x，因为createRoot是React 18新增的API，低版本React本身不支持。

2. 对应版本的正确写法 #

版本 >= 0.11.0

Rescript的绑定将createRoot返回的根实例封装为Root.t类型，需通过ReactDOM.Root.render函数调用，而非JS式的链式方法：

switch (ReactDOM.querySelector("#myapp")) {
| Some(myapp) => 
    ReactDOM.createRoot(myapp)->ReactDOM.Root.render(<MyComponent />)
| None => 
    Js.log("we could not find myapp div!"); ()
};

版本 < 0.11.0

旧版本的Experimental绑定未暴露链式的render方法，需使用配套的renderRoot函数：

switch (ReactDOM.querySelector("#myapp")) {
| Some(myapp) => 
    let root = ReactDOM.Experimental.createRoot(myapp)
    ReactDOM.Experimental.renderRoot(root, <MyComponent />)
| None => 
    Js.log("we could not find myapp div!"); ()
};

内容的提问来源于stack exchange，提问作者Knows Not Much