Uncaught TypeError: _arc2.default.GreatCircle is not a constructor - leaflet

Question

Trying to create plugin for react-leaflet. I am getting this error while
i am returning
L.Polyline.Arc(position.from, position.to, option)
This is my Component
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 is
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);
};
}
Why am i getting this error, any suggestion?

Answer 1

In this line here:
import { Arc } from './leaflet.arc'
...you are trying to import the Arc variable from your leaflet.arc file. However, in your leaflet.arc file it doesn't look like you are exporting anything, simply attaching the Arc function to Leaflet's Polyline object. Also, in the code in your component you are not even using the Arc variable that you are trying to import. So, the code fails because a property is trying to be read from the undefined export from leaflet.arc. It seems that you should probably just import the file without trying to import any objects.
TLDR:
Replace this line:
import { Arc } from './leaflet.arc'
with this:
import './leaflet.arc'