为Remix Run构建自定义组件库引入MUI5后遇无效Hook调用错误

核心原因 #

这个错误本质是React或MUI被重复加载——组件库和宿主Remix应用各自加载了一份React/MUI实例，导致Hook调用不在同一个React上下文环境中。

具体解决步骤 #

• 规范依赖声明：把React、ReactDOM以及所有MUI相关包（@mui/material、@mui/system、@mui/icons-material等）同时放在peerDependencies和devDependencies中：

  {
    "peerDependencies": {
      "react": "^18.0.0",
      "react-dom": "^18.0.0",
      "@mui/material": "^5.14.0",
      "@mui/icons-material": "^5.14.0"
    },
    "devDependencies": {
      "react": "^18.0.0",
      "react-dom": "^18.0.0",
      "@mui/material": "^5.14.0",
      "@mui/icons-material": "^5.14.0"
    }
  }
  

• 强化Rollup外部化配置：除了rollup-plugin-peer-deps-external，手动在Rollup配置的external字段补充所有需要外部化的依赖，防止遗漏：

  import peerDepsExternal from 'rollup-plugin-peer-deps-external';
  
  export default {
    plugins: [
      peerDepsExternal(),
      // 其他插件（babel、resolve等）
    ],
    external: ['react', 'react-dom', '@mui/material', '@mui/system', '@mui/icons-material']
  };
  

• 本地开发消除重复依赖：组件库执行npm link后，在Remix应用中链接组件库的React实例，避免两份React冲突：

  # 组件库目录执行
  npm link
  # Remix应用目录执行
  npm link your-component-library
  npm link ../your-component-library/node_modules/react
  

• 检查Babel配置：确保@babel/preset-react正确配置，避免意外打包React/MUI代码。在babel.config.json中设置：

  {
    "presets": [
      ["@babel/preset-react", { "runtime": "automatic" }]
    ]
  }
  

• 验证打包产物：查看Rollup输出的代码，确认React和MUI的导入语句未被打包进组件库，而是保留为外部依赖引用。

额外注意事项 #

• 保证Remix应用的React版本和组件库peerDependencies声明的版本范围兼容，避免版本差异引发上下文问题。
• 若使用MUI自定义主题，确保组件库中主题相关逻辑依赖宿主应用的ThemeProvider实例，不要在组件库内部重复创建独立的主题上下文。

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