Question

使用超级简单的React Map GL设置构建一个简单的应用来试用优步的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)

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

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

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

Answer 1

对于开发，添加mapboxApiAccessToken属性。

如果您在CRA中使用，则在.env文件中生成设置REACT_APP_MAPBOX_ACCESS_TOKEN环境可变。 mapboxApiAccessToken = {＆＃39; process.env.REACT_APP_MAPBOX_ACCESS_TOKEN＆＃39;} /＆GT;

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

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

1 个答案: