React18使用createRoot仍报ReactDOM.render弃用警告如何解决

问题根因 #

你自己的入口文件写法完全符合React 18官方规范，警告来源是第三方依赖兼容问题：你当前安装的react-chips@^0.8.0已经停止维护多年，最后一次版本发布早于React 18正式推出，包内部源码仍在调用已废弃的ReactDOM.renderAPI，只要该组件在页面中渲染，就会触发控制台警告，和你自身的入口代码写法无关。

验证方法 #

• 临时注释项目中所有react-chips相关的引入和使用代码，重启开发服务后触发重渲染，该警告会直接消失，即可确认问题源。

解决方案 #

按优先级排序可选：

• 优先替换为适配React 18、仍在正常维护的同类标签/芯片输入组件，比如和你当前用的Chakra UI生态适配的标签输入组件，从根源解决兼容问题。
• 若短期无法替换依赖，可通过重写控制台方法过滤指定警告，不影响业务正常运行。如果是Create React App搭建的项目，在index.js最顶部加入如下代码即可屏蔽该条警告：

const originError = console.error
console.error = (...args) => {
  if (Object.prototype.toString.call(args[0]) === '[object String]' && args[0].includes('ReactDOM.render is no longer supported in React 18')) return
  originError.apply(console, args)
}

注意：该方案仅屏蔽警告输出，不会修改依赖内部的旧API调用逻辑，对应依赖的运行逻辑仍会走React 17兼容模式，你当前业务逻辑不受影响的前提下可以放心作为过渡方案使用。

• 若必须保留react-chips又不想屏蔽警告，可自行fork该组件源码，将内部所有ReactDOM.render调用替换为React 18的createRoot写法，本地引用修改后的代码或发布私有包使用即可。

内容的提问来源于stack exchange，提问作者Praval791