Module Not found Issue with nativescript-swipe-layout

[bpince]

I have installed the nativescript-swipe-layout npm package and now when I try and do a:
ns build android I am getting the following error:

Module not found: Error: Can't resolve 'nativescript-swipe-layout' in C:\native-script-apps\scl-v1\src\app\swipe'....

It seems to be complaining about the import - import { ANIMATION_STATE, GESTURE_MODE, SwipeDownEventData, SwipeLayout, SwipeLeftEventData, SwipeRightEventData, SwipeUpEventData } from "nativescript-swipe-layout";

But I cannot understand why, any help would be appreciated.

Here is my component:

`import { Component, ElementRef, ViewChild } from "@angular/core";
import { CardView } from "@nstudio/nativescript-cardview";
import { registerElement } from "@nativescript/angular";
import { TNSFontIconService } from "nativescript-ngx-fonticon";
import { ANIMATION_STATE, GESTURE_MODE, SwipeDownEventData, SwipeLayout, SwipeLeftEventData, SwipeRightEventData, SwipeUpEventData } from "nativescript-swipe-layout";

registerElement("CardView", () => CardView);
registerElement('SwipeLayout', () => SwipeLayout);

@component({
selector: "swipe",
templateUrl: "swipe.component.html",
})

export class SwipeComponent {
private _swipeLayouts: Array;
private currentSwipeLayout: SwipeLayout;
public swipeLayoutAnimated: ANIMATION_STATE;
public gestureMode: GESTURE_MODE;

public cards: Array<any> = [{ // dumb cards
    img: "https://img.youtube.com/vi/GGhKPm18E48/mqdefault.jpg",
    test: "Batman is pretty cool right?"
},
{
    img: "https://img.youtube.com/vi/GGhKPm18E48/mqdefault.jpg",
    test: "Batman is pretty cool right?"
}, {
    img: "https://img.youtube.com/vi/GGhKPm18E48/mqdefault.jpg",
    test: "Batman is pretty cool right?"
}, {
    img: "https://img.youtube.com/vi/GGhKPm18E48/mqdefault.jpg",
    test: "Batman is pretty cool right?"
}, {
    img: "https://img.youtube.com/vi/GGhKPm18E48/mqdefault.jpg",
    test: "Batman is pretty cool right?"
}, {
    img: "https://img.youtube.com/vi/GGhKPm18E48/mqdefault.jpg",
    test: "Batman is pretty cool right?"
}]

constructor(private fonticon: TNSFontIconService) {
    this._swipeLayouts = new Array();
    this.swipeLayoutAnimated = ANIMATION_STATE.ON_EVENTS; // Will animate only on swipe down and up events
    this.gestureMode = GESTURE_MODE.DRAG; // Cards will be draggable
}

swipeLayoutLoaded(event) {
    this._swipeLayouts.push(<SwipeLayout>event.object); // Since it's an Array everytime a SwipeLayout load we add it
}

ngAfterViewInit(): void {
    this.currentSwipeLayout = this._swipeLayouts[this._swipeLayouts.length - 1];
}

private next() {
    this._swipeLayouts.pop();
    this.currentSwipeLayout = this._swipeLayouts[this._swipeLayouts.length - 1];
}

swipeLeftCallback(swipeLeftEvent: SwipeLeftEventData) { // never called (not binded to the XML)
    console.log('swipeLeft');
    this.next();
}

swipeRightCallback(swipeRightEvent: SwipeRightEventData) { // never called (not binded to the XML)
    console.log('swipeRight');
    this.next();
}

swipeUpCallback(swipeUpEvent: SwipeUpEventData) { // called once the swipe up animation is done
    console.log('swipeUp');
    this.next();
}

swipeDownCallback(swipeDownEvent: SwipeDownEventData) { // called once the swipe down animation is done
    console.log('swipeDown');
    this.next();
}

decline() { // red button  on tap callback
    let that = this;
    this.currentSwipeLayout.animateSwipeRight().then(() => {
        that.next();
        console.log('swipeLeft done');
    });
}


like() { // blue button on tap callback
    let that = this;
    this.currentSwipeLayout.animateSwipeLeft().then(() => {
        that.next();
        console.log('swipeRight done');
    });
}

super() { // green button on tap callback
    let that = this;
    this.currentSwipeLayout.animateSwipeUp().then(() => {
        that.next();
        console.log("swipeUp done");
    });
}

}`

[bpince]

I have turned on error details for webpack and now get the following errors:

Preparing project...
Hash: 599c46246b71f0112506
Version: webpack 4.44.2
Time: 7186ms
Built at: 13/03/2021 8:39:29 am
5 assets
Entrypoint bundle = runtime.js vendor.js bundle.js
[../$$_lazy_route_resource lazy recursive] ../$$_lazy_route_resource lazy namespace object 160 bytes {bundle} [built]
[./app.css] 1.2 KiB {bundle} [built]
[./app/app-routing.module.ts] 1.25 KiB {bundle} [built]
[./app/app.component.ts] 851 bytes {bundle} [built]
[./app/app.module.ts] 1.27 KiB {bundle} [built]
[./app/home/home-routing.module.ts] 1.09 KiB {0} [built]
[./app/home/home.component.ts] 1.07 KiB {0} [built]
[./app/home/home.module.ts] 1.2 KiB {0} [built]
[./app/swipe/swipe-routing.module.ts] 1.1 KiB {1} [built]
[./app/swipe/swipe.component.ts] 7.07 KiB {1} [built]
[./app/swipe/swipe.module.ts] 1.22 KiB {1} [built]
[./main.ts] 1.4 KiB {bundle} [built]
[/package.json] external "/package.json" 42 bytes {bundle} [optional] [built]
+ 548 hidden modules

WARNING in Zone.js does not support native async/await in ES2017+.
These blocks are not intercepted by zone.js and will not triggering change detection.
See: angular/zone.js#1140 for more information.

ERROR in ./app/swipe/swipe.component.ts
Module not found: Error: Can't resolve 'nativescript-swipe-layout' in 'C:\native-script-apps\scl-v1\src\app\swipe'
resolve 'nativescript-swipe-layout' in 'C:\native-script-apps\scl-v1\src\app\swipe'
Parsed request is a module
using description file: C:\native-script-apps\scl-v1\package.json (relative path: ./src/app/swipe)
resolve as module
looking for modules in C:\native-script-apps\scl-v1\node_modules@nativescript\core
using description file: C:\native-script-apps\scl-v1\node_modules@nativescript\core\package.json (relative path: .)
using description file: C:\native-script-apps\scl-v1\node_modules@nativescript\core\package.json (relative path: ./nativescript-swipe-layout)
no extension
C:\native-script-apps\scl-v1\node_modules@nativescript\core\nativescript-swipe-layout doesn't exist
.ts
C:\native-script-apps\scl-v1\node_modules@nativescript\core\nativescript-swipe-layout.ts doesn't exist
.js
C:\native-script-apps\scl-v1\node_modules@nativescript\core\nativescript-swipe-layout.js doesn't exist
.scss
C:\native-script-apps\scl-v1\node_modules@nativescript\core\nativescript-swipe-layout.scss doesn't exist
.css
C:\native-script-apps\scl-v1\node_modules@nativescript\core\nativescript-swipe-layout.css doesn't exist
as directory
C:\native-script-apps\scl-v1\node_modules@nativescript\core\nativescript-swipe-layout doesn't exist
looking for modules in C:\native-script-apps\scl-v1\node_modules
using description file: C:\native-script-apps\scl-v1\package.json (relative path: ./node_modules)
using description file: C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\package.json (relative path: .)
no extension
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout is not a file
.ts
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout.ts doesn't exist
.js
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout.js doesn't exist
.scss
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout.scss doesn't exist
.css
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout.css doesn't exist
as directory
existing directory
use ./swipe-layout from main in package.json
using description file: C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\package.json (relative path: .)
using description file: C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\package.json (relative path: ./swipe-layout)
no extension
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\swipe-layout doesn't exist
.ts
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\swipe-layout.ts doesn't exist
.js
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\swipe-layout.js doesn't exist
.scss
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\swipe-layout.scss doesn't exist
.css
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\swipe-layout.css doesn't exist
as directory
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\swipe-layout doesn't exist
using path: C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\index
using description file: C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\package.json (relative path: ./index)
no extension
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\index doesn't exist
.ts
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\index.ts doesn't exist
.js
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\index.js doesn't exist
.scss
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\index.scss doesn't exist
.css
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\index.css doesn't exist
C:\native-script-apps\scl-v1\src\app\swipe\node_modules@nativescript\core doesn't exist or is not a directory
C:\native-script-apps\scl-v1\src\app\swipe\node_modules doesn't exist or is not a directory
C:\native-script-apps\scl-v1\src\app\node_modules@nativescript\core doesn't exist or is not a directory
C:\native-script-apps\scl-v1\src\app\node_modules doesn't exist or is not a directory
C:\native-script-apps\scl-v1\src\node_modules@nativescript\core doesn't exist or is not a directory
C:\native-script-apps\scl-v1\src\node_modules doesn't exist or is not a directory
C:\native-script-apps\node_modules@nativescript\core doesn't exist or is not a directory
C:\native-script-apps\node_modules doesn't exist or is not a directory
C:\node_modules@nativescript\core doesn't exist or is not a directory
C:\node_modules doesn't exist or is not a directory
looking for modules in C:\native-script-apps\scl-v1\node_modules
using description file: C:\native-script-apps\scl-v1\package.json (relative path: ./node_modules)
using description file: C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\package.json (relative path: .)
no extension
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout is not a file
looking for modules in C:\native-script-apps\scl-v1\node_modules@nativescript\core
using description file: C:\native-script-apps\scl-v1\node_modules@nativescript\core\package.json (relative path: .)
using description file: C:\native-script-apps\scl-v1\node_modules@nativescript\core\package.json (relative path: ./nativescript-swipe-layout)
no extension
C:\native-script-apps\scl-v1\node_modules@nativescript\core\nativescript-swipe-layout doesn't exist
.ts
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout.ts doesn't exist
.ts
C:\native-script-apps\scl-v1\node_modules@nativescript\core\nativescript-swipe-layout.ts doesn't exist
.js
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout.js doesn't exist
.js
C:\native-script-apps\scl-v1\node_modules@nativescript\core\nativescript-swipe-layout.js doesn't exist
.scss
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout.scss doesn't exist
.scss
C:\native-script-apps\scl-v1\node_modules@nativescript\core\nativescript-swipe-layout.scss doesn't exist
.css
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout.css doesn't exist
.css
C:\native-script-apps\scl-v1\node_modules@nativescript\core\nativescript-swipe-layout.css doesn't exist
as directory
C:\native-script-apps\scl-v1\node_modules@nativescript\core\nativescript-swipe-layout doesn't exist
as directory
existing directory
use ./swipe-layout from main in package.json
using description file: C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\package.json (relative path: .)
using description file: C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\package.json (relative path: ./swipe-layout)
no extension
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\swipe-layout doesn't exist
.ts
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\swipe-layout.ts doesn't exist
.js
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\swipe-layout.js doesn't exist
.scss
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\swipe-layout.scss doesn't exist
.css
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\swipe-layout.css doesn't exist
as directory
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\swipe-layout doesn't exist
using path: C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\index
using description file: C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\package.json (relative path: ./index)
no extension
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\index doesn't exist
.ts
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\index.ts doesn't exist
.js
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\index.js doesn't exist
.scss
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\index.scss doesn't exist
.css
C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\index.css doesn't exist
[C:\native-script-apps\scl-v1\node_modules@nativescript\core\nativescript-swipe-layout]
[C:\native-script-apps\scl-v1\node_modules@nativescript\core\nativescript-swipe-layout.ts]
[C:\native-script-apps\scl-v1\node_modules@nativescript\core\nativescript-swipe-layout.js]
[C:\native-script-apps\scl-v1\node_modules@nativescript\core\nativescript-swipe-layout.scss]
[C:\native-script-apps\scl-v1\node_modules@nativescript\core\nativescript-swipe-layout.css]
[C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout]
[C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout.ts]
[C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout.js]
[C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout.scss]
[C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout.css]
[C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\swipe-layout]
[C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\swipe-layout.ts]
[C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\swipe-layout.js]
[C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\swipe-layout.scss]
[C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\swipe-layout.css]
[C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\index]
[C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\index.ts]
[C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\index.js]
[C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\index.scss]
[C:\native-script-apps\scl-v1\node_modules\nativescript-swipe-layout\index.css]
[C:\native-script-apps\scl-v1\src\app\swipe\node_modules@nativescript\core]
[C:\native-script-apps\scl-v1\src\app\swipe\node_modules]
[C:\native-script-apps\scl-v1\src\app\node_modules@nativescript\core]
[C:\native-script-apps\scl-v1\src\app\node_modules]
[C:\native-script-apps\scl-v1\src\node_modules@nativescript\core]
[C:\native-script-apps\scl-v1\src\node_modules]
[C:\native-script-apps\node_modules@nativescript\core]
[C:\native-script-apps\node_modules]
[C:\node_modules@nativescript\core]
[C:\node_modules]
@ ./app/swipe/swipe.component.ts 5:0-87 31:37-48 56:35-50 57:27-39
@ ./app/swipe/swipe.module.ts
@ ./app/app-routing.module.ts
@ ./app/app.module.ts
@ ./main.ts
Executing webpack failed with exit code 2.

[bradmartin]

Looks like it didn't install...

Can you confirm in node_modules that the plugin dir is not there? If so, then maybe it didn't publish correctly to npm. I don't see your version listed so if you can confirm that you're trying the latest 2x version also. Then we can confirm the publish was prob incorrect and fix that.

[bpince]

Hi Brad,

to me it looks like the directory is there and the version is 2.0:

Sorry I am not that experienced with this, but to me it looks to be there.

Thank you

[bradmartin]

Yea, it needs to be the .js - TS is not executable and should not be published to npm. @rhanb would need to republish it looks like.

[bpince]

Thanks Brad, that makes sense, @rhanb please let me know when it has been republished. Thanks

[rhanb]

@bradmartin @bpince
I published the package under version 2.0.1 with the .js files in it
Let me know if something goes wrong

[abdullahkhalidmahmood]

@bradmartin @bpince
I published the package under version 2.0.1 with the .js files in it
Let me know if something goes wrong

I am receiving same error "Module Not found Issue with nativescript-swipe-layout" with version 2.0.0, however when i upgrade it to 2.0.1 i receive an error

npm WARN ERESOLVE overriding peer dependency npm WARN Found: @nativescript/core@undefined npm WARN node_modules/@nativescript/core npm WARN npm WARN Could not resolve dependency: npm WARN peer @nativescript/core@"^3.4.0" from [email protected] npm WARN node_modules/nativescript-swipe-layout npm WARN nativescript-swipe-layout@"^2.0.1" from the root project npm ERR! code ETARGET npm ERR! notarget No matching version found for @nativescript/core@^3.4.0. npm ERR! notarget In most cases you or one of your dependencies are requesting npm ERR! notarget a package version that doesn't exist.

i am using Nativescript Angular for my project! Any guidance is appreciated 🤗