$ (...). pushpin is not a function - reactJs, Materializecss
I have compiled a page with jquery and materializecss. All js worked well. But as soon as I passed it to the responseJs components, one of the js scripts stopped working.
Here's the component. As you can see there is another js initialization right above, from the same materialize.min.js and it works great. Why doesn't the second one?
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;
Mistake:
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)
source to share
The problem stems from the fact that the document is ready to be called inside a real plugin. If you are using react, you are probably using something like a browser or webpack. In response, you call a call in the componentDidMount function, but pushpin has not defined itself.
Basically what you do:
- Jquery definition (ready document is now running if you use require (jquery) syntax)
- Definition of pushpin
Inside the pushpin, it listens for a finished document that has already been launched, so it never defines itself.
You can make it work by removing the two lines inside the pushpin plugin, line 2, which is just:
$(document).ready(function() {
Going down line 61, remove the closing brackets:
});
Now when you need the pushpin library (or whatever that requires it for you, like materializecss), the pushpin function will be defined immediately and will not throw an undefined function error.
source to share