Module '"leaflet"' has no exported member 'DrawEvents'.

[morong34]

Recently i upgrade to angulare v17, and i got this error when i try to serve my project `Error: node_modules/@asymmetrik/ngx-leaflet-draw/lib/core/leaflet-draw.directive.d.ts:2:19 - error TS2305: Module '"leaflet"' has no exported member 'DrawEvents'.

2 import { Control, DrawEvents } from 'leaflet';`

can someone to help me?

ps: to mention that i upgrade also the "@types/leaflet": "^1.9.8"

[simfyz]

@morong34 I have the same issue as well after updating to Angular 17, I am using esbuild. But it is thrown when I load the map only. Did you find any work around or solutions for this?

This is the error: TypeError: Cannot read properties of undefined (reading 'Event') at _LeafletDrawDirective.ngOnInit

[reblace]

I haven't released a version for Angular 17 yet, should be able to soon (this weekend maybe).

[simfyz]

I haven't released a version for Angular 17 yet, should be able to soon (this weekend maybe).

@reblace It would be awesome. It is causing me to hold an entrire featue to be on hold. Thanks in advance.

[simfyz]

@reblace More context, I updating the fork to ng17 and it worked, tried the demo it works.

It fails when I tried to:

• Create a new angular app with v17 CLI and install only leaflet and laflet draw, it throws the error. trows following error core.mjs:11751 ERROR TypeError: Cannot read properties of undefined (reading 'draw') at LeafletDrawUtil.deepLiteralCopy (asymmetrik-ngx-leaflet-draw.mjs:21:34) at _LeafletDrawDirective.ngOnInit (asymmetrik-ngx-leaflet-draw.mjs:63:23) at callHookInternal (core.mjs:3523:14) at callHook (core.mjs:3550:13) at callHooks (core.mjs:3505:17) at executeInitAndCheckHooks (core.mjs:3455:9) at selectIndexInternal (core.mjs:11953:17) at Module.ɵɵadvance (core.mjs:11936:5) at LeafletDrawCoreDemoComponent_Template (core-demo.component.html:10:8) at executeTemplate (core.mjs:12158:9)
• Install the npm package directly to demo, it fails
• Point the package reference to /dist and it fails

Later I tried to copy only the directive and made it standlone and merged to my code and tried. It works perfectly. I think there is something in the build output or builder.

[reblace]

I just released the ng 17 version of the lib and created a new project from scratch using the latest of everything and it works.

@simfyz - your bullet #1 will happen if you forget to import leaflet-draw. The drawLocal object ends up being null and the deepLiteralCopy errors because it's trying to copy into an undefined object.

[simfyz]

@reblace Thanks for the update and the fix. I think it is better to add these in the documentation. What I found is order of import is also a point. When the leaflet-draw import is after the LeafletDrawModule, it works in ng serve, but not in build output.

[nenadvicentic]

The issue mentioned by @simfyz https://github.com/bluehalo/ngx-leaflet-draw/issues/148#issuecomment-1836347130 still exists in @asymmetrik/[email protected] when used with Angular 17 and new esbuild bundler.

ERROR TypeError: Cannot read properties of undefined (reading 'draw') at LeafletDrawUtil.deepLiteralCopy (asymmetrik-ngx-leaflet-draw.mjs:21:34)

Issue can be fixed in client application by explicitly importing leaflet-draw: import "leaflet-draw";

But the culprit are this two lines of code:

https://github.com/bluehalo/ngx-leaflet-draw/blob/7c32f7740120ede25a68aebdf6d906ab78dd834a/projects/ngx-leaflet-draw/src/lib/core/leaflet-draw.directive.ts#L3-L4

drawLocal does not exist in "leaflet" and is appended only after 2nd "import" line is executed. Tree shaking does not see this 2nd line as dependency and cuts of the import "leaflet-draw" statement.

Order of this 2 lines should be changed, for tree-shaking not to break bundled code:

import 'leaflet-draw';
import { Control, Draw, DrawEvents, drawLocal } from 'leaflet';

[simfyz]

@nenadvicentic Yes, you're right. @reblace The issue exists. still with the latest version as well.