using zuck js library in ionic 3

Question

I want to implement stories effect in ionic app by using in zuck.js library zuck.js

I install it

npm install zuck

then import it in my home component

 import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as zuck from "zuck";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

   stories = new Zuck('stories', {

    backNative:true,

    autoFullScreen:'false',

    skin:'Snapgram',

    avatars:'true',

    list:false,

    cubeEffect:'true',

    localStorage:true,

    stories: [],

    });
  constructor(public navCtrl: NavController) {

  }

but it shows me error buck Zuck with capital letter not defined

referenceError: Zuck is not defined ReferenceError: Zuck is not defined at new HomePage

I thought to change it to

import * as Zuck from "zuck";

but I get same error.

UPDATE!!! I changed the import to

import Zuck from 'zuck';

I get the error

Runtime Error Cannot find module "react"

is not possible to use zuck.js in ionic?

after declaring Zuck i want to create object and I get

Cannot read property 'id' of null TypeError: Cannot read property 'id' of null at new window.ZuckitaDaGalera.window.Zuck (http://localhost:8100/build/vendor.js:115204:23) at new HomePage

    import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import 'zuck.js/zuck.js';
declare var Zuck;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  stories = new Zuck('stories', {
    backNative: true,
    autoFullScreen: 'false',
    skin: 'Snapgram',
    avatars: 'true',
    list: false,
    cubeEffect: 'true',
    localStorage: true,
    stories: [
      {
        id: 'vision',
        photo: 'https://cnet4.cbsistatic.com/img/QJcTT2ab-sYWwOGrxJc0MXSt3UI=/2011/10/27/a66dfbb7-fdc7-11e2-8c7c-d4ae52e62bcc/android-wallpaper5_2560x1600_1.jpg',
        name: 'Tech',
        link: '',
        lastUpdated: 1492665454,
        items: [
          this.buildItem('1', 'photo', 3, 'https://pbs.twimg.com/profile_images/782474226020200448/zDo-gAo0_400x400.jpg','', '', false, 1492665454),
          this.buildItem('2', 'photo', 3, 'https://vignette4.wikia.nocookie.net/ironman/images/5/59/Robert-Downey-Jr-Tony-Stark-Iron-Man-3-Marvel-Disney.jpg/revision/latest?cb=20130611164804', '', '',false, 1492665454),
          this.buildItem('3', 'video', 0, 'https://scontent-gru2-2.cdninstagram.com/t50.2886-16/14965218_193969377722724_482497862983221248_n.mp4', 'https://scontent-gru2-2.cdninstagram.com/t51.2885-15/e15/10597412_455246124639813_1360162248_n.jpg', '', false, 1492665454),
        ],
      }],
  });

  constructor(public navCtrl: NavController) {

  }
  buildItem(id, type, length, src, preview, link, seen, time) {

    // Using object short-hand (id: id)
    return {id,type,length,src,preview,link,seen,time,
    };

    }

}

import Zuck from 'zuck'; should be the right one. The error with react is most probably related to something else. — David

David David · Accepted Answer · 2017-09-28T13:57:09

After I posted my comment I realized that you are using the wrong npm package for zuck. This npm package is something completely different and thats why you are getting the react module error. Use this one instead:

npm install zuck.js

And import it like that:

import 'zuck.js/zuck.js';
declare var Zuck;

using zuck js library in ionic 3

1 Answers