在create-react-app中使用react-map-gl時出錯

構建一個簡單的應用程序，使用超級簡單的Create React App安裝程序來試用優步的React Map GL。這裏是什麼，我有一個簡化的設置：在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我注意到他們正在使用的transform-loader?brfs-babel裝載機的mapbox-gl.js文件。

使用Create React App，您無法訪問webpack配置，因爲它包含在另一個軟件包中，所以唯一的選擇似乎是運行npm run eject將依賴關係和webpack配置拉入項目。

彈出唯一的選項？或者我錯過了在標準create-react-app安裝中執行此操作的方法？

來源

2017-04-11 Brett DeWoody

我認爲問題是，'mapStyle'，它期待的風格'object'，和UR傳遞'string'，使用這樣的： 'mapStyle = {mapboxStyle}'，檢查文檔：https：//github.com/uber/react-map-gl#transitions –

這也是我的想法，但優步示例應用程序顯示正在使用的字符串 - https ：//github.com/uber/react-map-gl/blob/master/examples/exhibit-webpack/app.js#L32 –

對於開發添加mapboxApiAccessToken屬性。

如果您使用CRA，則在生成.env文件時設置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'}/>

來源

2017-08-18 05:10:45 user3405462

在create-react-app中使用react-map-gl時出錯

回答

相關問題