我正在使用 react 17.0.1 和 react-map-gl ^6.0.2 我有一个 map 组件。
解决不了
当我执行“npm run start”没问题时,它会显示 map ,但是当我执行“npm run build”时,它只显示:map blank
它抛出这个错误:error
我的代码如下:
import React, {useState } from "react";
import ReactMapGL from 'react-map-gl';
const Map = () => {
const[viewport, setViewport] = useState({
width: "100%",
height: "400px",
latitude: 38.963745,
longitude: 35.243322,
zoom: 5
});
return (
<div>
<h2>Size yakın olan yerleri keşfedin!</h2>
<ReactMapGL
{...viewport}
onViewportChange={setViewport}
mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}
mapStyle="mapbox://styles/mapbox/streets-v11"
/>
</div>
);
}
export default Map
最佳答案
我知道这是一个旧帖子..
据我了解,原因是 mapbox(不是 react-map-gl
)中有一个错误,无法使用“npm build”正确转换。
幸运的是,您不必像我在此链接中学到的那样弹出您的应用程序:
https://github.com/mapbox/mapbox-gl-js/issues/10173#issuecomment-753662795
我不得不 npm install worker-loader
然后添加以下行。
// had this.
import ReactMapGL, { FlyToInterpolator, NavigationControl } from 'react-map-gl'; import 'mapbox-gl/dist/mapbox-gl.css';
// added the following 6 lines.
import mapboxgl from 'mapbox-gl';
// The following is required to stop "npm build" from transpiling mapbox code.
// notice the exclamation point in the import.
// @ts-ignore
// eslint-disable-next-line import/no-webpack-loader-syntax, import/no-unresolved
mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;
由于我使用的是 typescript 和 linting,我不得不添加一些指令来忽略警告/错误,否则它们会阻止它编译。请注意,我不必安装
mapboxgl
自从 react-map-gl
使用它。但是,我确实需要添加
eslint-disable-next-line import/no-unresolved
和 eslint-disable-next-line import/no-webpack-loader-syntax
合并在同一行。我正在使用“react-map-gl”:“^6.1.17”。
关于javascript - Mapbox 空白 map React-map-gl | react JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65434964/