0

I am have installed jQuery using NPM. Now I am adding this into my externals section as:

"externals": {
    "jQuery": {
      "path": "/node_modules/jquery/dist/jquery.min.js",
      "globalName": "jQuery1"
    }
}

Now I have installed unitegallery for carousel and other beautiful controls. I have installed unitegallery through NPM. I have added the dependency as below:

"externals": {
    "jQuery": {
        "path": "/node_modules/jquery/dist/jquery.min.js",
        "globalName": "jQuery1"
    },
    "UniteGallery": {
        "path": "/src/webparts/carouselControl/unitegallery.min.js",
        "globalName": "UniteGallery",
        "globalDependencies": ["jQuery"]    
    }
}

When I load them in my .ts file as require('jQuery') and require('UniteGallery'), it is gives an error as

Resource "jQuery" not found in loader configuration of manifest for component

. I am really vexed to find solution. All blogs are saying this is the only way to do. But why it is giving error to me? What I am doing wrong here?

gmuraleekrishna
  • 3,375
  • 1
  • 27
  • 45
Mihir
  • 8,696
  • 18
  • 56
  • 87

1 Answers1

1

With earlier version of Visual Studio code I was faced this issue. Not with latest one. Old solution is working fine now. But what I am doing from then on wards, instead of referring locally I am using CDN reference. First I am searching for winodw['jQuery'] object, if the object is undefined then I am loading jQuery with SPComponentLoader function. Below is sample code:

if(typeof(window['jQuery'])=='undefined'){
        SPComponentLoader.loadScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js').then(($:any)=>{
            this.jQuery=$;
            this.initSearch();
        });
      }
      else{
        this.jQuery = window['jQuery'];
        this.initSearch();
      }
Mihir
  • 8,696
  • 18
  • 56
  • 87
  • Am using vscode of version 1.22.2. And also referencing the libraries from cloud only. So, what i mean is that am using url https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js instead of referencing it from local. Can i know the reason, why that way is not working? – ateet Apr 30 '18 at 10:50
  • I am not sure, but yeah ajax google api wasn't loaded for me once. I prefer CDN js. Try this it may work – Mihir Apr 30 '18 at 15:48
  • I even tried that too but it doesn't work either :-( – ateet May 01 '18 at 04:29
  • Can you post those few lines here? – Mihir May 02 '18 at 10:54