本地链接Excalidraw包至React时出现useEffect读取null属性错误

核心成因 #

你遇到的Cannot read properties of null (reading 'useEffect')错误，本质是本地链接的Excalidraw包加载了独立的React实例：

• 尽管主应用和Excalidraw都声明使用React 18.3.1，但yarn link机制会让链接包优先读取自身node_modules里的React，而非主应用的React实例。
• React Hooks依赖全局内部上下文状态，两份独立的React实例会导致Excalidraw中的useEffect找不到合法的React执行环境，最终抛出空指针错误。
• 你之前尝试外部化React/ReactDOM未解决问题，大概率是构建配置未完全生效，Excalidraw的构建产物仍打包了自身的React代码。

解决方法 #

方法1：强制Excalidraw复用主应用的React实例 #

在主应用根目录执行命令，将主应用的React软链到Excalidraw的依赖目录：

# 替换为你的Excalidraw本地路径和主应用路径
cd ../excalidraw
yarn link "../your-react-app/node_modules/react"
yarn link "../your-react-app/node_modules/react-dom"

完成后重启主应用，Excalidraw会直接使用主应用的React实例，消除双副本冲突。

方法2：修正Excalidraw的构建配置，完全外部化React #

根据Excalidraw的构建工具，添加外部化配置：

• Webpack：在webpack.config.js中添加

module.exports = {
  // 其他配置项
  externals: {
    react: "React",
    "react-dom": "ReactDOM",
  },
};

• Vite：在vite.config.js中添加

export default defineConfig({
  build: {
    rollupOptions: {
      external: ["react", "react-dom"],
      output: {
        globals: {
          react: "React",
          "react-dom": "ReactDOM",
        },
      },
    },
  },
});

修改后重新构建Excalidraw，再重新执行yarn link即可。

方法3：用Yalc替代Yarn Link（更稳定的本地包方案） #

Yalc能避免yarn link的依赖冲突问题：

1. 全局安装Yalc：npm install -g yalc
2. 在Excalidraw目录执行：yalc publish
3. 在主应用目录执行：yalc add @excalidraw/excalidraw
4. Excalidraw修改后，执行yalc push即可同步到主应用

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