SPFx: Failed to load path dependency from component

Question

I am trying to create a SPFx webpart and use a jQuery plugin. Below are the steps I followed.

1. Created a SPFx solution using yo
2. Installed jQuery through NPM
3. Installed jQuery.payment (plugin) through NPM

4. Updated them as external dependencies

     "externals": {
     "jquery":{
         "path":"node_modules/jquery/dist/jquery.min.js",
         "globalName":"jquery"
     },
     "jquery.payment":{
       "path":"node_modules/jquery.payment/lib/jquery.payment.min.js",
       "globalName":"jquery",
       "globalDependencies":["jquery"]
     }
   

5. Used the following import statement in my webpart file

   import * as $ from 'jquery';    import 'jquery.payment';
   

6. Tired to call the plugin method

   $("input.cardBox").payment('formatCardNumber');
   

7. Run gulp serve

8. Open in local workbench (Works as expected)

9. Open in SharePoint workbench (https:///_layouts/15/workbench.aspx). Throws the following error

Error: ***Failed to load path dependency "0d6d6e17-e715-4f63-8e52-f3e5b69c8089" from component "DemoWebPart" (Error loading https://component-id.invalid/0d6d6e17-e715-4f63-8e52-f3e5b69c8089_0.0.1/jquery.payment Evaluating https://localhost:4321/node_modules/jquery.payment/lib/jquery.payment.min.js jquery is not defined). Original error: {3}

I have followed this thread from github https://github.com/SharePoint/sp-dev-docs/issues/336, where the issues was on local workbench. However, this is not working for me on SharePoint workbench and working fine on my local workbench.

Following are the npm module versions I am using

Answer 1

I saw that the global variable where jQuery is stored is 'jQuery' and not 'jquery' (notice the capitalization). When trying to access 'jquery' in the browser console I get the same error.

Just change the globalName to "jQuery" and it should work properly.