Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Production build fails but dev works fine

See original GitHub issue

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;