Category
Expected or Desired Behavior
Loading our custom AMD script module using SPComponentLoader should work like a charm. This was the case until yesterday.
Observed Behavior
We're CDN-hosting our own AMD script modules (bundled with WebPack) but since yesterday, the result of loading these modules through SPComponentLoader.loadScript(moduleUrl, {globalExportsName: 'module_XYZ'}) fails.
The result of the load is an empty object, but it should be a class which we can then use to create instances through a constructor.
We've verified that the module files are successfully loaded by the browser.
Steps to Reproduce
- Upload the following (simplified) bundle.js to the Documents library (this is the AMD output of webpack):
define("module_xyx",[],(function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(){console.log("Hello World")}}])}));
public onInit(): Promise<void> {
return super.onInit().then(_ => {
SPComponentLoader.loadScript(
'https://[TENANT][SITE]/Shared%20Documents/bundle.js',
{
globalExportsName: 'module_xyz',
}
)
.then(result => console.log('result', result))
.catch(ex => console.warn('ex', ex));
});
}
- Put the web part on a page and check the console. In my case, it renders:
... but in this example, I expect a function instead of an empty object.
Note: This is a simplified example. In our case we actually export a class with methods and a constructor. The result is the same: an empty object.
Note 2: The following example does work, but the jQuery module has been built using a different module definition:
SPComponentLoader.loadScript('https://code.jquery.com/jquery-2.1.1.min.js', {
globalExportsName: 'jQuery',
}).then(($: any) => {
console.log('$', $);
});
What Else?
We've moved to SPFx 1.10 and noticed the following in the release notes:
We are moving towards using require.js for the loader, rather than system.js. This is already the loader used for extensions running in the list app. There shouldn't be a change for you. The next version of SPFx will use the require.js loader for the local workbench. The online workbench will migrate to require.js over the next month or two, but we will have a query string override to help diagnose any issues with new code.
Could it have anything to do with that?
Category
Expected or Desired Behavior
Loading our custom AMD script module using SPComponentLoader should work like a charm. This was the case until yesterday.
Observed Behavior
We're CDN-hosting our own AMD script modules (bundled with WebPack) but since yesterday, the result of loading these modules through
SPComponentLoader.loadScript(moduleUrl, {globalExportsName: 'module_XYZ'})fails.The result of the load is an empty object, but it should be a class which we can then use to create instances through a constructor.
We've verified that the module files are successfully loaded by the browser.
Steps to Reproduce
define("module_xyx",[],(function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(){console.log("Hello World")}}])}));Create an SPFx web part (version 1.10)
Add this onInit:
... but in this example, I expect a function instead of an empty object.
Note: This is a simplified example. In our case we actually export a class with methods and a constructor. The result is the same: an empty object.
Note 2: The following example does work, but the jQuery module has been built using a different module definition:
What Else?
We've moved to SPFx 1.10 and noticed the following in the release notes:
Could it have anything to do with that?