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

Question

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 1

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(...);