TypeError: can't access property "getStyle", this.map is undefined

[eiiot]

I'm attempting to use the styles control w/ react, but occasionally get this error on page load.

I don't know if you're familiar w/ react, but I thought I would double check here anyways

Here's the StylesControl component

import { useControl, Marker, ControlPosition } from 'react-map-gl'
import { StylesControl } from 'mapbox-gl-controls'
import { StyleOption } from 'mapbox-gl-controls/lib/StylesControl/types'

interface StylesControlProps {
  /** Array of style options */
  styles?: StyleOption[]

  /** Triggered on style change */
  position?: ControlPosition

  onLoading?: (e: object) => void
  onChange?: (e: object) => void
  onError?: (e: object) => void
}

/* eslint-disable complexity,max-statements */
export default function MapboxStyleControl(props: StylesControlProps) {
  const styleControl = useControl(
    () => {
      const ctrl = new StylesControl({
        ...props,
      })
      return ctrl
    },
    {
      position: props.position,
    }
  )

  return null
}

Thanks!

[korywka]

@eiiot please, provide minimal example on https://codesandbox.io/ 🙏

[eiiot]

I'll try my best

[eiiot]

https://codesandbox.io/s/condescending-faraday-qxm8le?file=/src/index.js

It doesn't look like the issue is showing up :/

It could be something to do with Next.js

[korywka]

Yep, it looks like something with SSR and next.js.

[eiiot]

Ugh. *I have SSR disabled I think... let me check