React 18集成多款地图SDK失败，报createClient不是函数等错误求助

云原生阿岚

2026-8-1

问题描述

我在React 18项目里尝试集成Google Maps、TomTom两款地图SDK，每次渲染地图都会报错。已经确认API密钥没有使用限制，怀疑是React版本兼容性问题。具体错误信息如下：

ContentDispatcherService: no listeners for an event TAB_STATE__GET_NAVIGATION_METHOD

Uncaught TypeError: (0 , react_google_maps__WEBPACK_IMPORTED_MODULE_1__.createClient) is not a function
    at MainPage.jsx:8:1
    at commitHookEffectListMount (react-dom.development.js:23150:1)
    at commitPassiveMountOnFiber (react-dom.development.js:24926:1)
    at commitPassiveMountEffects_complete (react-dom.development.js:24891:1)
    at commitPassiveMountEffects_begin (react-dom.development.js:24878:1)
    at commitPassiveMountEffects (react-dom.development.js:24866:1)
    at flushPassiveEffectsImpl (react-dom.development.js:27039:1)
    at flushPassiveEffects (react-dom.development.js:26984:1)
    at react-dom.development.js:26769:1
    at workLoop (scheduler.development.js:266:1)
react-dom.development.js:22839 Uncaught TypeError: (0 , _react_google_maps__WEBPACK_IMPORTED_MODULE_1__.createClient) is not a function
    at MainPage.jsx:8:1
    at commitHookEffectListMount (react-dom.development.js:23150:1)
    at invokePassiveEffectMountInDEV (react-dom.development.js:25154:1)
    at invokeEffectsInDev (react-dom.development.js:27351:1)
    at commitDoubleInvokeEffectsInDEV (react-dom.development.js:27330:1)
    at flushPassiveEffectsImpl (react-dom.development.js:27056:1)
    at flushPassiveEffects (react-dom.development.js:26984:1)
    at react-dom.development.js:26769:1
    at workLoop (scheduler.development.js:266:1)
    at flushWork (scheduler.development.js:239:1)
2react-dom.development.js:18687 The above error occurred in the <MainPage> component:

    at MainPage (http://localhost:3000/static/js/bundle.js:910:63)
    at RenderedRoute (http://localhost:3000/static/js/bundle.js:44956:5)
    at Routes (http://localhost:3000/static/js/bundle.js:45422:5)
    at div
    at div
    at Feed
    at div
    at div
    at Home
    at div
    at App
    at Router (http://localhost:3000/static/js/bundle.js:45360:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:43562:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
react-dom.development.js:12056 Uncaught TypeError: (0 , _tomtom_international_web_sdk_services__WEBPACK_IMPORTED_MODULE_1__.createClient) is not a function
    at MainPage.jsx:8:1
    at commitHookEffectListMount (react-dom.development.js:23150:1)
    at commitPassiveMountOnFiber (react-dom.development.js:24926:1)
    at commitPassiveMountEffects_complete (react-dom.development.js:24891:1)
    at commitPassiveMountEffects_begin (react-dom.development.js:24878:1)
    at commitPassiveMountEffects (react-dom.development.js:24866:1)
    at flushPassiveEffectsImpl (react-dom.development.js:27039:1)
    at flushPassiveEffects (react-dom.development.js:26984:1)
    at react-dom.development.js:26769:1
    at workLoop (scheduler.development.js:266:1)
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

解决方法

核心问题是你用的地图SDK依赖版本与React 18不兼容，或者导入/初始化方式错误，按以下步骤逐一排查：

替换兼容React 18的地图依赖包
旧版react-google-maps已停止维护，完全不兼容React 18，必须替换为官方推荐的包：
```
npm uninstall react-google-maps
npm install @react-google-maps/api
```
对于TomTom，更新到最新版依赖，避免因版本过旧导致方法变更：
```
npm update @tomtom-international/web-sdk @tomtom-international/web-sdk-services
```

修正导入和初始化代码
以Google Maps为例，旧的createClient方法已被移除，改用组件式初始化：

import { GoogleMap, LoadScript } from '@react-google-maps/api';

const containerStyle = { width: '400px', height: '400px' };
const center = { lat: -3.745, lng: -38.523 };

function MainPage() {
  return (
    <LoadScript googleMapsApiKey="你的API密钥">
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={10}
      >
        {/* 可在此添加标记、信息窗口等组件 */}
      </GoogleMap>
    </LoadScript>
  );
}

export default MainPage;

TomTom的正确初始化方式（组件式）：

import tt from '@tomtom-international/web-sdk';
import '@tomtom-international/web-sdk/dist/maps.css';
import { useEffect } from 'react';

function MainPage() {
  useEffect(() => {
    const map = tt.map({
      key: '你的API密钥',
      container: 'map', // 对应页面中div的id
      center: [4.899, 52.372],
      zoom: 10
    });
    return () => map.remove(); // 组件卸载时清理地图实例
  }, []);

  return <div id="map" style={{ width: '400px', height: '400px' }}></div>;
}

临时关闭React 18 StrictMode排查
React 18的StrictMode会在开发环境重复执行副作用（比如useEffect），可能引发SDK初始化冲突。暂时去掉src/index.js中的<React.StrictMode>标签，看问题是否消失。
修复manifest.json语法错误
最后报错的manifest.json语法问题会影响项目运行，打开public/manifest.json检查，确保是标准JSON格式（比如引号闭合、无多余逗号）。

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