How can "define" not be defined when loading with RequireJS?

Question

I'm struggling to understand why a module loaded with RequireJS does not have access to the define function.

In my HTML:

<script data-main="/assets/js/app/main.js" src="/assets/libs/require.js/2.1.9/require.js" type="text/javascript"></script>

In main.js:

// Initialize Require.js
require.config({
   baseUrl: 'http://test.dev/cart/assets',
   paths: {
      jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min'
   }
});

// Main app logic
require( ['jquery', 
          'js/app/cart', 
          'js/app/wizard',
          'js/lib/colorbox', 
          'js/lib/jvfloat'], function ($, Cart, Wizard, ColorBox, jvfloat) {

    // Initialize Cart
    Cart.init();

    // Initialize Wizard
    Wizard.init();
}

);

In that, colorbox.js loads just fine and is wrapped like:

define(['jquery'], function ( jQuery ) {
     // ...Colorbox code here
});

When it tries to load jvfloat.js, it throws:

Uncaught ReferenceError: define is not defined

Even though it is wrapped with the exact same wrapper as colorbox.

I even tried adding a shim (not that it makes sense to) to see if I can force the load...but that didn't work either:

shim: {
   'jvfloat': {
      deps: ['require','jquery'],
      exports: 'jvfloat'
   }
}

I've also tried removing the define wrapper, and setting my shim like this which is how the documentation suggests to do it:

shim: {
    'jvfloat': {
        deps: ['jquery'],
        exports: 'jQuery.fn.jvfloat'
    }
}

TL;DR; What can cause a library being loaded by RequireJS to not have access to the the define function?

If jvfloat is wrapped the same way that colorbox is, why are you using shim? shim is for modules that aren't wrapped with define. — Mike Edwards
– Mike Edwards, Commented Nov 15, 2013 at 16:53
I said I even tried using a shim. I understand its purpose. jvFloat is a jQuery plugin and so, to make sure it has it's dependency, I'm trying to get it to work with RequireJS and also to make sure the plugin gets added to the same instance of jQuery that RequireJS passes around. — Jeremy Harris
– Jeremy Harris, Commented Nov 15, 2013 at 16:56
I guess I focused on the code block and missed the short description above. My mistake... This does seem like very strange behavior, define is in the global scope and should be visible everywhere it isn't shadowed. — Mike Edwards
– Mike Edwards, Commented Nov 15, 2013 at 17:17

Jeremy Harris · Accepted Answer · 2013-11-15 17:12:42Z

1

Ok I figured out a workaround using the shim part of the RequireJS config. What I had tried before used jvfloat as the array key, when I was supposed to use the full thing. So this works:

require.config({
  baseUrl: 'http://test.dev/cart/assets',
  paths: {
     jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min'
  },
  shim: {
     'js/lib/jvfloat': {
        deps: ['jquery'],
        exports: 'jQuery.fn.jvfloat'
     }
  }
});

Still have no idea how to use define for something like this but, oh well, this counts as a solution and may help somebody else in the future.

answered Nov 15, 2013 at 17:12

Jeremy Harris

24.7k13 gold badges84 silver badges133 bronze badges

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

Collectives™ on Stack Overflow

How can "define" not be defined when loading with RequireJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related