ReferenceError: define is not defined while embedding fuelux in datagrid.js

Question

I wanted to add use http://exacttarget.github.com/fuelux/ to build a datagrid. I wanted to add the library to use it. I did the following:

<link href="<spring:url value='/assets/css/fuelux.min.css' htmlEscape='true' />"      media="all" rel="stylesheet" type="text/css" />
<link href="<spring:url value='/assets/css/fuelux-responsive.min.css' htmlEscape='true' />" media="all" rel="stylesheet" type="text/css" />
<script src="<spring:url value='/assets/js/fuelux-datagrid.js' htmlEscape='true' />" type="text/javascript"></script>

I am sure that the path are correct because they work in other libraries. However, I get following error:

ReferenceError: define is not defined
[Break On This Error] 
define(['require','jquery'],function(require) {

where define(['require','jquery'],function(require) {... is code in fuelux-datagrid.js.

• What is this error?
• I think define is a keyword of require.js. Does this mean fuelux-datagrid has dependency on require.js?
• Can anybody explain me how to load the library so to make it work?

Solution 1

If you are not using RequireJS you can get around this by loading just the loader.min.js in a basic script tag:

<script src="http://fuelcdn.com/fuelux/2.3/loader.min.js"></script>

This package contains all of the JavaScript needed for Bootstrap and Fuel UX, with no external dependency on an AMD loader.

Solution 2

This worked for me:

<script src="https://raw.github.com/ExactTarget/fuelux/master/lib/require.js"></script>
<script type="text/javascript" src="https://raw.github.com/ExactTarget/fuelux/master/dist/datagrid.js"></script>

I tried what @AdamAlexander suggested and what is suggested here and didn't work. I also tried the latest requiredjs and got a nasty exception. Go figure.

Solution 3

Yes, they seem to have a dependency on RequireJS. I must agree they don't have much resources that explains how to load the library (at least from what I saw), but what I would do is load require.js and check what other resources it is trying to load afterwards, by looking at the network requests.

Here's an example on how to setup RequireJS. You can also look at their docs.

<script src="scripts/require.js"></script>
<script>
  require.config({
    baseUrl: "/another/path", //here's where it will look for scripts
    paths: {
        "some": "some/v1.0" //path to other dependencies not located in the base path
    }
  });
</script>

Comments

[Lasang]

Thanks. This worked for me too. Thanks a lot. And,answers by other too were helpful.

[Adam Alexander]

I should probably have clarified the need to load jQuery prior to doing this. Sorry to anyone who got tripped up by that!

[Corey Cole]

For what it's worth, I was able to get the linked ExactTarget instructions (e.g. just jQuery and their loader) to work. It didn't initially and I found what I was missing was an element with a class of "fuelux" in the DOM above the component I was trying to build. jsfiddle.net/LeCodeNinja/FdpVL

[RHarris]

Adam, I'm trying to use the wizard.js portion of FuelUX (non-AMD). I'm loading fuelux.min.css, jquery-2.1.0.min.js, loader.min.js and wizard.js (in that order) and still getting define is not defined. Am I missing something?

[Adam Alexander]

The loader.min.js contains all the controls, including wizard. The error you're seeing is probably being introduced by the AMD wrapper in wizard.js. You should be able to remove that file as the logic is contained in loader.min.js. Be aware, Fuel UX loading strategies will likely be changing for version 3 of the library.

[Adam Marshall]

This almost worked for me, but require.js was being returned as 'text/plain' so not running as js. I changed raw.github to rawgithub in the URL, as mentioned here: webmasters.stackexchange.com/a/51708