Kepler gl Uncaught runtime errors using Draw On Map>Polygon tool and Draw On Map>Rectangle tool:
I’m receiving these errors when using the Kepler.gl>Draw On Map>Polygon tool and Draw On Map>Rectangle tool.
I think this might related to babel or webpack?
**Here’s my import for creating the store. **
``
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { thunk } from 'redux-thunk';
import { taskMiddleware } from 'react-palm/tasks';
import { keplerGlReducer } from '@kepler.gl/reducers';
import reportWebVitals from './reportWebVitals';
import './index.css';
import App from './App';
``
``
Uncaught runtime errors:
×
ERROR
(0 , _rewind.default) is not a function
TypeError: (0 , _rewind.default) is not a function
at DrawPolygonMode.rewindPolygon (localhost:3000/static/js/bundle.js:155146:39)
at DrawPolygonMode.getAddFeatureAction (localhost:3000/static/js/bundle.js:155160:32)
at DrawPolygonMode.getAddFeatureOrBooleanPolygonAction (http://localhost:3000/static/js/bundle.js:155251:19)
at DrawPolygonMode.handleClick (localhost:3000/static/js/bundle.js:153250:31)
at EditableGeoJsonLayer.onLayerClick (localhost:3000/static/js/bundle.js:161248:28)
at EditableGeoJsonLayer._onanyclick (localhost:3000/static/js/bundle.js:162032:12)
at EditableGeoJsonLayer._forwardEventToCurrentLayer (http://localhost:3000/static/js/bundle.js:162022:7)
at EventRegistrar._emit (localhost:3000/static/js/bundle.js:344192:9)
at EventRegistrar.handleEvent (localhost:3000/static/js/bundle.js:344090:12)
at Manager.emit (localhost:3000/static/js/bundle.js:311400:20)
``
``
Uncaught runtime errors:
×
ERROR
(0 , _bboxPolygon.default) is not a function
TypeError: (0 , _bboxPolygon.default) is not a function
at DrawRectangleMode.getTwoClickPolygon (localhost:3000/static/js/bundle.js:199052:51)
at DrawRectangleMode.getGuides (localhost:3000/static/js/bundle.js:205182:26)
at DrawRectangleMode.getTentativeGuide (localhost:3000/static/js/bundle.js:200606:25)
at DrawRectangleMode.checkAndFinishPolygon (localhost:3000/static/js/bundle.js:205147:35)
at DrawRectangleMode.handleClick (localhost:3000/static/js/bundle.js:205121:12)
at EditableGeoJsonLayer.onLayerClick (localhost:3000/static/js/bundle.js:206738:28)
at EditableGeoJsonLayer._onanyclick (localhost:3000/static/js/bundle.js:207522:12)
at EditableGeoJsonLayer._forwardEventToCurrentLayer (localhost:3000/static/js/bundle.js:207512:7)
at EventRegistrar._emit (localhost:3000/static/js/bundle.js:320708:9)
at EventRegistrar.handleEvent (localhost:3000/static/js/bundle.js:320606:12)
``
My package.json:
``
{
"name": "kepler-gl-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"ajv": "^8.16.0",
"assert": "^2.1.0",
"kepler.gl": "^3.0.0",
"@luma.gl/core": "^8.5.20",
"@luma.gl/webgl": "^8.5.20",
"@deck.gl/core": "^8.9.27",
"@deck.gl/extensions": "^8.9.27",
"@deck.gl/layers": "^8.9.27",
"@deck.gl/react": "^8.9.27",
"@deck.gl/mapbox": "^8.9.27",
"@nebula.gl/layers": "1.0.2",
"@nebula.gl/edit-modes": "1.0.2",
"@nebula.gl/editor": "1.0.2",
"@nebula.gl/overlays": "1.0.2",
"@loaders.gl/polyfills": "^4.1.0-alpha.4",
"react-vis": "^1.11.7",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-palm": "^3.3.8",
"react-redux": "^9.1.2",
"react-scripts": "5.0.1",
"react-virtualized": "^9.22.5",
"redux": "^5.0.1",
"redux-thunk": "^3.1.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
``
Here’s the bundle.js showing the (0, _bboxPolygon[“default”]):
Object.defineProperty(exports, "__esModule", ({
value: true
}));
exports.DrawRectangleMode = void 0;
var _bboxPolygon = _interopRequireDefault(__webpack_require__(/*! @turf/bbox-polygon */ "./node_modules/@turf/bbox-polygon/dist/cjs/index.cjs"));
var _twoClickPolygonMode = __webpack_require__(/*! ./two-click-polygon-mode */ "./node_modules/@kepler.gl/layers/node_modules/@nebula.gl/edit-modes/dist-es6/lib/two-click-polygon-mode.js");
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
"default": obj
};
}
function _typeof(obj) {
"@babel/helpers - typeof";
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
_typeof = function _typeof(obj) {
return typeof obj;
};
} else {
_typeof = function _typeof(obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
}
return _typeof(obj);
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
return Constructor;
}
function _createSuper(Derived) {
return function () {
var Super = _getPrototypeOf(Derived),
result;
if (_isNativeReflectConstruct()) {
var NewTarget = _getPrototypeOf(this).constructor;
result = Reflect.construct(Super, arguments, NewTarget);
} else {
result = Super.apply(this, arguments);
}
return _possibleConstructorReturn(this, result);
};
}
function _possibleConstructorReturn(self, call) {
if (call && (_typeof(call) === "object" || typeof call === "function")) {
return call;
}
return _assertThisInitialized(self);
}
function _assertThisInitialized(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return self;
}
function _isNativeReflectConstruct() {
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
if (Reflect.construct.sham) return false;
if (typeof Proxy === "function") return true;
try {
Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
return true;
} catch (e) {
return false;
}
}
function _getPrototypeOf(o) {
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
return o.__proto__ || Object.getPrototypeOf(o);
};
return _getPrototypeOf(o);
}
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function");
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
writable: true,
configurable: true
}
});
if (superClass) _setPrototypeOf(subClass, superClass);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
}
var DrawRectangleMode = /*#__PURE__*/function (_TwoClickPolygonMode) {
_inherits(DrawRectangleMode, _TwoClickPolygonMode);
var _super = _createSuper(DrawRectangleMode);
function DrawRectangleMode() {
_classCallCheck(this, DrawRectangleMode);
return _super.apply(this, arguments);
}
_createClass(DrawRectangleMode, [{
key: "getTwoClickPolygon",
value: function getTwoClickPolygon(coord1, coord2, modeConfig) {
var rectangle = (0, _bboxPolygon["default"])([coord1[0], coord1[1], coord2[0], coord2[1]]);
rectangle.properties = rectangle.properties || {};
rectangle.properties.shape = 'Rectangle'; // @ts-ignore
return rectangle;
}
}]);
return DrawRectangleMode;
}(_twoClickPolygonMode.TwoClickPolygonMode);
exports.DrawRectangleMode = DrawRectangleMode;
I expect the Draw On Map>Polygon tool and Draw On Map>Rectangle tool to draw on the map with no errors.
New contributor
user25501236 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.