bower install keyboard and then grunt build cause "keyboard is not a funtion" error

[yangyili]

when I bower install keyboard, it creates jquery.keyboard.min.js; I use requirejs in my project; then I execute "grunt build " minify project; the "jquery.keyboard.min.js" file was concat the require main.js file, and the main.js was minified too. I guess the error was caused by jquery.keyboard.min.js was repeat minifyed
how I get the jquery.keyboard.js by bower install keyboard?
thank you very much!
the error: "typeError: $(...).keyboard is not a function"; when I call keyboard function on jquery object

[yangyili]

I tried minify the jquery.keyboard.js, the error still exist! I don't know what else reason cause the error

[Mottie]

Hi @yangyili!

I can update the bower.json file to include the non-minified version. I don't use bower, nor do I work with requirejs, so I can not provide a definitive answer for you.

But, I wonder if the problem might be with how the files are being included. Are you only including the jquery.keyboard.min.js file? I'm not 100% sure how to make the extensions "require" the keyboard and jQuery.

[yangyili]

Thank you for your answer very much！
I have fixed the problem! it's not because the minified files; tthe problem was cuased by requirejs.
I found the following code(in your jquery.keyboard.js) [1]:

;function(factory) {
    if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else if (typeof module === 'object' && typeof module.exports === 'object') {
        module.exports = factory(require('jquery'));
    } else {
        factory(jQuery);
    }
}(jquery-keyboard-function)

was minified in your jquery.keyboard.min.js as follow [2]:

!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof   module&&"object"==typeof module.exports?module.exports=a(require("jquery")):a(jQuery)}(jquery-keyboard-function)

but was minified in my project file as follow [3]:

function(e){typeof define=="function"&&define.amd?define("jquery-keyboard",["jquery"],e):typeof  module=="object"&&typeof module.exports=="object"?module.exports=e(require("jquery")):e(jQuery)}(jquery-keyboard-function)

Then I found in when run "define("jquery-keyboard",["jquery"],e) "code, it calls the "define" function of require.js, and finally it doesn't call "jquery-keyboard-function"; so "$.fn.keyboard" was not defiend

So for the moment I have to fix the problem by deleting the[1]code;and run "jquery-keyboard-function" with "jQuery" param immediatelly!

[Mottie]

I'm glad you solved the problem!

Do you know of a way to change the UMD wrapper so this problem doesn't happen in the future? I would appreciate a PR 😁.

[PekkaPLeppanen]

Had the same problem. This fixed it:

;(function (root, factory) {
    if(typeof define === 'function' && define.amd) {
        define(['jquery'], function(jquery){
            return (root.myModule = factory(jquery));
        });
    } else if(typeof module === 'object' && module.exports) {
        module.exports = (root.myModule = factory(require('jquery')));
    } else {
        root.myModule = factory(root.jQuery);
    }
}(this, function($) {
    /*
     * NOTHING CHANGED IN THE MODULE CODE ITSELF
     */
}));

Got the code from this article

I have tested this only with CommonJS (Browserify) environment. I can do PR for further testing or just grab the code from here.

[Mottie]

Hi @PekkaPLeppanen!

I'm glad to hear it! But I would prefer not to name myModule inside the wrapper because the keyboard is actually attached to jQuery as $.keyboard, and not naming it inside the wrapper would allow you to define a variable as any name. Maybe that is my ignorance showing since I haven't really used module loaders, so please correct me if I'm wrong.

Anyway, I would apprecaite it if you would please try this UMD example and let me know if it works for you. If it does, a PR would be greatly appreciated. 😁

[yangyili]

I found what caused the problem is requirejs shim configuration：
The shim config only sets up code relationships. To load modules that are part of or use shim config, a normal require/define call is needed. Setting shim by itself does not trigger code to load
(reference: http://requirejs.org/docs/api.html)
so I use require function to load jquery.keyboard.js to resolve the code not loaded

[tobiasvandriessel]

Hi, sorry to respond to this message so late, but if you modify in any extension at the beginning the third line (2nd line here)

	if ( typeof define === 'function' && define.amd ) {
		define( [ 'jquery'], factory );

to

	if ( typeof define === 'function' && define.amd ) {
		define( [ 'jquery', 'jqueryKeyboard' ], factory );

, the RequireJS user won't have the issue that the extensions fail to load with the error that "$.keyboard" is undefined. The user does need to have jqueryKeyboard (or another name) defined in their requirejs.config's paths, but that's a small change :p

For me this fixed a long standing issue :D

Oh and of course the same would go for the CommonJS case, so (I am not sure about this, but)

) {
		module.exports = factory( require( 'jquery' ) );

to

) {
		module.exports = factory( require( 'jquery' ), require('jqueryKeyboard') );

I don't know whether you agree about the second change, but the first one would make me happy :)

[Mottie]

I would have done this long ago, but I wasn't sure how to include an unnamed plugin as required in a UMD wrapper... so, how did you come up with "jqueryKeyboard"? Is it just the file name removing the periods, "min" and "js"?

I would greatly appreciate a pull request, so I don't muck-up any changes.

[tobiasvandriessel]

I understand completely, the name is indeed user-chosen, so this was just my naming, it can be anything you like. The user simply has to assign the correct file to the name you choose to 'require' there.

I can do a pull request and then you can choose what name you want to use? :p

[Mottie]

Is is possible to make it generic? I don't want to force my choice on to someone else... and there might be other plugins or libraries named "keyboard" since it is such a generic name.

[tobiasvandriessel]

I don't know whether you can make it generic, but I don't think so, you could go for Mottie-Virtual-Keyboard?

[Mottie]

I seem to recall seeing someone use a path, but I never tried it. Is this possible?

if ( typeof define === 'function' && define.amd )
	define( [ 'jquery', 'dist/js/jquery.keyboard.min.js' ], factory );