使用create-react-library报Invalid hook call错误，无法定位问题原因

你给出的Header组件代码不存在hook非法调用问题，该错误在create-react-library场景下几乎都由依赖重复打包、版本冲突或本地调试配置问题导致，可按以下步骤排查：

• 依赖配置错误：这是该场景下最高发的问题。请打开库项目的package.json，把react、react-dom以及用到的@material-ui相关依赖从dependencies字段中移除，分别加入peerDependencies和devDependencies。其中peerDependencies声明你的库要求宿主项目提供对应版本的依赖，devDependencies供本地开发调试使用，避免打包时重复引入react实例，出现多份react运行的情况。
  参考配置示例：

  {
    "peerDependencies": {
      "react": "^16.8.0 || ^17.x || ^18.x",
      "react-dom": "^16.8.0 || ^17.x || ^18.x",
      "@material-ui/core": "^4.x",
      "@material-ui/icons": "^4.x"
    },
    "devDependencies": {
      "react": "^18.2.0",
      "react-dom": "^18.2.0",
      "@material-ui/core": "^4.12.4",
      "@material-ui/icons": "^4.11.3"
    }
  }
  

• 打包配置未排除公共依赖：检查create-react-library自动生成的rollup.config.js文件，确保external字段包含react、react-dom以及所有第三方公共依赖，避免这些依赖被直接打入你的库产物中。
  参考配置示例：

  export default {
    // 其余原有配置保持不变
    external: ['react', 'react-dom', '@material-ui/core', '@material-ui/icons'],
    // 其余原有配置保持不变
  }
  

• 本地调试链接导致的实例冲突：如果你使用npm link或者yarn link在本地测试开发中的库，link状态下的库会优先读取自身node_modules下的react依赖，和宿主项目的react实例产生冲突。你可以直接删除库项目node_modules下的react、react-dom文件夹，或者在宿主项目的构建配置中指定react的唯一读取路径。
  参考webpack配置示例：

  const path = require('path')
  
  module.exports = {
    // 其余原有配置保持不变
    resolve: {
      alias: {
        'react': path.resolve(__dirname, './node_modules/react'),
        'react-dom': path.resolve(__dirname, './node_modules/react-dom')
      }
    }
    // 其余原有配置保持不变
  }
  

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