ReactDOM.render读取undefined报错的原因排查与解决

问题重现 #

我编写了如下基础React初始化脚本：

const subTable = document.getElementById("sub-table");
import React from "react";
import ReactDOM from "react-dom";

console.log(subTable);
const App = () => {
  return <div>Hello World!</div>;
};

ReactDOM.render(<App />, subTable);

依赖环境 #

最初仅使用内置React和ReactDOM的@wordpress/scripts，之后曾单独安装React和ReactDOM，为避免重复依赖已卸载二者，当前package.json依赖如下：

"devDependencies": {
  "@tailwindcss/typography": "^0.5.7",
  "@wordpress/scripts": "^25.1.0",
  "npm-run-all": "^4.1.5",
  "prettier": "^2.8.0",
  "prettier-plugin-tailwindcss": "^0.2.0",
  "tailwindcss": "^3.2.4"
},
"dependencies": {
  "axios": "^1.2.0"
}

异常现象 #

console.log(subTable)能正确输出目标DOM元素，但控制台始终报错：

Cannot read properties of undefined (reading 'render')

排查与解决 #

先后卸载flowbite和tw-elements尝试修复，问题未解决。最终定位到根本原因：React和ReactDOM的加载优先级早于自定义脚本，导致执行ReactDOM.render时ReactDOM尚未被正确注入到环境中。

调整脚本的enqueue优先级，确保自定义脚本在React和ReactDOM之后加载，问题顺利解决。

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