在React项目集成AWS Maps时遇_wrapNativeSuper未定义错误求助

错误原因 #

这个报错是因为Babel的辅助函数_wrapNativeSuper未被正确引入，通常发生在Maplibre-gl这类依赖使用了ES6+原生类继承语法，但项目的Babel配置缺少必要插件来处理这类语法的场景下。

修复步骤 #

1. 安装Babel辅助依赖 #

先安装提供Babel辅助函数的包，避免全局函数缺失：

npm install @babel/plugin-transform-runtime @babel/runtime --save-dev

如果需要polyfill支持，额外安装：

npm install @babel/runtime-corejs3 --save-dev

2. 调整Babel配置 #

根据项目类型修改Babel配置文件：

• 若项目有独立的.babelrc或babel.config.json，添加插件：

{
  "presets": [
    // 保留你原有的React/Babel预设，比如@babel/preset-react、react-app等
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "corejs": 3,
      "helpers": true,
      "regenerator": true
    }]
  ]
}

• 若使用Create React App（CRA），需通过craco修改默认配置：
  1. 安装craco：

  npm install @craco/craco --save-dev
  

  2. 创建craco.config.js：

  module.exports = {
    babel: {
      plugins: [
        ["@babel/plugin-transform-runtime", { "corejs": 3 }]
      ]
    }
  };
  

  3. 修改package.json的启动脚本：

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
  

3. 检查依赖兼容性 #

• 确认maplibre-gl使用稳定版本（如1.x或2.x），避免测试版的语法兼容问题
• 核对react-admin、react-admin-paper-dashboard与Maplibre-gl的版本无冲突，可查看各自的文档确认兼容范围

4. 规范Map组件的初始化逻辑 #

确保在DOM挂载完成后再初始化地图实例，避免DOM未就绪的问题：

import React, { useEffect, useRef } from 'react';
import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';

const Map = () => {
  const mapContainer = useRef(null);
  const mapInstance = useRef(null);

  useEffect(() => {
    if (mapInstance.current) return;
    
    // 初始化AWS Maps的Maplibre实例
    mapInstance.current = new maplibregl.Map({
      container: mapContainer.current,
      style: 'https://maps.geo.amazonaws.com/maps/v1/maps/[你的AWS地图样式ID]/style-descriptor',
      center: [-74.5, 40],
      zoom: 9,
      transformRequest: (url, resourceType) => {
        if (resourceType === 'Style' && url.includes('amazonaws.com')) {
          return {
            url: url,
            headers: { 'Authorization': '你的AWS签名/密钥' }
          };
        }
        return { url };
      }
    });

    // 组件卸载时销毁地图实例
    return () => {
      if (mapInstance.current) mapInstance.current.remove();
    };
  }, []);

  return <div ref={mapContainer} style={{ width: '100%', height: '400px' }} />;
};

export default Map;

5. 清除缓存重启项目 #

rm -rf node_modules/.cache
npm start

额外排查方向 #

• 检查是否有其他第三方库修改了Babel配置，导致插件冲突
• 若使用TypeScript，确保tsconfig.json的target设置为ES6或更高版本

内容的提问来源于stack exchange，提问作者Abi.D