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

Question

使用超级简单的Create React App设置构建一个简单的应用程序来试用优步的React Map GL。下面是我所拥有的内容的简化设置：

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"
      />
  }
}

这会导致以下错误：

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)

在查看优步的example app using webpack时，我注意到他们使用的是mapbox-gl.js文件的transform-loader?brfs-babel加载器。

使用Create React App，你不能访问webpack配置，因为它包含在另一个包中，所以唯一的选择似乎是运行npm run eject来将依赖项和webpack配置拉到项目中。

弹出是唯一的选择吗？或者，我是否缺少在标准create-react-app安装中执行此操作的方法？

Answer 1

对于开发，添加mapboxApiAccessToken属性。

如果你在使用CRA，在生产环境中将REACT_APP_MAPBOX_ACCESS_TOKEN设置为可变的.env文件。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'}/>