React-map-gl 返回灰色 [Vercel]

Question

我在 Vercel 中部署我的应用时发现了一些错误。我在 React 和 Next.js 中使用带有“react-map-gl”库的 MapBox 显示地图。

MapBox 在本地工作正常，但在 Prod 中不显示。我可以看到弹出窗口和标记，但看不到地图（它只显示灰色背景）。

可能是什么问题？

  import { useState, useEffect } from 'react';
    import ReactMapGL, { Marker, Popup } from 'react-map-gl';
    import getCenter from 'geolib/es/getCenter';
    import Image from "next/image"
    import Link from "next/link"
    
    
    function Map({ coordinates, marker }) {
    
        const [viewport, setViewport] = useState({
            width: '100%',
            height: '100%',
            latitude: coordinates.latitude,
            longitude: coordinates.longitude,
            zoom: coordinates.zoom
        });
        console.log(marker)
        useEffect(() => {
    
            let centeredCoordinate = getCenter(coordinates.length >= 1 ?
                coordinates.map(result => { return { latitude: result.latitude, longitude: result.longitude } }) :
                { latitude: 47.15025576066852, longitude: 2.032816514216602, zoom: 5 })
                ;
            if (coordinates.length > 1) {
                return setViewport({
                    width: '100%',
                    height: '100%',
                    latitude: centeredCoordinate.latitude,
                    longitude: centeredCoordinate.longitude,
                    zoom: 5
                })
            }
            setViewport({
                width: '100%',
                height: '100%',
                latitude: centeredCoordinate.latitude,
                longitude: centeredCoordinate.longitude,
                zoom: 13
            })
        }, [coordinates]);
        console.log(marker)
        return <ReactMapGL
            {...viewport}
    
            mapStyle='mapbox://styles/kamarov/ckuiomg715hg317qly3n8zoml'
            mapboxApiAccessToken={process.env.MAPBOX_KEY}
            onViewportChange={(viewport) => setViewport(viewport)}
        >
            {coordinates.map(result => (
    
                <div key={result.longitude}>
                    <Marker
                        longitude={result.longitude}
                        latitude={result.latitude}
                        offsetLeft={-20}
                        offsetTop={-10}
                    >
                        {result.entity.isPremium ?
                            <p className="text-xl cursor-pointer z-90">⭐</p> :
                            <p className="text-xl cursor-pointer z-90">????</p>}
                    </Marker>
                    {marker?.map(mark => (
                        <Popup className="rounded-xl " closeButton={false} latitude={mark.latitude} longitude={mark.longitude}>
                            {mark.entity.isPremium ?
                                <div className="flex  items-center p-1 justify-between space-x-2">
                                    <div className="w-16 h-12 relative">
                                        <Image src={mark.entity.logo} layout="fill" objectFit="contain" />
                                    </div>
                                    <div className="flex flex-col">
                                        <p className="font-content text-md text-primary">{mark.entity.longName}</p>
                                        <Link href={"/etablissements/" + mark.entity.slug}>
                                            <a className="mr-auto text-sm text-contrast font-content underline hover:text-primary duration-300">
                                                Voir l'établissement
                                            </a></Link>
                                    </div>
                                </div> :
                                <div className="flex flex-col justify-center">
                                    <p className="font-content text-md text-primary">{mark.entity.longName}</p>
                                    <Link href={"/etablissements/" + mark.entity.slug}>
                                        <a className="mr-auto text-sm text-contrast font-content underline hover:text-primary duration-300">
                                            Voir l'établissement
                                        </a></Link>
                                </div>}
                        </Popup>
    
                    ))}
    
                </div>
    
    
            ))}
    
    
        </ReactMapGL>
    }
    
    export default Map

我在其他问题中看到解决方案是添加：

  /* eslint-disable import/no-webpack-loader-syntax */
    import mapboxgl from 'mapbox-gl';
    // @ts-ignore
    mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;

但它不适合我，因为我正在使用 react-map-gl..

以下是 PROD 中浏览器控制台中显示的错误（本地浏览器未显示任何错误）

Answer 1

在我的 next.config.js 中找到了我必须删除的解决方案：

 swcMinify: true

它在生产中运行良好。