Create-React-App项目中useState读取null属性错误排查求助

我正在为小组项目的旅行日记应用构建基于Google Maps的交互式地图页面，目前仅复制官方教程代码实现基础地图展示。但访问地图路由时反复出现以下错误（同一错误出现3次）：

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

地图页面代码（tsx） #

import React from 'react';
import {APIProvider, Map, MapCameraChangedEvent} from '@vis.gl/react-google-maps';

const MapPage = () => (
 <APIProvider apiKey={'My API key here'} onLoad={() => console.log('Maps API has loaded.')}>
   <Map
      defaultZoom={13}
      defaultCenter={{ lat: -33.860664, lng: 151.208138 }}
      onCameraChanged={(ev: MapCameraChangedEvent) =>
        console.log('camera changed:', ev.detail.center, 'zoom:', ev.detail.zoom)
      }>
   </Map>
 </APIProvider>
);

export default MapPage;

访问应用首页无错误，仅地图路由报错。

已尝试的排查步骤 #

• 检查所有React组件的导入导出逻辑（此前同类错误由此引发）；
• 在Vite创建的新项目中测试相同代码，可正常运行；
• 尝试在package.json添加"type":"module"，但因项目使用require报错，修复后仍回到原错误；
• 重启电脑、VS Code，删除并重装node_modules、去重依赖、升级所有依赖版本；
• 替换为Leaflet地图组件，仍出现相同错误：

Cannot read properties of null (reading 'useState')
TypeError: Cannot read properties of null (reading 'useState')
    at useState (http://localhost:3001/static/js/bundle.js:198140:25)
    at MapContainerComponent (http://localhost:3001/static/js/bundle.js:231707:66)
    at renderWithHooks (http://localhost:3001/static/js/bundle.js:124680:22)
    at updateForwardRef (http://localhost:3001/static/js/bundle.js:127929:24)
    at beginWork (http://localhost:3001/static/js/bundle.js:129990:20)
    at HTMLUnknownElement.callCallback (http://localhost:3001/static/js/bundle.js:114936:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3001/static/js/bundle.js:114980:20)
    at invokeGuardedCallback (http://localhost:3001/static/js/bundle.js:115037:35)
    at beginWork$1 (http://localhost:3001/static/js/bundle.js:134935:11)
    at performUnitOfWork (http://localhost:3001/static/js/bundle.js:134183:16)

我是React新手，仅开发过简单应用，目前毫无头绪，请求帮助！

这个错误的核心原因是React在非React上下文环境中被调用，或者项目中存在React重复加载的问题，结合你的排查步骤（新项目正常、换组件仍报错），可以从以下几个方向解决：

1. 排查React重复依赖问题 #

• 执行npm ls react或yarn list react，查看项目中是否存在多个版本的React。如果有，说明依赖冲突导致组件调用了错误的React实例，此时需要：
  • 删除package-lock.json或yarn.lock
  • 删除node_modules
  • 重新执行npm install或yarn install
• 确保项目的react和react-dom版本一致，且与地图组件要求的版本兼容（比如@vis.gl/react-google-maps要求React 18+）。

2. 检查路由渲染逻辑 #

因为首页正常、仅地图路由报错，大概率是地图页面的渲染方式有问题：

• 确认路由组件是否被正确包裹在BrowserRouter（或对应路由组件）内部，没有在非React组件环境中渲染MapPage。
• 若使用了React.lazy做延迟加载，确保Suspense组件正确包裹，避免组件未加载完成时触发渲染错误。

3. 检查项目构建配置（针对Webpack项目） #

如果项目用Webpack而非Vite，可能存在配置问题：

• 确保Webpack配置中resolve.alias正确指向React的单一实例：

  resolve: {
    alias: {
      'react': path.resolve(__dirname, 'node_modules/react'),
      'react-dom': path.resolve(__dirname, 'node_modules/react-dom')
    }
  }
  

• 排查是否有第三方插件或loader干扰了React的加载，比如某些模块转换插件导致React实例变为null。

4. 测试极简地图组件排除干扰 #

创建一个极简版本的地图组件，在路由中直接渲染：

import React from 'react';
import {APIProvider, Map} from '@vis.gl/react-google-maps';

const SimpleMap = () => {
  return (
    <APIProvider apiKey={'你的API密钥'}>
      <Map defaultZoom={10} defaultCenter={{lat: 0, lng: 0}} />
    </APIProvider>
  );
};

export default SimpleMap;

如果依然报错，说明问题出在项目基础配置而非组件代码本身。

5. 检查React实例是否正常加载 #

在地图组件中打印React对象，确认其是否为null或未正确加载：

import React from 'react';

const MapPage = () => {
  console.log('React instance:', React); // 确认React是否正常
  // ... 其他代码
};

如果打印结果为null或undefined，说明React没有被正确导入，需要检查项目的模块解析配置。

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