Error using react-map-gl in create-react-app

Question

Building a simple app to tryout Uber's React Map GL using the super simple Create React App setup. Here's a simplified setup of what I have:

import React, { Component } from 'react'
import MapGL from 'react-map-gl'

class Home extends Component {
  render() {
    return (
      <MapGL
        width={400}
        height={400}
        latitude={37.7577}
        longitude={-122.4376}
        zoom={8}
        mapStyle="mapbox://styles/mapbox/dark-v9"
      />
  }
}

which results in an error of:

Uncaught TypeError: Cannot convert undefined or null to object
  at Function.keys (<anonymous>)
  at new module.exports (index.js:9)
  at Object.<anonymous> (web_worker.js:5)
  at __webpack_require__ (bootstrap e5da5fb…:555)
  at fn (bootstrap e5da5fb…:86)
  at Object.<anonymous> (worker_pool.js:4)
  at __webpack_require__ (bootstrap e5da5fb…:555)
  at fn (bootstrap e5da5fb…:86)
  at Object.<anonymous> (global_worker_pool.js:2)
  at __webpack_require__ (bootstrap e5da5fb…:555)

In looking at Uber's example app using webpack I noticed they're using the transform-loader?brfs-babel loader for the mapbox-gl.js file.

With Create React App you don't have access to the webpack configuration since it's contained within another package, so the only option seems to be to run npm run eject to pull the dependancies and webpack configuration into the project.

Is ejecting the only option? Or am I missing a way to do this within a standard create-react-app install?

i think issue is, mapStyle, it expect a style object, and u r passing a string, use it like this: mapStyle={mapboxStyle}, check the doc: github.com/uber/react-map-gl#transitions — Mayank Shukla
– Mayank Shukla, Commented Apr 11, 2017 at 18:10
That's what I thought too, but the Uber example app shows a string being used - github.com/uber/react-map-gl/blob/master/examples/… — Brett DeWoody
– Brett DeWoody, Commented Apr 11, 2017 at 18:14

att · Accepted Answer · 2017-08-18 05:10:45Z

1

For development add mapboxApiAccessToken property.

If you're usin CRA, In production in .env file set REACT_APP_MAPBOX_ACCESS_TOKEN environmen varilable. mapboxApiAccessToken={'process.env.REACT_APP_MAPBOX_ACCESS_TOKEN'}/>

<MapGL
        width={400}
        height={400}
        latitude={37.7577}
        longitude={-122.4376}
        zoom={8}
        mapStyle="mapbox://styles/mapbox/dark-v9"
        mapboxApiAccessToken={'your-access-toekn-goes-here'}/>

answered Aug 18, 2017 at 5:10

att

6539 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Error using react-map-gl in create-react-app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related