未知の型エラー：_arc2.default.GreatCircleはコンストラクタではありません

Question

反応リーフレット用のプラグインを作成しようとしています。 iが

L.Polyline.Arc(position.from, position.to, option)

これは

import React, { PropTypes } from 'react'; 
import { Path } from 'react-leaflet'; 
import L from 'leaflet' 
import { Arc } from './leaflet.arc'; 


export default class ArcLine extends Path { 
    static propTypes = { 
    children: PropTypes.oneOfType([ 
     PropTypes.arrayOf(PropTypes.node), 
     PropTypes.node, 
    ]), 
    option:PropTypes.object, 
    position: PropTypes.object.isRequired 
    }; 

    createLeafletElement (props) { 
    const { position, option, ...options } = props 
    return L.Polyline.Arc(position.from, position.to, option) 
    } 

    updateLeafletElement (fromProps, toProps) { 
    if (toProps.position !== fromProps.position) { 
     this.leafletElement._createLatLngs(line, toProps.position.from) 
    } 
    this.setStyleIfChanged(fromProps, toProps) 
    } 
} 

./leaflet.arcが

import arc from 'arc'; 
/** 
* Transform L.LatLng to {x, y} object 
* @param {L.LatLng} latlng 
* @returns {{x: {number}, y: {number}}} 
* @private 
*/ 
const _latLngToXY = latlng => ({ 
    x: latlng.lng, 
    y: latlng.lat 
}); 

/** 
* Create array of L.LatLng objects from line produced by arc.js 
* @param {object} line 
* @param {L.LatLng} from 
* @private 
* @returns {Array} 
*/ 
function _createLatLngs(line, from) { 
    if (line.geometries[0] && line.geometries[0].coords[0]) { 
     /** 
     * stores how many times arc is broken over 180 longitude 
     * @type {number} 
     */ 
     let wrap = from.lng - line.geometries[0].coords[0][0] - 360; 

     return line.geometries 
      .map(subLine => { 
       wrap += 360; 
       return subLine.coords.map(point => L.latLng([point[1], point[0] + wrap])); 
      }) 
      .reduce((all, latlngs) => all.concat(latlngs)); 
    } else { 
     return []; 
    } 
} 

if (!L) { 
    throw "Leaflet.js not included"; 
} else if (!arc && !arc.GreatCircle) { 
    throw "arc.js not included"; 
} else { 
    L.Polyline.Arc = function (from, to, options) { 
     from = L.latLng(from); 
     to = L.latLng(to); 
debugger 

     var vertices = 10; 
     var arcOptions = {}; 
     if (options) { 
      if (options.offset) { 
       arcOptions.offset = options.offset; 
       delete options.offset; 
      } 
      if (options.vertices) { 
       vertices = options.vertices; 
       delete options.vertices; 
      } 
     } 

     var generator = new arc.GreatCircle({x: from.lng, y: from.lat}, {x: to.lng, y: to.lat}); 

     var line = generator.Arc(vertices, arcOptions); 
     var latLngs = []; 

     var wrap = 0; // counts how many times arc is broken over 180 degree 
     if (line.geometries[0] && line.geometries[0].coords[0]) 
      wrap = from.lng - line.geometries[0].coords[0][0]; 

     line.geometries.forEach(function(line) { 
      line.coords.forEach(function (point) { 
       latLngs.push(L.latLng(
        [point[1], point[0] + wrap] 
       )); 
      }); 
      wrap += 360; 
     }); 
     line.geometries[0].coords 
     return L.polyline(latLngs, options); 
    }; 
} 

なぜ私はこのエラーを取得しています、どんな提案である私のコンポーネントであるを返していながら、私はこのエラーを取得しています？ここでは、この行で

Answer 1

：

import { Arc } from './leaflet.arc' 

...あなたのleaflet.arcファイルからアーク変数をインポートしようとしています。しかし、leaflet.arcファイルでは、Arc関数をリーフレットのPolylineオブジェクトに添付するだけで、何かをエクスポートしているようには見えません。また、コンポーネント内のコードでは、インポートしようとしている変数Arcを使用していません。つまり、プロパティが未定義のエクスポートから読み取ろうとしているため、コードは失敗しますleaflet.arc。おそらく、オブジェクトをインポートしようとせずにファイルをインポートするだけのはずです。

TLDR：

は、この行を置き換えます。これで

import { Arc } from './leaflet.arc' 

：

import './leaflet.arc'