控制台中的 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版本有什么问题。希望他们能尽快解决这个问题。