React Map GL Draw typescript error "Declaration or statement expected"

Viewed 845

I'm trying to add the Editor to my map, but the moment I import "react-map-gl-draw", I get the following error and I can't find anything on it. When I remove the editor, the error is gone and I can see the map.

Can someone give me some direction for debugging this problem?

import { DrawPolygonMode, Editor } from 'react-map-gl-draw';
node_modules/@nebula.gl/edit-modes/dist-types/index.d.ts
TypeScript error in node_modules/@nebula.gl/edit-modes/dist-types/index.d.ts(1,1):
Declaration or statement expected.  TS1128

  > 1 | export type { EditMode } from './lib/edit-mode';
      | ^
    2 | export type { GeoJsonEditModeType } from './lib/geojson-edit-mode';
    3 | export { GeoJsonEditMode } from './lib/geojson-edit-mode';
    4 | export { ModifyMode } from './lib/modify-mode';

The full React component

import React, { useState } from 'react';
import MapGL from 'react-map-gl';
import { DrawPolygonMode, Editor } from 'react-map-gl-draw';

import Dialog from '@material-ui/core/Dialog';

import { Wrapper } from './CreateMission.style';

interface Props {
  open: boolean;
  onClose?: () => void;
}

const CreateMission: React.FC<Props> = ({ open, onClose = () => {} }) => {
  const [viewport, setViewport] = useState({
    latitude: 51.228978,
    longitude: 4.404713,
    zoom: 15,
  });

  return (
    <Dialog
      fullWidth
      maxWidth="md"
      open={open}
      onClose={onClose}
      aria-labelledby="max-width-dialog-title"
    >
      <Wrapper>
        <MapGL
          {...viewport}
          height="100%"
          width="100%"
          onViewportChange={(vp) => {
            setViewport({
              latitude: vp.latitude,
              longitude: vp.longitude,
              zoom: vp.zoom,
            });
          }}
          mapStyle="mapbox://styles/mapbox/satellite-v9"
        >
          {/* <Editor mode={new DrawPolygonMode()} /> */}
        </MapGL>
      </Wrapper>
    </Dialog>
  );
};

export default CreateMission;
1 Answers

I found the issue! My project was on typescript 3.7 and the syntax used in the "react-map-gl-draw" was added from version 3.8. So the solution was simply an update of typescript from 3.7 to the latest version 3.9, after that everything is working fine.

Related