控制台中的 Mapbox 生产错误。“未捕获的 ReferenceError：y 未定义”

Question

我在 Heroku 上部署了一个全栈 React.js 应用程序。除了 Mapbox 之外，一切都部署得很好。在开发中，一切正常。一旦我在 Heroku 中打开我的应用程序，Mapbox 就会显示一个黑屏。

我在 Heroku 中为默认公共 Mapbox 令牌添加了配置变量。

当我在生产中检查控制台时，我收到一条错误消息“Uncaught ReferenceError: y is not defined”

我正在将 Mapbox 与 React Map GL 一起使用，但不确定问题是什么，此时正在寻求帮助。

我添加了它在开发中的外观和我在生产中得到的黑屏的屏幕截图。生产-mapbox-错误 开发-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`,
                    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;

Answer 1

这是 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。

Answer 2

因此，经过更多研究，我发现问题出在react-map-gl（6.0.2）的版本上。安装react-map-gl@5.2.5最终显示了我的图层，一切正常。我不知道6.0.2版本有什么问题。希望他们能尽快解决这个问题。