GlobalDependecies in config.json don't work

[MarioZagreb]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• browser version
• SPFx version
• Node.js version
• etc

Describe the bug / error

I have a custom web part developed in SPfx (no javascript framework) and this is my config.json (part for externals):

"externals": {
"jquery": {
"path": "https://code.jquery.com/jquery-3.6.0.min.js",
"globalName": "jquery"
},
"sppeoplepicker": {
"path": "lib/webparts/aa/scripts/sp.peoplepicker.js",
"globalName": "sppeoplepicker",
"globalDependencies": ["jquery"]
},
"bootstrap": {
"path": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js",
"globalName": "bootstrap",
"globalDependencies": ["jquery"]
},
"appjs": {
"path": "lib/webparts/aa/scripts/app.js",
"globalName": "appjs",
"globalDependencies": ["jquery"]
},

"jqueryui": {
  "path": "lib/webparts/aa/scripts/jquery-ui.js",
  "globalName": "jqueryui",
  "globalDependencies": ["jquery"]
}

},

And everytime I open page with my webpart i get an error:
p(...).spPeoplePicker is not a function

After page refresh, it works ok.
But, sometimes you have to refresh 2 or 3 times. Sometimes it crashes after 5th refresh.
It does not wait for jQuery to load. Why?

Steps to reproduce

Include sp.peoplepicker.js in config.json file (and jquery)

"externals": {    
    "jquery": {
      "path": "https://code.jquery.com/jquery-3.6.0.min.js",
      "globalName": "jquery"
    },
    "sppeoplepicker": {
      "path": "lib/webparts/aa/scripts/sp.peoplepicker.js",
      "globalName": "sppeoplepicker",
      "globalDependencies": ["jquery"]
    },
    "bootstrap": {
      "path": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js",
      "globalName": "bootstrap",
      "globalDependencies": ["jquery"]
    },
    "appjs": {
      "path": "lib/webparts/aa/scripts/app.js",
      "globalName": "appjs",
      "globalDependencies": ["jquery"]
    },
    
    "jqueryui": {
      "path": "lib/webparts/aa/scripts/jquery-ui.js",
      "globalName": "jqueryui",
      "globalDependencies": ["jquery"]
    }
  },

define one div:

<div id='ppDefault'>

define that field as people picker:

(<any>$('#ppDefault')).spPeoplePicker({
        minSearchTriggerLength: 2,
        maximumEntitySuggestions: 10,
        principalType: 1,
        principalSource: 15,
        searchPrefix: '',
        searchSuffix: '',
        displayResultCount: 6,
        maxSelectedUsers: 1        
      });

deploy and see the error :)

Expected behavior

I would expect for sp.peoplepicker.js script to load after jquery script.

What am I doing wrong??
I am losing my mind over this for days now

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[AJIXuMuK]

@MarioZagreb - could you please check few things:

• look at Network tab of the browser to check the order of the loaded scripts
• are you seeing this issue with your browser console open or no?
• could you please add ?sw=bypass to your page and see if the error still occurs?
  Thanks!

[MarioZagreb]

Thank you for your response

This is my error in Console tab

This is order of loaded scripts in Network tab:

Issue is present on with and without browser console.

I tried adding ?sw=bypass and still the same error.

This are loaded scripts in Network tab when page loads correctly

EDIT:
Now, I notice that I have sequence of script loading in Network tab: jquery, bootstrap, sp.peoplepicker and I get error.
After refresh, I have the same sequence order, but no error. confusing...

[AJIXuMuK]

@MarioZagreb - thank you for the information.
Could you please also look at the timeline when the scripts were loaded?
Also - do you have any sample you could share for the investigation on our end?

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within the next 7 days of this comment. Please see our wiki for more information: Issue List Labels: Needs Author Feedback & Issue List: No response from the original issue author