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

Question

构建一个简单的应用程序来试用 Uber React Map GL使用 super 简单Create React App设置。这是我所拥有的简化设置:

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 runject 来提取依赖项和 webpack 配置进入项目。

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

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