My React component "should" render some HTML, and then apply a jQuery plugin to it.

import React from 'react'; import $ from 'jquery'; import 'owl.carousel'; class Slider extends React.Component { componentDidMount() { this.$slider = $(this.sliderContainer); this.$slider.owlCarousel(); } render() { const images = this.props.images; return ( <div id="owl-slide" className="owl-carousel" ref={el => this.sliderContainer = el}> {images.map((img, index) => ( <div key={index} className="item"> <img alt="pic" src={img} /> </div> ))} </div> ); }; export default Slider;

But instead, right at the moment of importing the plugin, I get:

TypeError: Cannot read property 'fn' of undefined

  1709 | * @todo Navigation plugin `next` and `prev` 1710 | * @public 1711 | */ > 1712 | $.fn.owlCarousel = function(option) { 1713 | var args = Array.prototype.slice.call(arguments, 1); 1714 | 1715 | return this.each(function() {

inside componentDidMount $ .fn is defined. Tell me, how in principle should this work?

  • Is it 2 different files? if so, is jquery connected in the place where it is called? if you replace import $ with import jQuery for example, what has changed? - Ilya Paymushkin
  • This is a single file and error output. - Aleksandr Shemetillo
  • you get a named function. And $ .fn.owlCarousel is the name of the function? - Ilya Paymushkin
  • Not. As far as I understand the jquery device, fn is the $ method, which connects the third-party plugin as a new $ method. The specified string is the place where the plug-in code is just trying to do it, but does not find $, despite the fact that it is imported. The essence of my question is precisely in the fact that I do not know what I was wrong with when importing $, if this happens. Here about the way to create $ plugins: habrahabr.ru/post/158235 - Aleksandr Shemetillo
  • owlCarousel is this your custom function? - Ilya Paymushkin

0