reppners / ngx-drag-drop

Angular directives using the native HTML Drag And Drop API
https://reppners.github.io/ngx-drag-drop/
BSD 3-Clause "New" or "Revised" License
299 stars 118 forks source link

Angular 13.2.2 and jest 27.4 throw ReferenceError on DndModule #105

Closed KupnoH closed 2 years ago

KupnoH commented 2 years ago

Describe the bug I've been working on updating application to angular 13.2 version and one of the updates was ngx-drag-drop to v13.0.0. Application works well, but I have an error in my jest(27.4) tests. I use few directives in my component's html file (dndDropzone, dndDisableDropIf). So in my test file I have only DndModule import into TestBed. And I have the following error:

ReferenceError: Cannot access 'DndDraggableDirective' before initialization

and it points to DndModule import:

3 | import { DndModule } from 'ngx-drag-drop';

To Reproduce Just use jest 27.4 and angular 13.2.2 and test any component that needs DndModule imported in TestBed.

Expected behavior No error, I guess

Desktop (please complete the following information):

KupnoH commented 2 years ago

Also error pointed to node_modules/ngx-drag-drop/fesm2015/ngx-drag-drop.mjs and there's DndDraggableDirective usage on line 196, but it's declared later. Tried to put lines 196 - 203 right after directive declaration and tests worked. I'd do the fix myself, but honestly I don't know how to do it.

bmarcotte commented 2 years ago

I see there is a closed issue, angular/components#23907, in the angular/components repo, that describes a very similar error message. They claim to have fixed that in v13.0.1 (in https://github.com/angular/components/pull/23951), but other commenters mention continuing to see the problem in v13.0.2 and later. The recommendation in those cases is to make sure all Angular dependencies are updated in package-lock.json, and then rebuild the library.

gmaggiodev commented 2 years ago

We have the same problem with angular 13.2.5.

wimme commented 2 years ago

Same here with Angular 13.3.11 and Jest 27.2.3.

ReferenceError: Cannot access 'DndDraggableDirective' before initialization

    > 33 | import { DndModule } from 'ngx-drag-drop';
         | ^

      at Object.<anonymous> (../../../node_modules/ngx-drag-drop/fesm2020/ngx-drag-drop.mjs:194:160)
      at Object.<anonymous> (../../../libs/mylib/src/lib/mymodule.module.ts:33:1)
reppners commented 2 years ago

Merged #109 and released as v13.0.1. If it does not fix your issue, please let me know!