我在Heroku上部署了一个全栈React.js应用程序。除了Mapbox之外，一切都很好。在开发中，一切都很好。当我在Heroku中打开我的应用程序时，Mapbox显示黑屏。
我在Heroku中为默认的公共Mapbox令牌添加了配置变量。
当我在生产环境中检查控制台时，我收到一个错误消息：“Uncaught ReferenceError：y未定义”
我正在使用Mapbox和React Map GL，不确定问题是什么，在这一点上寻求帮助。
我已经添加了一个屏幕截图，它在开发中的外观和我在生产中得到的黑屏。production-mapbox-errordevelopment-mapbox-working的数据库

我的客户端包.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;

型