Azure DevOps插件开发：React useEffect调用空指针错误排查

核心问题：Hook使用违反规则 #

React.useEffect 是React Hook，只能在函数组件的顶层作用域调用，你当前在普通工具函数showRootComponent里直接调用Hook，完全不符合React的Hook规则，这是报错的直接原因。

修复步骤 #

1. 重构代码，将Hook移到React组件内部 #

把初始化逻辑放到一个根组件中，再通过这个组件渲染上下文和传入的子组件：

import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import { SDK } from 'azure-devops-extension-sdk';

export function showRootComponent(component: React.ReactElement<any>) {
  const rootElement = document.getElementById('root');
  
  // 定义根组件，在内部使用Hook
  const RootWrapper = () => {
    let baseUrl = '';

    useEffect(() => {
      SDK.init();
      const initializeState = async () => {
        // 你的初始化逻辑
      };
      initializeState();
    }, []);

    return (
      <SettingContext.Provider value={{ baseUrl: baseUrl }}>
        {component}
      </SettingContext.Provider>
    );
  };

  ReactDOM.render(<RootWrapper />, rootElement);
}

2. 检查Webpack配置（辅助验证） #

Azure DevOps插件通常会将React、ReactDOM作为外部依赖（宿主环境已提供），确保你的Webpack配置中包含以下externals设置，避免重复打包导致的React实例冲突：

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

如果externals配置错误，可能导致React对象为null，也会触发类似报错，但当前核心问题还是Hook的使用位置错误。

总结 #

优先修复Hook的调用位置问题，将其移到函数组件内部；再验证Webpack的externals配置是否符合Azure DevOps插件的要求，确保React依赖正确从宿主环境加载。

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