[SOLVED] Requirejs not loading a jquery plugin

Requirejs not loading a jquery plugin

I'm working on improving the tests for jquery-csv (jquery plugin).

I can currently run a full suite of tests (ie mocha/chai) from the command line with no problems. I'm having issues figuring out how to use require.js to load dependencies so I can extend the test runner to work with mochaphantomjs tests.

The HTML used to load RequireJS:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Mocha Tests</title>
  <link rel="stylesheet" href="../node_modules/mocha/mocha.css" />
</head>
<body>
  <div id="mocha"></div>
  <script data-main="scripts/app" src="scripts/require.js"></script>
</body>
</html>

The RequireJS module:

require.config({
  baseUrl: '/',
  paths: {
    'jquery'        : '../../node_modules/jquery/dist/jquery',
    'jquery-csv'    : '../../src/jquery.csv',
    'mocha'         : '../../node_modules/mocha/mocha',
    'chai'          : '../../node_modules/chai/chai',
  },
  shim: {
    'mocha': { 
      exports: 'mocha'
    },
    'chai': {
      exports: 'chai'
    },
    'jquery-csv' : {
      deps: ['jquery'],
      exports: 'jQuery.fn.csv',
    }
  },
});

define(function(require) {
  require('jquery');
  require('jquery-csv');

  // chai setup
  var chai = require('chai');
  var expect = chai.expect();
  var should = chai.should();

  // mocha setup
  var mocha = require('mocha');
  mocha.setup('bdd');
  mocha.reporter('html');
  mocha.bail(false);

  require(['test.js'], function(require) {
    if (window.mochaPhantomJS) {
      mochaPhantomJS.run();
    }
    else {
      mocha.run();
    }
  });
});

Note: The define function is using the CommmonJS style.

The error I'm getting is:

Uncaught Error: Module name "../src/jquery.csv.js" has not been loaded yet for context: _. Use require([])

AFAIK, the shim should have fixed this issue by loading jQuery first and attaching the plugin to it.

I'm pretty new to RequireJS, is there something obvious I'm missing?

Solution

Try to add your "jquery-csv" as dependency in:

require(['test.js', 'jquery', 'jquery-csv'], function(require, $) {
    if (window.mochaPhantomJS) {
       mochaPhantomJS.run();
    }
    else {
      mocha.run();
    }
});