Jspm: Error importing jQuery plugin

Question

I am trying to import a jQuery plugin (namely https://github.com/Mottie/Keyboard ) using jspm / SystemJS.

First, I installed the module by simply typing the following command:

jspm install github:mottie/keyboard 

Then I added a line to import the library into my code immediately after importing jQuery:

 import keyboard from 'mottie/keyboard'; 

However, when I ran the code, I found the following error:

 Uncaught TypeError: Multiple defines for anonymous module 

The error when starting the error did not provide me with a solution, at least not one that I could understand ... I do not know if there are several jspm gurus here who can help me? :)

Thank you very much in advance...

Answer 1

If you look at the source for jQuery.keyboard, it uses the UMD template twice in the code:

Once in https://github.com/Mottie/Keyboard/blob/master/js/jquery.keyboard.js#L31 and once https://github.com/Mottie/Keyboard/blob/master/js/jquery. keyboard.js # L2165 .

SystemJS detects the file as AMD, but it identifies itself twice, not once.

Basically, this is not a valid AMD module, so you should tell SystemJS to treat it as global.

This can be done by overriding:

 jspm install github:mottie/keyboard -o "{format: 'global'}" 

Even then, the above requires that jQuery is already loaded. To do this, we can add a jQuery pad to provide dependency.

The standard jQuery override plugin with padding is as follows:

override.json

 { "main": "js/jquery.keyboard.js", "shim": { "js/jquery.keyboard": { "deps": ["jquery"] } }, "dependencies": { "jquery": "*" } } 

We can install this with:

 jspm install github:mottie/keyboard -o override.json 

Post your redefinition in the jspm registry if that works, and then other users will also be able to take advantage.