当我在 Heroku 中部署 React 应用程序时 mapBox 出错

Question

An error occurred while parsing the WebWorker bundle. This is most likely due to improper transpilation by Babel; please see https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling

我需要帮助来识别生产中的这个错误。

同样的代码在localhost运行很好

这是我的代码

import React, { useRef, useEffect, useState } from 'react';
import 'mapbox-gl/dist/mapbox-gl.css'
import Map, { Marker, MapRef } from "react-map-gl";
import { useDataContext } from './DataContext';

export default function MapView() {
     let refs;
     // Setting up the state for the map
     const [viewport, setViewport] = useState({
          latitude: lat,
          longitude: lon,
          zoom: 10,
          bearing: 0,
          pitch: 0,
          width: "100%",
          height: "100%",
          attributionControl: false
     });
    //....more code

     return (
          <>
               <Map
                    ref={(e) => refs = e}

                    mapboxAccessToken={process.env.REACT_APP_MAPBOX_KEY}

                    initialViewState={viewport}
                    onViewportChange={(viewport) => setViewport(viewport)}
                    mapStyle={colorThem === 'light' ? 'mapbox://styles/mapbox/dark-v10' : 'mapbox://styles/mapbox/streets-v10'} >
                    <Marker latitude={lat} longitude={lon}>
                         <i className="pl-2 fa-solid fa-location-dot fa-bounce text-red-500 text-xl"></i>
                    </Marker>
               </Map>
          </>
     );
}

相同的代码在本地主机中运行很好，但是当我在 Heroku 上部署它时仅在 Mapbox 中出现错误，另一个功能正常工作。

package.json

{
  // ....

  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.3",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.26.0",
    "mapbox-gl": "^2.7.0",
    "moment": "^2.29.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-map-gl": "^7.0.7",
    "react-moment": "^1.1.1",
    "react-scripts": "5.0.0",
    "recharts": "^2.1.9",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
   //.....
}

看下面的IMG

错误

Answer 1

我解决了生产中出现的这个问题。

来自参考 https://docs.mapbox.com/mapbox-gl-js/guides/install/#:~:text=OR-,defaults%2C%20not%20ie%2011,-This%20can%20be

刚刚更改了我的 package.json browserslist.production 字段。

这个

//....

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
     ],

    // ...
  },

至此

//....

"browserslist": {
    "production": [
      "defaults",
      "not ie 11"
    ],

    // ...
  },

当我在 Heroku 中部署 React 应用程序时 mapBox 出错

Error in mapBox when I am deploying react app in Heroku

javascript

reactjs

heroku

deployment

mapbox