How to use the mapbox-gl.supported function in mapbox-gl

constructor(selectorId, argConfig) {
    const config = argConfig || {};

    this.theme = argConfig.theme || themes.bright;
    this.userIsUsingTouch = false;

    this.center = undefined;
    this.zoom = config.zoom;

    if (!mapboxgl.supported()) {
      // eslint-disable-next-line no-throw-literal
      throw 'WebGL not supported';
    }

    this.map = new mapboxgl.Map({
      container: selectorId, // selector id
      attributionControl: false,
      scrollZoom: true,
      style: {
        version: 8,
        sources: {},
        layers: [],
        zoom: this.zoom || 3,
        center: this.center || [0, 50],
      },
    });

beforeCreate () {
    if (!mapboxgl) throw new Error('Mapbox GL doesn\'t included')

    if (!mapboxgl.supported()) throw new Error('Your browser doesn\'t support Mapbox GL')
  },
  created () {

static supported() {
    return mapboxgl.supported();
  }

constructor(props) {
    super(props);
    this.state = {
      isSupported: mapboxgl.supported(),
      isDragging: false,
      isHovering: false,
      startDragLngLat: null,
      startBearing: null,
      startPitch: null
    };
    this._queryParams = {};
    mapboxgl.accessToken = props.mapboxApiAccessToken;

    if (!this.state.isSupported) {
      this.componentDidMount = noop;
      this.componentWillReceiveProps = noop;
      this.componentDidUpdate = noop;
    }

    autobind(this);

constructor(props) {
    super(props);
    this.state = {
      isSupported: mapboxgl.supported(),
      isDragging: false,
      isHovering: false,
      startDragLngLat: null,
      startBearing: null,
      startPitch: null
    };
    this._queryParams = {};
    mapboxgl.accessToken = props.mapboxApiAccessToken;

    if (!this.state.isSupported) {
      this.componentDidMount = noop;
      this.componentWillReceiveProps = noop;
      this.componentDidUpdate = noop;
    }

    autobind(this);

static supported() {
    return mapboxgl.supported();
  }

static supported() {
    return mapboxgl.supported();
  }

import ReactDOM from 'react-dom'
import MapboxGl from 'mapbox-gl'
import MapboxInspect from 'mapbox-gl-inspect'
import FeatureLayerPopup from './FeatureLayerPopup'
import FeaturePropertyPopup from './FeaturePropertyPopup'
import tokens from '../../config/tokens.json'
import colors from 'mapbox-gl-inspect/lib/colors'
import Color from 'color'
import ZoomControl from '../../libs/zoomcontrol'
import { colorHighlightedLayer } from '../../libs/highlight'
import 'mapbox-gl/dist/mapbox-gl.css'
import '../../mapboxgl.css'
import '../../libs/mapbox-rtl'


const IS_SUPPORTED = MapboxGl.supported();

function renderPopup(popup, mountNode) {
  ReactDOM.render(popup, mountNode);
  var content = mountNode.innerHTML;
  return content;
}

function buildInspectStyle(originalMapStyle, coloredLayers, highlightedLayer) {
  const backgroundLayer = {
    "id": "background",
    "type": "background",
    "paint": {
      "background-color": '#1c1f24',
    }
  }

initMapBox () {
      if (!mapboxgl.supported()) {
        this.browserUnsupported = true
        return
      }

      const zoom = this.initialZoom || DEFAULT_MAP_ZOOM
      const centre = this.initialCentre ? this.initialCentre : CENTRE_LNG_LAT_BC

      var mapConfig = {
        container: this.$el,
        zoom,
        minZoom: 4,
        maxPitch: 0,
        dragRotate: false,
        center: centre,
        style: this.buildMapStyle()
      }

initMapBox () {
      if (!mapboxgl.supported()) {
        this.browserUnsupported = true
        return
      }

      var mapConfig = {
        container: this.$el,
        zoom: 4,
        minZoom: 4,
        maxPitch: 0,
        dragRotate: false,
        center: [this.longitude || -126.5, this.latitude || 54.5],
        style: {
          version: 8,
          sources: {
            [DATABC_ROADS_SOURCE_ID]: DATABC_ROADS_SOURCE,
            [DATABC_CADASTREL_SOURCE_ID]: DATABC_CADASTREL_SOURCE