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?

user1791567 · Accepted Answer · 2013-03-31 15:08:45Z

12

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.

answered Mar 31, 2013 at 15:08

user1791567

1,4281 gold badge17 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lasang Over a year ago

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

Corey Cole Over a year ago

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

Adam Marshall Over a year ago

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

Adam Alexander · Accepted Answer · 2013-03-29 16:34:10Z

10

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.

answered Mar 29, 2013 at 16:34

Adam Alexander

15.2k5 gold badges45 silver badges41 bronze badges

3 Comments

Adam Alexander Over a year ago

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

RHarris Over a year ago

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 Over a year ago

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.

plalx · Accepted Answer · 2013-03-29 13:44:03Z

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>

edited Mar 29, 2013 at 13:44

answered Mar 29, 2013 at 13:18

plalx

43.8k7 gold badges77 silver badges94 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related