我在 Heroku 上部署了一个全栈 React.js 应用程序。除了 Mapbox 之外,一切都部署得很好。在开发过程中,一切都运行良好。当我在 Heroku 中打开应用程序时,Mapbox 就会显示黑屏。
我在 Heroku 中添加了默认公共 Mapbox 令牌的配置变量。
当我检查生产中的控制台时,收到一条错误消息“Uncaught ReferenceError:y 未定义”
我正在使用 Mapbox 和 React Map GL,不确定问题是什么,目前正在寻求帮助。
我的客户端package.json:
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.8",
"@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.6.0",
"framer-motion": "^3.2.1",
"node-sass": "^4.14.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-hook-form": "^6.14.1",
"react-map-gl": "^6.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:8080"
}
我的ReactMapGL组件:
import ReactMapGL, { Marker, Popup } from "react-map-gl";
import { listLogEntries } from "./api";
import MapPin from "../../assets/icons/map-pin1.svg";
import MapPinRed from "../../assets/icons/map-pin-red1.svg";
import LogEntryForm from "../LogEntryForm/logEntryForm";
import "./reactMap.scss";
const ReactMap = () => {
const [logEntries, setLogEntries] = useState([]);
const [showPopup, setShowPopup] = useState({});
const [addEntryLocation, setAddEntryLocation] = useState(null);
const [viewport, setViewport] = useState({
width: "100vw",
height: "100vh",
latitude: 49.246292,
longitude: -123.116226,
zoom: 8,
});
const getEntries = async () => {
const logEntries = await listLogEntries();
setLogEntries(logEntries);
};
useEffect(() => {
getEntries();
}, []);
const showAddMarkerPopup = (event) => {
const [longitude, latitude] = event.lngLat;
setAddEntryLocation({
longitude,
latitude,
});
};
const MAP = process.env.REACT_APP_MAPBOX_TOKEN;
const MAP_STYLE = process.env.REACT_APP_MAP_STYLE;
return (
<div className="map">
<ReactMapGL
className="map__react-gl"
{...viewport}
// Setting map theme from mapbox
mapStyle={MAP_STYLE}
// mapbox Api Access Token
mapboxApiAccessToken={MAP}
onViewportChange={setViewport}
onDblClick={showAddMarkerPopup}
>
{logEntries.map((entry) => (
<div key={entry._id}>
<Marker latitude={entry.latitude} longitude={entry.longitude}>
<div
onClick={() =>
setShowPopup({
[entry._id]: true,
})
}
>
<img
className="map__pin"
style={{
width: `${4 * viewport.zoom}px`,
height: `${4 * viewport.zoom}px`,
}}
src={MapPin}
alt="Map Pin"
/>
</div>
</Marker>
{showPopup[entry._id] ? (
<Popup
className="map__popup"
latitude={entry.latitude}
longitude={entry.longitude}
dynamicPosition={true}
closeButton={true}
closeOnClick={false}
onClose={() => setShowPopup({})}
anchor="top"
>
<div className="map__info-container">
<h3 className="map__info-heading">{entry.title}</h3>
<hr className="map__hr" />
<p className="map__info-description">{entry.description}</p>
<hr className="map__hr" />
<p className="map__info-comment">{entry.comments}</p>
<div className="map__info-image-container">
{entry.image && (
<img
className="map__image"
src={entry.image}
alt={entry.title}
/>
)}
</div>
<small className="map__info-visited">
Visited on: {new Date(entry.visitDate).toLocaleDateString()}
</small>
</div>
</Popup>
) : null}
</div>
))}
{addEntryLocation ? (
<div>
<Marker
latitude={addEntryLocation.latitude}
longitude={addEntryLocation.longitude}
>
<div>
<img
className="map__pin-red"
style={{
width: `${4 * viewport.zoom}px`,
height: `${4 * viewport.zoom}px`,
}}
src={MapPinRed}
alt="Map Pin"
/>
</div>
</Marker>
<Popup
className="map__popup"
latitude={addEntryLocation.latitude}
longitude={addEntryLocation.longitude}
dynamicPosition={true}
closeButton={true}
closeOnClick={false}
onClose={() => setAddEntryLocation(null)}
anchor="top"
>
<div className="map__new-info-container">
<LogEntryForm
onClose={() => {
setAddEntryLocation(null);
getEntries();
}}
location={addEntryLocation}
/>
<form action=""></form>
</div>
</Popup>
</div>
) : null}
</ReactMapGL>
</div>
);
};
export default ReactMap;
这是Webpack的问题。对于任何未来的观众,这对我有用:
import ReactMapGL, {Marker} from 'react-map-gl'
import 'mapbox-gl/dist/mapbox-gl.css';
import mapboxgl from 'mapbox-gl';
// eslint-disable-next-line import/no-webpack-loader-syntax
mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;
另外,请记住 npm install worker-loader。
经过更多研究,我发现问题出在react-map-gl(6.0.2)的版本上。安装 [电子邮件受保护] 最终显示了我的图层,一切正常。我不知道6.0.2版本有什么问题。希望他们尽快解决这个问题。
我在使用maplibre-gl(mapbox的一个分支)时遇到了相关错误。对我来说,原因是
create-react-app
生成的配置针对的是生产版本中较旧的浏览器,而不是开发版本中的浏览器。所以在开发构建中,一切顺利。但在生产版本中却没有。
要修复这种情况,请更新 browserlist 配置以针对较新的浏览器 (https://github.com/maplibre/maplibre-gl-js/issues/1011)。
简单来说
"production": ["defaults", "not ie 11"]
而不是"production": [">0.2%", "not dead", "not op_mini all"]
。在某些情况下,建议保留 not op_mini all
。