Uncaught Error: Cannot find module 'jquery' when adding var editor = require('dataTables.editor')

willeboordse

I have the following simple react file (based on one of the examples) which works well as long as I don't uncomment the line var editor = require('dataTables.editor'). I've been trying to figure this one out all day and would appreciate any help.

var $ = require('jquery');
var Bootstrap = require('bootstrap');
var React = require('react/addons');
var table = require('jquery.dataTables');
var tableresponsive = require('dataTables.responsive');
var dt_bootstrap = require('dataTables.bootstrap');
var dt_buttons = require('dataTables.buttons');
//var editor = require('dataTables.editor')      // <= when I uncomment this line, I get the error.

var dataSet = [
    ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
    ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"],
    ["Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000"],
    ["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060"],
    ["Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700"],
    ["Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000"],
    ["Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500"],
    ["Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900"],
    ["Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500"]
];

var DealsTable = React.createClass({
    componentDidMount: function () {
        //editor = $.fn.dataTable.Editor({});
        $('#example').DataTable({
            data: dataSet,
            columns: [
                { title: "Name" },
                { title: "Position" },
                { title: "Office" },
                { title: "Extn." },
                { title: "Start date" },
                { title: "Salary" }
            ]
        }).columns.adjust().responsive.recalc();
    },
    render: function () {
        return (
          <div className="table-responsive">
            <table id="example" className="display responsive nowrap" cellPadding="0" cellSpacing="0" border="0"></table>
          </div>
        );
    }
})
React.render(<DealsTable />, document.body);

My package.JSON file is:

{
  "name": "react-router-bootstrap-seed",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Igor Okulist",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^3.3.5",
    "dataTables.editor": "^1.4.0",
    "datatables": "^1.10.8",
    "express": "^4.13.3",
    "flux": "^2.0.3",
    "flux-react": "^2.6.6",
    "jquery": "^2.1.4",
    "mssql": "^2.1.7",
    "object-assign": "^3.0.0",
    "react": "^0.12.2",
    "react-bootstrap": "^0.16.0",
    "react-router": "^0.12.4",
    "react-router-bootstrap": "^0.9.1",
    "redis": "^0.12.1",
    "socket.io": "^1.3.6",
    "socket.io-client": "^1.3.6",
    "socket.io-redis": "^0.1.4",
    "tedious": "^1.12.1"
  },
  "devDependencies": {
    "babelify": "^6.1.3",
    "browserify": "^11.0.0",
    "browserify-shim": "^3.8.10",
    "deamdify": "^0.1.1",
    "del": "^1.2.0",
    "glob": "^5.0.14",
    "gulp": "^3.8.11",
    "gulp-babel": "^4.0.0",
    "gulp-browserify": "^0.5.1",
    "gulp-clean": "^0.3.1",
    "gulp-concat": "^2.5.2",
    "gulp-cssmin": "^0.1.7",
    "gulp-if": "^1.2.5",
    "gulp-jasmine2-phantomjs": "^0.2.0",
    "gulp-livereload": "^3.8.0",
    "gulp-notify": "^2.2.0",
    "gulp-reactify": "^1.1.0",
    "gulp-server-livereload": "^1.2.0",
    "gulp-shell": "^0.4.2",
    "gulp-streamify": "0.0.5",
    "gulp-uglify": "^1.2.0",
    "gulp-uglifyjs": "^0.6.0",
    "gulp-util": "^3.0.6",
    "lodash": "^3.10.1",
    "lodash._createassigner": "^3.1.1",
    "phantomjs": "^1.9.17",
    "tiny-lr": "^0.1.6",
    "vinyl-source-stream": "^1.1.0",
    "watchify": "^3.3.0"
  },
  "browser": {
    "react": "./src/vendors/js/react-with-addons.js",
    "react/addons": "./src/vendors/js/react-with-addons.js",
    "jquery": "./src/vendors/js/jquery.js",
    "bootstrap": "./src/vendors/js/bootstrap.js",
    "jquery.dataTables": "./src/vendors/js/jquery.dataTables.js",
    "dataTables.responsive": "./src/vendors/js/dataTables.responsive.js",
    "dataTables.bootstrap": "./src/vendors/js/dataTables.bootstrap.js",
    "dataTables.buttons": "./src/vendors/js/dataTables.buttons.js",
    "dataTables.editor": "./src/vendors/js/dataTables.editor.js"
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browserify-shim": {
    "jquery": {
      "exports": "$"
    }
  }
}

allan

Hi,

Sorry for the long delay in getting back to you on this. Did you ever get to the bottom of it?

I'm not immediately sure from the above why you would get the error you are seeing, however it might be related to the fact that Editor uses:

factory( require( 'jquery' ), require( 'datatables' ) );

The fact that you have require('jquery.dataTables') might be what is upsetting it - although it seems like a slightly unusual error.

Allan

willeboordse

Hi Allen,

Many thanks! I will give that a try. In the mean time, I ended up using bootstrap modals which worked out quite alright for what I'm doing. DataTables is great though - your efforts are greatly appreciated!

Frederick