Merhawi Fissehaye Merhawi Fissehaye - 5 months ago 50
jQuery Question

jQuery is not defined error while creating a meteor wrapper package for a jQuery library

I am trying to create a meteor wrapper package for formBuilder.

Package.describe({
summary: "jQuery Form Builder by kevinchappell. Repackaged for Meteor.",
version: "0.1.0",
name: "mycompany:jquery-formbuilder",
git: ""
});

Package.onUse( function( api ) {
api.versionsFrom( 'METEOR@1.2.1' );
api.use( [ 'jquery', 'ecmascript', 'fourseven:scss' ] );

api.addFiles([

// Form Builder Files
"lib/formBuilder/src/sass/base/_animation.scss",
"lib/formBuilder/src/sass/base/_bs.scss",
"lib/formBuilder/src/sass/base/_font.scss",
"lib/formBuilder/src/sass/base/_mixins.scss",
"lib/formBuilder/src/sass/base/_variables.scss",
"lib/formBuilder/src/sass/_controls.scss",
"lib/formBuilder/src/sass/_kc-toggle.scss",
"lib/formBuilder/src/sass/_stage.scss",
"lib/formBuilder/src/sass/form-builder.scss",

"lib/formBuilder/src/js/htmlentities.js",
"lib/formBuilder/src/js/helpers.js",
"lib/formBuilder/src/js/events.js",
"lib/formBuilder/src/js/kc-toggle.js",
"lib/formBuilder/src/js/form-builder.js",
"lib/formBuilder/src/js/to-xml.js",
"lib/formBuilder/src/js/polyfills.js",

// Fonts
"lib/formBuilder/src/fonts/fontello/css/animation.css",
"lib/formBuilder/src/fonts/fontello/css/form-builder-font.css",

// Form Render Files
"lib/formBuilder/src/js/form-render.js",

"lib/formBuilder/src/sass/form-render.scss"
]);

api.addAssets([

"lib/formBuilder/src/fonts/fontello/font/form-builder-font.eot",
"lib/formBuilder/src/fonts/fontello/font/form-builder-font.svg",
"lib/formBuilder/src/fonts/fontello/font/form-builder-font.ttf",
"lib/formBuilder/src/fonts/fontello/font/form-builder-font.woff",
"lib/formBuilder/src/fonts/fontello/font/form-builder-font.woff2"

], 'client');

});

Package.onTest( function( api ) {
api.use(['tinytest', 'test-helpers'], ['client', 'server']);
api.use('jquery', 'client');
api.use('mycompany:jquery-formbuilder');
api.addFiles('mycompany:jquery-formbuilder-tests.js');
});


But I keep getting error:
jQuery is not defined
The library tries to use
jQuery
at several places. I tried replacing those
jQuery
references with
$
. But still I get the error
$ is not defined


I again tried adding an export statement
api.export( '$', 'client' )
But the problem still exists.

What is the right way to wrap jquery libraries?

Answer

I see a fundamental flaw in your code. The jQuery library is supposed to be used on client side code and since you have not specified this in api.addFiles(..., ['client', 'server']), this will end up being a compilation error. Your api.addFiles(...) not being explicit adds the files to run on both the server and client and ends up in "jquery module not defined". I also highly recommend separately adding your styling files and js files and be explicit on your api.addFiles() to avoid this kind of compilation errors. I would refactor your code as follows:

Package.onUse( function( api ) {
api.versionsFrom( 'METEOR@1.2.1' );
api.use( [ 'jquery', 'ecmascript', 'fourseven:scss' ] );



api.addFiles([
    "lib/formBuilder/src/js/htmlentities.js",
    "lib/formBuilder/src/js/helpers.js",
    "lib/formBuilder/src/js/events.js",
    "lib/formBuilder/src/js/kc-toggle.js",
    "lib/formBuilder/src/js/form-builder.js",
    "lib/formBuilder/src/js/to-xml.js",
    "lib/formBuilder/src/js/polyfills.js"

    // Form Render Files
    "lib/formBuilder/src/js/form-render.js"
], 'client');

api.addAssets([
    // Form Builder Files
    "lib/formBuilder/src/sass/base/_animation.scss",
    "lib/formBuilder/src/sass/base/_bs.scss",
    "lib/formBuilder/src/sass/base/_font.scss",
    "lib/formBuilder/src/sass/base/_mixins.scss",
    "lib/formBuilder/src/sass/base/_variables.scss",
    "lib/formBuilder/src/sass/_controls.scss",
    "lib/formBuilder/src/sass/_kc-toggle.scss",
    "lib/formBuilder/src/sass/_stage.scss",
    "lib/formBuilder/src/sass/form-builder.scss",

    // Fonts
    "lib/formBuilder/src/fonts/fontello/css/animation.css",
    "lib/formBuilder/src/fonts/fontello/css/form-builder-font.css",
    "lib/formBuilder/src/sass/form-render.scss"
], 'server');

api.addAssets([

    "lib/formBuilder/src/fonts/fontello/font/form-builder-font.eot",
    "lib/formBuilder/src/fonts/fontello/font/form-builder-font.svg",
    "lib/formBuilder/src/fonts/fontello/font/form-builder-font.ttf",
    "lib/formBuilder/src/fonts/fontello/font/form-builder-font.woff",
    "lib/formBuilder/src/fonts/fontello/font/form-builder-font.woff2"

], 'client');

Always remember to be explicit on your api.addFiles(...);