React使用react-flags-select时报useState空值读取TypeError错误

React项目中通过npm安装国旗选择组件，先后引入react-flags-select、react-select-flag均触发以下报错：

Uncaught TypeError: Cannot read properties of null (reading 'useState')

业务代码片段如下：

import { useState } from 'react';
import React from 'react';
import Slider from "react-slick";
import ReactFlagsSelect from 'react-flags-select';
import { FaFacebook } from 'react-icons/fa';


export default function Slide() {
    const [selected, setSelected] = useState('TR');
    const settings = {
        dots: false,
        infinite: true,
        arrows: false,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1
    };
    const flags = {
        US: '+1',
        GB: '+5',
        FR: '+70',
        DE: '+30',
        IT: '+11',
        TR: '+90',
    }
    // 省略其余业务逻辑
    return (
        // 省略其余组件
        <div className="flex gap-x-3">
            <ReactFlagsSelect
                countries={Object.keys(flags)}
                customLabels={flags}
                selected={selected}
                onSelect={code => setSelected(code)}
            />
        </div>
    )
}

代码中已经按照React规范从react包正确引入useState，更换同类型组件后报错完全一致，无法正常使用国旗选择组件。

这个报错和你自己写的useState引入逻辑没有关系，核心原因是React多实例冲突：
你安装的第三方国旗组件内部依赖React Hooks，但是项目依赖树中存在多份独立的React副本，第三方组件调用Hooks时，拿到的React上下文为null，因此抛出读取null上useState属性的错误。这也是为什么更换同类型组件后报错完全一致——只要组件内部使用React Hooks，就会触发相同问题。

常见触发场景：

• 依赖安装时版本冲突，第三方组件在自身目录下安装了独立的React包，没有复用项目根目录的React实例
• 使用npm link调试本地包、monorepo架构下依赖提升异常，导致多份React共存
• 项目中react和react-dom版本不匹配

按以下步骤操作即可解决：

1. 先确认多实例问题，在项目根目录执行命令：
   npm ls react
   如果输出结果中，除了项目根目录node_modules/react之外，其他第三方依赖（比如react-flags-select）的目录下也存在独立的react包，即可确认是多实例冲突。
2. 配置依赖别名强制所有模块复用同一份React实例：
   • 如果是Vite搭建的项目，在vite.config.js中添加如下配置：

   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react'
   import path from 'path'
   
   export default defineConfig({
     plugins: [react()],
     resolve: {
       alias: {
         react: path.resolve(__dirname, './node_modules/react'),
         'react-dom': path.resolve(__dirname, './node_modules/react-dom')
       }
     }
   })
   

   • 如果是Create React App搭建且未eject的项目，先在项目根目录新建.env文件，写入配置：

   SKIP_PREFLIGHT_CHECK=true
   

   然后删除项目下的node_modules文件夹和package-lock.json文件，重新执行npm install安装依赖。
3. 检查package.json中react和react-dom的版本号，确保二者大版本、次版本完全一致，不要出现跨版本不匹配的情况。
4. 重启开发服务，国旗选择组件即可正常渲染使用，不会再抛出上述报错。

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