I am using react 17.0.1 and react-map-gl ^6.0.2 i have a map component.
Couldnt solve that
When i do "npm run start" no problem, it shows the map but when i do "npm run build" it only shows this: map blank
And it throws this error: error
My code bellow:
import React, {useState } from "react";
import ReactMapGL from 'react-map-gl';
const Map = () => {
const[viewport, setViewport] = useState({
width: "100%",
height: "400px",
latitude: 38.963745,
longitude: 35.243322,
zoom: 5
});
return (
<div>
<h2>Size yakın olan yerleri keşfedin!</h2>
<ReactMapGL
{...viewport}
onViewportChange={setViewport}
mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}
mapStyle="mapbox://styles/mapbox/streets-v11"
/>
</div>
);
}
export default Map
I know this is an old post..
As I understand it, the cause is that mapbox (not react-map-gl
) has a bug in it that does not transpile correctly with "npm build".
Fortunately you do NOT have to eject your app as I learned in this link: https://github.com/mapbox/mapbox-gl-js/issues/10173#issuecomment-753662795
I had to npm install worker-loader
Then add the following lines.
// had this.
import ReactMapGL, { FlyToInterpolator, NavigationControl } from 'react-map-gl'; import 'mapbox-gl/dist/mapbox-gl.css';
// added the following 6 lines.
import mapboxgl from 'mapbox-gl';
// The following is required to stop "npm build" from transpiling mapbox code.
// notice the exclamation point in the import.
// @ts-ignore
// eslint-disable-next-line import/no-webpack-loader-syntax, import/no-unresolved
mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;
Since I'm using typescript and linting, I had to add some directives to ignore warnings/errors that would otherwise stop it from compiling.
Note that I did not have to install mapboxgl
since react-map-gl
uses it.
But, I did need to add eslint-disable-next-line import/no-unresolved
and eslint-disable-next-line import/no-webpack-loader-syntax
combined on the same line.
I am using "react-map-gl": "^6.1.17".
The issue is caused by the transpiler. It's a bug that Mapbox is working on. Follow the suggestions here:
https://github.com/mapbox/mapbox-gl-js/issues/10173
It's also in the official documentation now.
When trying to deploy the app, firstly we run yarn build. This seems to do it's job, no build errors. However, when we actually deploy it, eg serve the build. We run in to a 'referenceError: y is not defined'.
When downgrading the version of Mapbox-gl to 1.13.0. The build works just fine. This is what we will have to do until the issue is fixed.
Following steps:
Make width and height in number only
const[viewport, setViewport] = useState({
width: "100",
height: "400",
latitude: 38.963745,
longitude: 35.243322,
zoom: 5
});
Buried in several links posted here is this which solved the problem for me. It fixed the mapbox transpiler bug causing the problem.
// @ts-ignore
// eslint-disable-next-line import/no-webpack-loader-syntax
import mapboxgl from '!mapbox-gl';
adding the following to package.json worked for me:
"browserslist": {
"production": [
">0.2%",
"not dead",
"not ie 11",
"not chrome < 51",
"not safari < 10",
"not android < 51"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
Solution for this issue that worked for me without changing the browserlists:
In Map.js component:
import { workerClass } from 'mapbox-gl';
import workerLoader from 'worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker';
workerClass = workerLoader;
in eslintrc:
"import/no-webpack-loader-syntax": "off",
"import/no-unresolved": "off"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.