Production build fails but dev works fine

[8L4V4]

I've spotted production build fail with error Uncaught ReferenceError: y is not defined (See screenshot below)

Steps to reproduce - create fresh react app with TypeScript. Add dependencies npm install react-mapbox-gl mapbox-gl --save

Try to build with npm run build

And after check with npm serve -s build

Code from my new App

import React from 'react';
import ReactMapboxGl, {Feature, Layer} from "react-mapbox-gl";
import logo from './logo.svg';
import './App.css';

const mapToken = "your_token_here";
const MapBox = ReactMapboxGl({accessToken: mapToken})

const polygonPaint = {
  'fill-color': '#6F788A',
  'fill-opacity': 1
};

const AllShapesPolygonCoords = [
  [
    [-0.13235092163085938, 51.518250335096376],
    [-0.1174163818359375, 51.52433860667918],
    [-0.10591506958007812, 51.51974577545329],
    [-0.10831832885742188, 51.51429786349477],
    [-0.12531280517578122, 51.51429786349477],
    [-0.13200759887695312, 51.517823057404094]
  ]
];

const Map: React.FC = ({children}) => {

  const mapParams = {
    style: "mapbox://styles/mapbox/light-v8",
    containerStyle: {height: "60vh", width: "100%"}
  }

  return (
    <MapBox {...mapParams}>
      <>
        {children}
      </>
    </MapBox>
  );
};

function App() {
  return (
    <div className="App">
      <Map>
        <Layer type="fill" paint={polygonPaint} />
        <Feature coordinates={AllShapesPolygonCoords}/>
      </Map>
    </div>
);
}

export default App;

[reMRKableDev]

I'm facing the same issue as well. I've had an application running on Netlify for a few months now, which has been working fine. I made some changes, re-wrote unit tests, and confirmed that everything worked well locally. The issue arises on deployment with a similar error message as shown above.

[UncleChenna]

hello, has this issue been fixed ?

i've had a similar one since last weekend..i haven't been able to fix mine

[ttrubel]

https://github.com/alex3165/react-mapbox-gl/issues/931#issuecomment-763773368

[naseemkhan7021]

I am also facing the same issue .... anyone can tell me why this problem is in production and how to fix it?

this is reactJS app using react-mapbox-gl mapbox-gl --save

[naseemkhan7021]

I solved this problem which is come in production.😊

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

just changed my package.json browserslist.production field.

this

//....

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

    // ...
  },

to this

//....

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

    // ...
  },

[EmmanuelTheCoder]

@naseemkhan7021 that didn't work for me. I wonder why. I'm on React by the way.

[EmmanuelTheCoder]

I downgraded to v 1.13.0 and it's worked just fine. That's the recommended workaround

[EmmanuelTheCoder]

To downgrade do npm i mapbox-gl@1.13.0

[matiasfittipaldi]

@naseemkhan7021 very thanks!!!!!!!!!! work for me

[ajalasegun1]

@naseemkhan7021 thank you so much. Your suggestion worked!

[chhavientrar]

@naseemkhan7021 @EmmanuelTheCoder i tried the both but when i am building my project its failed.