CODEWITHSUNDEEP
javascriptrequirejsamd
Jeremy Harris
Jeremy Harris

Reputation: 24549

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

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?

Upvotes: 2

Views: 1461

Answers (1)

Jeremy Harris
Jeremy Harris

Reputation: 24549

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.

Upvotes: 1

Related Questions