Loading jQuery with plugins in React component and scrolling through a list

I've tested this issue on every search engine and IRC room I could think of, and also tried to figure out what's going on with the module loading code in jQuery and the plugin I want to use (DataTables). There are several links here and here that explain how this is supposed to work, but there are no examples and I cannot get it.

Here's the code on the top / bottom of the jQuery-DataTables plugin:

(/** @lends <global> */function( window, document, undefined ) {

(function( factory ) {
    "use strict";

    if ( typeof define === 'function' && define.amd ) {
        // Define as an AMD module if possible
        define( 'datatables', ['jquery'], factory );
    else if ( typeof exports === 'object' ) {
        // Node/CommonJS
        module.exports = factory( require( 'jquery' ) );
    else if ( jQuery && !jQuery.fn.dataTable ) {
        // Define using browser globals otherwise
        // Prevent multiple instantiations if the script is loaded twice
        factory( jQuery );
(/** @lends <global> */function( $ ) {

    // plugin code...

    return $.fn.dataTable;

}(window, document));


And in my React component:

var React = require('react');
var $ = require('jquery');
var dataTable = require('datatables');
var Table = React.createClass({
  componentDidMount () {
    var node = React.findDOMNode(this);
    var table = $(node).DataTable({
    console.log(table); // to see what the table is
  render () {
    return (
        <table className="table">
module.exports = Table;


I also tried this in a different way:

var table = $.fn.dataTable.Api(node)


which doesn't work either. The first way gets me Uncaught TypeError: Cannot read property 'nTable' of null

, and the second just gets me undefined


There are also a bunch of SO questions about similar situations (not enough reputation to post more links, sorry), but no one has answered yet with a working example. Can anyone explain what the module loader code does so that we can figure out how to get this working, or better yet, a working example?



source to share

1 answer

The module loader code identifies the module in the UMD name, which means generic module definition. This is a way to expose a module that is modular system agnostic. The code checks if it is used in CommonJS, AMD or globals and intercepts the one you are using.

I can't tell what is going on here, but I can see what you require jquery/dist/jquery

, whereas the plugin just requires jquery

. This means that you will get two different versions of jQuery in your package, and the plugin is registered with jQuery, which you are not using. You should just require jquery

, as the plugin does, and then execute the thumbnail in your package as a build step.



All Articles