Cannot built SPFX project using leaflet-react [closed]

Gulp serve failed after I installed leaflet-react. I tried several Typescript versions, but still failing with bellow errors:

[10:57:47] Error – [tsc] ../node_modules/@react-leaflet/core/types/index.d.ts(3,1): error TS1128: Declaration or statement expected.
[10:57:47] Error – [tsc] ../node_modules/@react-leaflet/core/types/index.d.ts(3,13): error TS1005: ‘;’ expected.
[10:57:47] Error – [tsc] ../node_modules/@react-leaflet/core/types/index.d.ts(3,40): error TS1005: ‘;’ expected.
[10:57:47] Error – [tsc] ../node_modules/@react-leaflet/core/types/index.d.ts(6,1): error TS1128: Declaration or statement expected.
[10:57:47] Error – [tsc] ../node_modules/@react-leaflet/core/types/index.d.ts(6,13): error TS1005: ‘;’ expected.
[10:57:47] Error – [tsc] ../node_modules/@react-leaflet/core/types/index.d.ts(6,46): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/@react-leaflet/core/types/index.d.ts(9,1): error TS1128: Declaration or statement expected.
[10:57:48] Error – [tsc] ../node_modules/@react-leaflet/core/types/index.d.ts(9,13): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/@react-leaflet/core/types/index.d.ts(9,69): error TS1109: Expression expected.
[10:57:48] Error – [tsc] ../node_modules/@react-leaflet/core/types/index.d.ts(9,76): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/@react-leaflet/core/types/index.d.ts(12,1): error TS1128: Declaration or statement expected.
[10:57:48] Error – [tsc] ../node_modules/@react-leaflet/core/types/index.d.ts(12,13): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/@react-leaflet/core/types/index.d.ts(12,50): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/@react-leaflet/core/types/index.d.ts(14,1): error TS1128: Declaration or statement expected.
[10:57:48] Error – [tsc] ../node_modules/@react-leaflet/core/types/index.d.ts(14,13): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/@react-leaflet/core/types/index.d.ts(14,35): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/@react-leaflet/core/types/index.d.ts(18,1): error TS1128: Declaration or statement expected.
[10:57:48] Error – [tsc] ../node_modules/@react-leaflet/core/types/index.d.ts(18,13): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/@react-leaflet/core/types/index.d.ts(18,56): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/@react-leaflet/core/types/index.d.ts(20,1): error TS1128: Declaration or statement expected.
[10:57:48] Error – [tsc] ../node_modules/@react-leaflet/core/types/index.d.ts(20,13): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/@react-leaflet/core/types/index.d.ts(20,40): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/@react-leaflet/core/types/index.d.ts(23,1): error TS1128: Declaration or statement expected.
[10:57:48] Error – [tsc] ../node_modules/@react-leaflet/core/types/index.d.ts(23,13): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/@react-leaflet/core/types/index.d.ts(23,32): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/CircleMarker.d.ts(2,13): error TS1005: ‘=’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/CircleMarker.d.ts(2,40): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/CircleMarker.d.ts(4,1): error TS1128: Declaration or statement expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/CircleMarker.d.ts(4,13): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/CircleMarker.d.ts(4,40): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(3,1): error TS1128: Declaration or statement expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(3,13): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(3,46): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(5,1): error TS1128: Declaration or statement expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(5,13): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(5,34): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(7,1): error TS1128: Declaration or statement expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(7,13): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(7,40): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(9,1): error TS1128: Declaration or statement expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(9,13): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(9,40): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(11,1): error TS1128: Declaration or statement expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(11,13): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(11,35): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(13,1): error TS1128: Declaration or statement expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(13,13): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(13,40): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(15,1): error TS1128: Declaration or statement expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(15,13): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(15,38): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(17,1): error TS1128: Declaration or statement expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(17,13): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(17,63): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(19,1): error TS1128: Declaration or statement expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(19,13): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(19,39): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(21,1): error TS1128: Declaration or statement expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(21,13): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(21,40): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(23,1): error TS1128: Declaration or statement expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(23,13): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(23,34): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(25,1): error TS1128: Declaration or statement expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(25,13): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(25,32): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(27,1): error TS1128: Declaration or statement expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(27,13): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(27,35): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(29,1): error TS1128: Declaration or statement expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(29,13): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(29,36): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(31,1): error TS1128: Declaration or statement expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(31,13): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(31,33): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(33,1): error TS1128: Declaration or statement expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(33,13): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(33,37): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(35,1): error TS1128: Declaration or statement expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(35,13): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(35,40): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(37,1): error TS1128: Declaration or statement expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(37,13): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(37,38): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(39,1): error TS1128: Declaration or statement expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(39,13): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(39,37): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(41,1): error TS1128: Declaration or statement expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(41,13): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(41,35): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(43,1): error TS1128: Declaration or statement expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(43,13): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(43,40): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(45,1): error TS1128: Declaration or statement expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(45,13): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(45,40): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(47,1): error TS1128: Declaration or statement expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(47,13): error TS1005: ‘;’ expected.
[10:57:48] Error – [tsc] ../node_modules/react-leaflet/types/index.d.ts(47,39): error TS1005: ‘;’ expected.

Thanks for your help

Answer

Unknown what version of SPFx you’re trying to use this with, but appears that package requires TypeScript v4+ (ref).

AFAIK, SPFx doesn’t support TypeScript v4 at this time, only TS v3.9.