React-mapbox-gl: ES5 require not working

[jonheslop]

Hi there, I’m conditionally requiring ReactMapboxGL on the client side only so I can’t use import but when I use

var ReactMapboxGl = require("react-mapbox-gl").default // Note the default was necessary too
var Layer = ReactMapboxGl.Layer
var Feature = ReactMapboxGl.Feature

I get the following error

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

The map loads ok, but no Layers, Markers or Features show.

I had a little google and it seems like the problem might be to do with transpiled Typescript?

This is the relevant code in my repo

Thanks in advance for any help

[alex3165]

Thanks for the issue, I will look into it when i have some free time

[kitten]

This is because you're accessing module.default.Layer instead of module.Layer ;)

[jonheslop]

@philpl if I use module.layer then the page fails to load entirely, I get the error

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

[jonheslop]

I got it working in the end using

var ReactMapboxGl = require('react-mapbox-gl')
var ReactMapboxGlComponent = ReactMapboxGl.default
var Layer = ReactMapboxGl.Layer
var Feature = ReactMapboxGl.Feature
var Marker = ReactMapboxGl.Marker

followed by

<ReactMapboxGlComponent
  ...>
  <Layer
    ...>
    <Feature coordinates={routeLine}/>
  </Layer>
</ReactMapboxGlComponent>