Loading non amd modules with require.js

Question

Currently I am using require.js for a fun side project I am working everything is working fine except a code syntax higlighting plugin called prism.js. I can see that the plugin is being pulled via the network tab in chrome, but the plugin isn't initializing.

I am not sure if it's a require problem or uf the plugin is the issue and was wondering if anyone could help.

Here is a look at my main.js:

require.config({
  // 3rd party script alias names
  paths: {
    // Core Libraries
    modernizr: "libs/modernizr",
    jquery: "libs/jquery",
    underscore: "libs/lodash",
    backbone: "libs/backbone",
    handlebars: "libs/handlebars",

    text: "libs/text",
    prism: "plugins/prism",

    templates: "../templates"
  },
  // Sets the configuration for your third party scripts that are not AMD compatible
  shim: {
    "backbone": {
      "deps": ["underscore", "jquery", "handlebars"],
      "exports": "Backbone"  //attaches "Backbone" to the window object
    }
  }
});

// Include Specific JavaScript
require(['prism', 'modernizr', 'jquery', 'backbone', 'routers/router', 'views/AppVIew' ],
  function(Prism, Modernizr, $, Backbone, Router, App) {
    this.router = new Router();
    this.App = new App();
  }
);

Solution 1

Change the shim section to include prism, and make sure it exports "Prism":

shim: {
  "backbone": {
      "deps": ["underscore", "jquery", "handlebars"],
      "exports": "Backbone"  //attaches "Backbone" to the window object
  },
  "prism": {
      "exports": "Prism"
  }
}

Solution 2

Handlebars and Prism are not compatible with AMD(Asyncronous Module Definition) so you need to shim it yourself like below;

requirejs.config({
    shim: {
        'backbone': {
            "deps": ["underscore", "jquery", "handlebars"],
            "exports": "Backbone"  //attaches "Backbone" to the window object
        },
        'handlebars': {
            "exports": 'Handlebars'
        },
        'prism': {
            "exports": "Prism"
        }
    }
});

You may wish to look at the require.js shim documentation site; http://requirejs.org/docs/api.html#config-shim

Hope this will help

Solution 3

Prism should be added to shim too. Just as backbone it is not AMD compliant and therefore must be declared same way.

Comments

[Lawrence]

even if the plugin has no dependencies ?

[yakxxx]

yes my bad, I assumed that by calling it a "plugin" you meant a jquery plugin and that it depedns on jquery.

[Tri Nguyen]

Once it is "shimmed", how can I use it?

[Chris Salzberg]

Just like any other module: require('prism'); or include it as a dependency in the arguments to define.

[luenib]

I'm using three.js and OrbitControls.js, were OrbitControls is a non-AMD. I tried to follow the setup suggested here but couldn't make it work. Is there something in OrbitControls that makes it require a different setup? OrbitControls uses three.js internally, but that's all I know. The error msg I'm getting is "Uncaught TypeError: THREE.OrbitControls is not a constructor." Thanks for any help you can provide.