$(…).pushpin is not a function - reactJs, Materializecss

Question

I've made up the page with jquery and materializecss. All js worked well in it. But as soon as I've transferred it to reactJs components, one of js scripts stopped work.

Here the component. As you can see, there is another js initialization right above, from the same materialize.min.js, and it works perfectly. Why the second one doesn't?

    var React = require('react');

var CharSpy = React.createClass({
    componentDidMount: function() {
    // this one works well
    $('.scrollspy').scrollSpy();
    // this one doesn't work
    $('.tabs-wrapper').pushpin({ offset: 65 });
    },
    render: function() {
        return (
        <div className="tabs-wrapper">
            <ul className="section table-of-contents">
          <li><a href="#user"><span className="hide-on-small-only">Профиль</span></a></li>
          <li><a href="#abilities"><span className="hide-on-small-only">Способности</span></a></li>
          <li><a href="#activity"><span className="hide-on-small-only">Статистика</span></a></li>
          <li><a href="#skillmap"><span className="hide-on-small-only">Карта</span></a></li>
          <li><a href="#comments"><span className="hide-on-small-only">Комментарии</span></a></li>
        </ul>
        </div>
        );
    }

});

module.exports = CharSpy;

The error:

Uncaught TypeError: $(...).pushpin is not a function
React.createClass.componentDidMount @ main.js:22993
assign.notifyAll @ main.js:3920O
N_DOM_READY_QUEUEING.close @ main.js:17089
Mixin.closeAll @ main.js:19861
Mixin.perform @ main.js:19802
batchedMountComponentIntoNode @ main.js:15144
Mixin.perform @ main.js:19788
ReactDefaultBatchingStrategy.batchedUpdates @ main.js:12271
batchedUpdates @ main.js:18015
ReactMount._renderNewRootComponent @ main.js:15279
ReactPerf.measure.wrapper @ main.js:16518
ReactMount.render @ main.js:15368
ReactPerf.measure.wrapper @ main.js:16518
(anonymous function) @ main.js:23680
React.createClass.statics.run.dispatchHandler @ main.js:1852(
anonymous function) @ main.js:1820(
anonymous function) @ main.js:874(a
nonymous function) @ main.js:874Tr
ansition.to @ main.js:877(a
nonymous function) @ main.js:1819T
ransition.from @ main.js:856di
spatch @ main.js:1816r
efresh @ main.js:1867r
un @ main.js:1863r
unRouter @ main.js:25552
25../components/app @ main.js:23679
s @ main.js:1e @ 
main.js:1(ano
nymous function)

Answer 1

The issue has to do with document ready being called inside of the actual plugin. If you're using react then you're probably using something like browserify or webpack. In react, you're making the call to pushpin in the componentDidMount function, but pushpin hasn't defined itself.

Basically what you're doing is:

• Defining jquery (document ready is now fired if you're using require(jquery) syntax)
• Defining pushpin

Inside pushpin, it listens to document ready, which has already fired, so it never defines itself.

You can get it to work by removing two lines inside of the pushpin plugin, line two which is just:

  $(document).ready(function() {

And way down on line 61, remove the closing brackets:

});

Now when you require the pushpin library (or something else that requires it for you like materializecss), the pushpin function will be defined immediately, and won't throw an error about the function not being defined.