React-map-gl: Viewport flyTo Interpolation: 'auto' crashes map when transitioning zoom only

[liang3404814]

There is a problem that causes the map to crash when using FlyToInterpolator with transitionDuration: auto, and only the zoom of the map changes. This is because getFlyToDuration (https://github.com/uber-web/math.gl/blob/v3.1.2/modules/web-mercator/src/fly-to-viewport.js#L58) returns an NaN when only the zoom changes. The map passes this NaN to the interpolator and gets invalid interpolated lat/lng which it uses for new MapState(, failing the assertions and crashing the map:

assert.js:5 Uncaught Error: `longitude` must be supplied
    at assert (assert.js:5)
    at new MapState (map-state.js:71)
    at TransitionManager._updateViewport (transition-manager.js:234)
    at TransitionManager.eval [as _onTransitionFrame] (transition-manager.js:63)
    at TransitionManager._triggerTransition (transition-manager.js:194)
    at TransitionManager.processViewportChange (transition-manager.js:112)
    at MapController.setOptions (map-controller.js:200)
    at InteractiveMap._setControllerProps (interactive-map.js:409)
    at InteractiveMap._setControllerProps (react-hot-loader.development.js:714)
    at InteractiveMap.componentDidUpdate (interactive-map.js:390)

Please see my example here:
https://codesandbox.io/s/react-map-gl-v4115-bug-mmcjf

import React, { useState, useCallback } from "react";
import ReactDOM from "react-dom";
import ReactMapGL from "react-map-gl";
import { FlyToInterpolator } from "react-map-gl";
import "mapbox-gl/dist/mapbox-gl.css";
import "./styles.css";

const MAPBOX_TOKEN = "REDACTED";

function App() {
  const [viewport, updateViewport] = useState({
    latitude: 40.775306,
    longitude: -73.95117,
    zoom: 15
  });
  const mapProps = {
    ...viewport,
    width: "100%",
    height: "100%",
    mapStyle: "mapbox://styles/mapbox/dark-v9"
  };
  const pan = useCallback(() => {
    updateViewport(viewport => ({
      ...viewport,
      zoom: 10,
      transitionInterpolator: new FlyToInterpolator(),
      transitionDuration: "auto"
    }));
  }, [updateViewport]);
  return (
    <>
      <ReactMapGL mapboxApiAccessToken={MAPBOX_TOKEN} {...mapProps} />
      <button onClick={pan}>Pan</button>
    </>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Not sure if getFlyToDuration is expected to return NaN when only zoom changes (I didn't find a test case in https://github.com/uber-web/math.gl for this). If so, we should probably fall back to a numerical duration for transition when this happens. If not, I'm happy to open an issue over at https://github.com/uber-web/math.gl.

[Pessimistress]

The NaN issue will be fixed by https://github.com/uber-web/math.gl/pull/125

Fallback logic needs to be added to the FlyToInterpolator class.

[Pessimistress]

Should be fixed in 5.1.7

[grallc]

Hello
I'm still having the issue.
I'm using v5.2.7

Thanks