search

bluehalo / ngx-leaflet-draw

MIT License
88 stars 29 forks source link

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

Open morong34 opened 9 months ago

morong34 commented 9 months ago

Recently i upgrade to angulare v17, and i got this error when i try to serve my project

Screenshot 2023-11-24 at 23 12 02

`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 commented 8 months ago

@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 commented 8 months ago

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

simfyz commented 8 months ago

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 commented 8 months ago

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

It fails when I tried to:

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 commented 8 months ago

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 commented 8 months ago

@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 commented 4 months ago

The issue mentioned by @simfyz https://github.com/bluehalo/ngx-leaflet-draw/issues/148#issuecomment-1836347130 still exists in @asymmetrik/ngx-leaflet-draw@17.0.1 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 commented 3 months ago

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