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

【问题标题】：Error using react-map-gl in create-react-app在 create-react-app 中使用 react-map-gl 时出错
【发布时间】：2017-04-11 17:54:28
【问题描述】：

使用超级简单的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)

在查看 Uber 的 example app using webpack 时，我注意到他们正在使用 transform-loader?brfs-babel 加载程序来处理 mapbox-gl.js 文件。

使用 Create React App，您无法访问 webpack 配置，因为它包含在另一个包中，因此唯一的选择似乎是运行 npm run eject 以将依赖项和 webpack 配置拉入项目中。

弹出是唯一的选择吗？还是我错过了在标准create-react-app 安装中执行此操作的方法？

【问题讨论】：

我认为问题是，mapStyle，它需要一个样式object，而你传递一个string，像这样使用它：mapStyle={mapboxStyle}，查看文档：github.com/uber/react-map-gl#transitions
我也是这么想的，但是 Uber 示例应用显示正在使用 string - github.com/uber/react-map-gl/blob/master/examples/…

标签： javascript reactjs webpack mapbox-gl-js create-react-app

【解决方案1】：

为开发添加 mapboxApiAccessToken 属性。

如果您使用 CRA，请在 .env 文件中设置 REACT_APP_MAPBOX_ACCESS_TOKEN 环境变量。 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'}/>

【讨论】：