RequireJS not loading module before use its variables

Question

I'm getting an undefined error from a new library I just plugged in to requireJS. I know the undefined error is related with the 'wNumb' module not loading before is used. If I load 'wNumb' module in config.js like this: require(['main', 'wNumb']); everything works.

// conifg.js
require.config({
  paths: {
    'main': 'main',
    'socketio': './libs/socket.io/socket.io',
    'plotly': './libs/plotly/plotly-latest.min',
    'renderDataToPlotly': './scripts/renderDataToPlotly',
    'noUISlider': './libs/noUiSlider.8.5.1/nouislider.min',
    'wNumb': './libs/wnumb-1.0.2/wNumb',
    'sliders': './scripts/sliders',
    'makePlotlyWindowResponsive': './scripts/makePlotlyWindowResponsive'
  }
});

require(['main']);

// main.js
define([
  'socketio',
  'sliders', //---------------------------------------------> NOTE: sliders.js loading here
  'makePlotlyWindowResponsive',
  'renderDataToPlotly'
  ],
  function(io, sliders, makePlotlyWindowResponsive, renderDataToPlotly) {
    //
  }
);

// sliders.js
define(['noUISlider', 'wNumb'], function(noUISlider, wNumb) {
  console.log(wNumb); // ---------------------------------------------------> undefined
});

Question: Why is this happening? Should not 'wNumb'have been loaded by the time console.log(wNumb); executes?

Thank you

are you sure the wNumb module define something ? Maybe it has been loaded but it exports nothing — Olivier Boissé
– Olivier Boissé, Commented Aug 8, 2016 at 13:39
Pretty sure. If 'wNumb' exported nothing, placing it in config.js inside the require(['main', 'wNumb']); would not make a difference, but it does in deed. — thorstorm
– thorstorm, Commented Aug 8, 2016 at 13:48
I found out what was wrong @oliv37. I will post the answer. Thanks for your time — thorstorm
– thorstorm, Commented Aug 8, 2016 at 14:33
I think you should use shim as one of the requirejs benefits is to not use the window global variable — Olivier Boissé
– Olivier Boissé, Commented Aug 8, 2016 at 15:04

Louis · Accepted Answer · 2016-08-08 16:13:14Z

1

Indeed, when you have trouble with a library you are using with RequireJS, you should check how it exports itself. The documentation will sometimes tell you what it is compatible with. Otherwise, you have to read the source code. To use wNumb 1.0.2 with RequireJS have have it behave mostly like a proper AMD module you must use a shim:

shim: {
    wNumb: {
        exports: "wNumb",
    },
}

This will give to the module the value of the global variable wNumb (which is the same as window.wNumb). This is how you get libraries that don't know anything about AMD but export themselves in the global space to work with RequireJS.

However, if you can upgrade wNumb to 1.0.4 that would be better because this version has introduced the proper code to make wNumb a proper AMD module: it calls define when it detects that there is an AMD loader available. You don't need a shim then.

answered Aug 8, 2016 at 16:13

Louis

152k28 gold badges288 silver badges332 bronze badges

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

1 Comment

thorstorm Over a year ago

I went for changing the wNumbcode myself introducing the code you pointed out. It's good to know what exports inside shimactually does. Thanks @Louis

thorstorm · Accepted Answer · 2016-08-08 14:55:45Z

0

I found out what was going on inside the 'wNumb' module. I read 'wNumb' code and saw at the end of the file this:

Apparently, 'wNumb' was being exported to the window object. When I use window.wNumb (1, on the image) inside sliders.js, it returns the expected function (2, on the image). As a proof:

answered Aug 8, 2016 at 14:55

thorstorm

1533 silver badges10 bronze badges

Collectives™ on Stack Overflow

RequireJS not loading module before use its variables

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related