基于Webpack+TS+Material UI的React组件库Hook调用错误排查

一、排查React多实例问题 #

• 执行npm ls react，查看项目中是否存在多个React版本。如果有，删除重复依赖，保证组件库和测试项目用同一版本的React和ReactDOM。
• 把组件库package.json里的react和react-dom移到peerDependencies，不要放在dependencies或devDependencies里：

"peerDependencies": {
  "react": "^18.0.0",
  "react-dom": "^18.0.0"
}

• Webpack配置里加externals，避免打包时把React打进组件库：

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

二、严格遵守Hook调用规则 #

• 检查组件里Hook的调用位置：必须直接在函数组件的顶层调用，不能放在if、for循环、useEffect回调或者嵌套函数里。
  错误写法：

const MyComponent = () => {
  if (someCondition) {
    const [state, setState] = useState(''); // 错误：Hook在条件判断里调用
  }
  return <div></div>;
}

正确写法：

const MyComponent = () => {
  const [state, setState] = useState(''); // 顶层直接调用
  if (someCondition) {
    // 写你的逻辑
  }
  return <div></div>;
}

• 用useContext时，确保对应的Context已经创建，并且在组件树上层用Provider提供了值，最好给Context设默认值避免空值：

// 创建Context时设置默认值
const MyContext = createContext<{ value: string }>({ value: '' });

// 父组件里提供Context
const ParentComponent = () => {
  return (
    <MyContext.Provider value={{ value: 'test' }}>
      <MyComponent />
    </MyContext.Provider>
  );
}

// 子组件里使用useContext
const MyComponent = () => {
  const context = useContext(MyContext);
  return <div>{context.value}</div>;
}

三、调整Webpack与TypeScript配置 #

• Webpack配置里，确保resolve.extensions包含.tsx，module.rules正确处理TS/TSX文件：

module.exports = {
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  }
}

• tsconfig.json里，把jsx设为react-jsx（React 17及以上版本），开启esModuleInterop：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "module": "ESNext",
    "target": "ES6",
    "strict": true
  }
}

四、清理缓存重新构建 #

• 删除node_modules和package-lock.json（或yarn.lock），重新跑npm install
• 清理Webpack缓存：执行npx webpack --clear-cache，或者删掉项目根目录的.webpack缓存文件夹
• 重新构建组件库再测试

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