我正在使用react 17.0.1和react-map-gl ^6.0.2我有一个地图组件。我尝试过其他库，问题仍然存在我已经联系了 Mapbox 的支持人员我已经联系了其他mapbox用户无法解决这个问题当我执行“npm run start”时没问题，它显示地图，但是当我执行“npm run build”时，它只显示：地图空白它抛出这个错误：错误我的代码如下： 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
7 回答
海绵宝宝撒
TA贡献1809条经验 获得超8个赞
我知道这是一个旧帖子..
据我了解，原因是 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;
由于我使用的是打字稿和 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”。
呼如林
TA贡献1798条经验 获得超3个赞
该问题是由转译器引起的。这是 Mapbox 正在解决的一个错误。请遵循此处的建议：
https://github.com/mapbox/mapbox-gl-js/issues/10173
现在它也出现在官方文档中。
https://docs.mapbox.com/mapbox-gl-js/api/#transpiling-v2
慕村9548890
TA贡献1884条经验 获得超4个赞
埋在此处发布的几个链接中的是这为我解决了问题。它修复了导致问题的 Mapbox 转译器错误。
// @ts-ignore
// eslint-disable-next-line import/no-webpack-loader-syntax
import mapboxgl from '!mapbox-gl';
杨__羊羊
TA贡献1943条经验 获得超7个赞
仅将宽度和高度设为数字
const[viewport, setViewport] = useState({
width: "100",
height: "400",
latitude: 38.963745,
longitude: 35.243322,
zoom: 5
});
四季花海
TA贡献1811条经验 获得超5个赞
当尝试部署应用程序时，首先我们运行yarn build。这似乎完成了它的工作，没有构建错误。然而，当我们实际部署它时，例如为构建提供服务。我们遇到了“referenceError：y 未定义”。
将Mapbox-gl版本降级到1.13.0时。构建工作得很好。这是我们在问题解决之前必须要做的事情。
以下步骤：
运行yarn install或npm install
运行yarn build或npm build
拉莫斯之舞
TA贡献1820条经验 获得超10个赞
将以下内容添加到 package.json 对我有用：
"browserslist": {
"production": [
">0.2%",
"not dead",
"not ie 11",
"not chrome < 51",
"not safari < 10",
"not android < 51"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
慕斯王
TA贡献1864条经验 获得超2个赞
此问题的解决方案对我有用，无需更改浏览器列表：
在 Map.js 组件中：
import { workerClass } from 'mapbox-gl';
import workerLoader from 'worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker';
workerClass = workerLoader;
在 eslintrc 中：
"import/no-webpack-loader-syntax": "off",
"import/no-unresolved": "off"
添加回答
举报
0/150
提交
取消