如何解决控制台中的 Mapbox 生产错误 “未捕获的 ReferenceError:y 未定义”
我在 Heroku 上部署了一个全栈 React.js 应用程序。除了 MapBox 之外,一切都部署得很好。在开发中,一切正常。一旦我在 Heroku 中打开我的应用程序,MapBox 就会显示一个黑屏。
我在 Heroku 中为默认公共 MapBox 令牌添加了配置变量。
当我在生产中检查控制台时,我收到一条错误消息“未捕获的引用错误:y 未定义”
我正在将 MapBox 与 React Map GL 结合使用,但不确定问题是什么,目前正在寻求帮助。
我添加了一张关于它在开发中的外观和我在生产中得到的黑屏的屏幕截图。production-mapbox-error development-mapbox-working
我的客户端 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`,}}
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) 的版本上。安装 react-map-gl@5.2.5 终于显示了我的图层,一切正常。不知道6.0.2版本有什么问题。希望他们能尽快解决这个问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。