create-react-app项目集成react-map-gl与Mapbox地图无法显示求助

我在进行React项目开发时，参照官方指南通过create-react-app创建项目并集成了Tailwind CSS。因项目需要实现地图展示、获取附近位置等功能，我参照react-map-gl官方文档完成接入，同时从Mapbox Studio获取了Access Token和地图样式，但始终无法在网页上正常渲染地图。
我已通过谷歌、Stack Overflow检索相关问题，尝试了几乎所有提及的解决方案均未生效，也按照网友建议在craco.config.js中添加了babel loader规则，同时修改了package.json中的browserslist配置，问题依然存在，恳请大家帮忙排查解决，万分感谢！

相关代码 #

Map.js文件代码 #

import { useState } from "react";
import ReactMapGL, { Marker, Popup } from "react-map-gl";
//import getCenter from "geolib/es/getCenter";

// Adding Custom Environment Variables
function Map() {
  const [viewport, setViewport] = useState({
    width: "100",
    height: "400",
    latitude: 37.7577,
    longitude: -122.4376,
    zoom: 11,
  });

  return (
    <div>
      <h2 className="text-red-500">Map box map goes here....</h2>
      <ReactMapGL
        mapStyle="mapbox://styles/mapbox/ckszotu58a7dz17qh8ysv970j"
        mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}
        {...viewport}
        onViewportChange={(viewport) => setViewport(viewport)}
      ></ReactMapGL>
    </div>
  );
}

export default Map;

App.js渲染代码 #

<main>
  <section className="bg-gray-900 hidden xl:inline-flex xl:min-w-[300px]">
    <Map />
  </section>
</main>

craco.config.js配置 #

// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [require("tailwindcss"), require("autoprefixer")],
    },
  },
  babel: {
    loaderOptions: {
      ignore: ["./node_modules/mapbox-gl/dist/mapbox-gl.js"],
    },
  },
};

package.json的browserslist配置 #

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "not chrome < 51",
      "not safari < 10"
    ]
}

解决方案 #

按优先级依次排查修改：

• 修正viewport的宽度属性，你当前写的width: "100"没有单位，会导致地图容器宽度为0，修改为width: "100%"即可。
• 引入mapbox-gl全局样式，在Map.js顶部加一行导入代码：import 'mapbox-gl/dist/mapbox-gl.css'，缺失全局样式会导致地图图层无法正常渲染。
• 检查react-map-gl版本对应的属性名：如果你使用的是v7及以上版本的react-map-gl，mapboxApiAccessToken属性已经废弃，需要替换为mapboxAccessToken；同时确认你安装的mapbox-gl版本和react-map-gl要求的版本匹配，不要跨大版本使用。
• 测试环境变量是否生效：在Map组件中打印process.env.REACT_APP_MAPBOX_ACCESS_TOKEN，确认能输出正确的token，修改.env文件后必须重启开发服务才会生效。
• 测试容器是否被隐藏：你当前包裹Map的section加了hidden xl:inline-flex类，只有屏幕宽度≥1280px时才会显示，可以先移除hidden类，确认地图在小屏幕下也能正常渲染。
• 修正craco.config.js的babel配置：当前配置的ignore规则不会生效，替换为以下配置，修改后重启开发服务：

module.exports = {
  style: {
    postcss: {
      plugins: [require("tailwindcss"), require("autoprefixer")],
    },
  },
  babel: {
    loaderOptions: (options) => {
      options.ignore = options.ignore || [];
      options.ignore.push(/node_modules\/mapbox-gl\/dist\/mapbox-gl.js/);
      return options;
    }
  }
};

• 补充browserslist开发环境配置：你当前只修改了生产环境的browserslist规则，需要补充开发环境的配置，修改后删除node_modules下的.cache缓存，重启开发服务：

"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all",
    "not chrome < 51",
    "not safari < 10"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version",
    "not chrome < 51",
    "not safari < 10"
  ]
}

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