React使用react-feature-flags报错：'useFeatureFlag'导出未找到

问题原因 #

你使用的react-feature-flags@1.0.0版本中不存在useFeatureFlag这个导出，该自定义钩子是后续版本才新增的API，所以webpack打包时会提示导出未找到的警告。

解决方案 #

提供两种适配方案，根据你的需求选择：

方案一：升级到支持useFeatureFlag的版本 #

执行命令升级到最新稳定版：

npm install react-feature-flags@latest

升级后，确保代码用法符合新版本API（示例如下，具体可参考对应版本文档调整）：

import featureFlags from "../../../featureflags.json";
import { useFeatureFlag } from 'react-feature-flags';

const TestComponent = (props) => {
  // 不同版本返回值结构可能有差异，需确认文档
  const isTestControlEnabled = useFeatureFlag('testControl', featureFlags);

  return (
    <>
      <div className={styles.stepDivider} />
      {props.controlTestComponent && isTestControlEnabled && (
        <StepComponent iconName={"Sampler"} />
      )}
    </>
  );
};

方案二：适配react-feature-flags@1.0.0的原生用法 #

1. 在Web Part根组件中添加FeatureFlagProvider全局注入开关配置：

import { FeatureFlagProvider } from 'react-feature-flags';
import featureFlags from '../../../featureflags.json';

export default class YourWebPart extends React.Component {
  render() {
    return (
      <FeatureFlagProvider flags={featureFlags}>
        <TestComponent controlTestComponent={this.props.controlTestComponent} />
      </FeatureFlagProvider>
    );
  }
}

2. 在Test.tsx中使用以下方式判断开关：

方式A：高阶组件withFeatureFlag（类组件适用）

import { withFeatureFlag } from 'react-feature-flags';

class TestComponent extends React.Component {
  render() {
    const { isTestControlEnabled, controlTestComponent } = this.props;

    return (
      <>
        <div className={styles.stepDivider} />
        {controlTestComponent && isTestControlEnabled && (
          <StepComponent iconName={"Sampler"} />
        )}
      </>
    );
  }
}

// 注入开关状态到组件props
export default withFeatureFlag({
  isTestControlEnabled: 'testControl'
})(TestComponent);

方式B：FeatureFlag组件（函数/类组件通用）

import { FeatureFlag } from 'react-feature-flags';

const TestComponent = (props) => {
  return (
    <>
      <div className={styles.stepDivider} />
      {props.controlTestComponent && (
        <FeatureFlag flag="testControl">
          <StepComponent iconName={"Sampler"} />
        </FeatureFlag>
      )}
    </>
  );
};

export default TestComponent;

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