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>
</>
);
}
相同的代碼在 localhost 中運行良好，但是當我在 Heroku 上部署此代碼時，僅在 Mapbox 中出現錯誤，另一個功能正常作業。
包.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
錯誤
uj5u.com熱心網友回復：
我解決了這個生產中的問題。??
來自參考https://docs.mapbox.com/mapbox-gl-js/guides/install/#:~:text=OR-,defaults, not ie 11,-This can be
剛剛更改了我的 package.jsonbrowserslist.production欄位。
這
//....
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
// ...
},
對此
//....
"browserslist": {
"production": [
"defaults",
"not ie 11"
],
// ...
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/434796.html
標籤：javascript 反应 heroku 部署 地图框