在create-react-app中使用react-map-gl时出错

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?

Answer 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'}/>