1

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 usingnpm module versions

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.