How do I fix the following error: "Cannot read property 'init' of undefined"?

Question

I am running Meteor release [email protected]

I recently installed a social media share package via Atmosphere.

meteor add ellisonleao:sharerjs.

More information about the package can also be found at: http://www.ellison.rocks/sharer.js/

My template event handler looks like this:

Template.detail.events({

"click .sharer": function() {
//add new buttons with share behaviour

$('.postedImagesWell').append(<button class="sharer button" data-sharer="facebook" data-url="https://ellisonleao.github.io/sharer.js/">Share on Facebook</button>);                                             
window.Sharer.init();
    }
});

Find below the template in code:

<template name="detail">

<div class="postedImagesWell">
<img class = "img-responsive img-rounded postedImages" id = "trial" src="{{this.photo.url}}" alt="thumbnail" >

</template>

when I run click on the Share on Facebook link. I see this error message in my browser:

Uncaught TypeError: Cannot read property 'init' of undefined

Any help on how to resolve the issue would be great!

Thanks in advance

Answer 1

You should try the other repo listed on the atmosphere page of this lib: https://github.com/okmttdhr/sharer.npm.js

Also, I don't think you need to append the share button with jquery. Just add the button to your template, and on the click listener, instead of calling window.Sharer, you add the event parameter to the listener function then instantiate a new sharer, like this:

import Sharer from 'sharer.npm.js';
// ...

Template.detail.events({

  "click .sharer": function(event) {
     const sharer = new Sharer(event.target);
     sharer.share();
  }
});