thinkpixellab / PxLoader

PxLoader is a simple JavasScript library for creating preloaders and resource downloaders for HTML5 apps.
http://thinkpixellab.com/pxloader
1.11k stars 173 forks source link

RequireJS issue v1.1.0 #51

Open genericandy opened 8 years ago

genericandy commented 8 years ago

Starting with v1.1.0 of PxLoader, I am now getting the following error when including it in my code.

require.js:168 Uncaught Error: Script error for "pxloader", needed by: app/Sounds, utils/resizer

Neither of the scripts listed use PxLoader in anyway, so I am a little confused by the error.

I have a path set to point to pxloader's folder in my requirejs config.

paths: { jquery: '../bower_components/jquery/dist/jquery.min', greensock: '../bower_components/greensock/src/minified', pxloader: '../bower_components/PxLoader/dist' },

And in the file that produces the error....

if (typeof define === 'function' && define.amd) { define( [ 'jquery', 'pxloader/pxloader-all' ], function () {...

PxLoader 1.0.2 and backwards work ok. This error is new to 1.1.0.

Anyone suggestions of how to resolve it would be appreciated.

joelfillmore commented 8 years ago

@robinnorth - any ideas? It seems like the new export should work with this RequireJS syntax.

robinnorth commented 8 years ago

@genericandy Now that all the PxLoader plugins have a UMD wrapper which defines an AMD module (or a CommonJS module or a browser global, depending on the environment they're used in), you'll need to define the path to PxLoader and its plugins in your RequireJS config separately. The pxloader-all.js file concatenates PxLoader and all its plugins together, which means that it can't be used with an AMD or CommonJS script loader, as you can only export one module per file.

So, instead, use this RequireJS config:

require.config( {
    paths : {
        pxloader: '../bower_components/PxLoader/PxLoader',
        pxloaderimage:  '../bower_components/PxLoader/PxLoaderImage'
    }
} );

...and then require your dependencies like so:

define( [ 'pxloader', 'pxloaderimage' ], function( PxLoader, PxLoaderImage ) {
    // Use PxLoader and PxLoaderImage as usual
} );

Hope this helps!