Javascript 控制台中的Mapbox生产错误&引用；未捕获引用错误：未定义y“；

我在Heroku上部署了一个完整的堆栈React.js应用程序。除了Mapbox之外，其他一切都部署得很好。在开发中，一切都很好。当我在Heroku中打开应用程序时，Mapbox就会显示一个黑屏

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

当我在生产环境中检查控制台时，我得到一个错误，说“uncaughtreferenceerror:y未定义”

我正在将Mapbox与React Map GL一起使用，不确定问题出在哪里，目前正在寻求帮助

我添加了一个屏幕截图，显示了它在开发中的外观以及在生产中的黑屏效果

我的客户端包。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"
}

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;

我的ReactMapGL组件：

  "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"
}

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;

import ReactMapGL，{Marker，Popup}来自“react map gl”；
从“/api”导入{listLogEntries}；
从“../../assets/icons/map-pin1.svg”导入MapPin；
从“../../assets/icons/map-pin-red1.svg”导入MapPinRed；
从“./LogEntryForm/LogEntryForm”导入LogEntryForm；
导入“/reactMap.scss”；
常量ReactMap=（）=>{
const[logEntries，setLogEntries]=useState（[]）；
const[showPopup，setShowPopup]=useState（{}）；
常量[addEntryLocation，setAddEntryLocation]=useState（null）；
const[viewport，setViewport]=useState({
宽度：“100vw”，
高度：“100vh”，
纬度：49.246292，
经度：-123.116226，
缩放：8，
});
const getEntries=async（）=>{
const logEntries=wait listLogEntries（）；
设置日志条目（日志条目）；
};
useffect（（）=>{
getEntries（）；
}, []);
const showAddMarkerPopup=（事件）=>{
常数[经度，纬度]=event.lngLat；
setAddEntryLocation({
经度，
纬度，
});
};
const MAP=process.env.REACT\u APP\u MAPBOX\u令牌；
const MAP\u STYLE=process.env.REACT\u APP\u MAP\u STYLE；
返回(
{logEntries.map（（条目）=>(
设置显示弹出窗口({
[entry.\u id]：正确，
})
}
>
{showPopup[entry.\u id](
setShowPopup（{}）}
anchor=“顶部”
>
{entry.title}
{entry.description}

{entry.comments}

{entry.image&&(
)}
访问日期：{新日期（entry.visitDate）.toLocaleDateString（）}
)：null}
))}
{附加变形(
setAddEntryLocation（null）}
anchor=“顶部”
>
{
setAddEntryLocation（空）；
getEntries（）；
}}
位置={addEntryLocation}
/>
)：null}
);
};
导出默认地图；

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

这是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安装worker loader。

这对我很有用，谢谢！这对我也有用，谢谢！救了我！谢谢