[Typescript 4] TypeError: Cannot read property 'toLowerCase' of undefined

[mackankowski]

Hi all,

I'm struggling with bumping up my application using new React 17 and Typescript 4 and still, one issue appears after build:

×
TypeError: Cannot read property 'toLowerCase' of undefined
AuthenticationContext.push../node_modules/react-adal/lib/adal.mod.js._adal.default._clearStaleResourceToken
node_modules/react-adal/lib/adal.mod.js:50
  47 | var _this$_extractIdToken2 = this._extractIdToken(resourceToken),
  48 |     upn = _this$_extractIdToken2.upn;
  49 | 
> 50 | if (upn.toLowerCase() !== currentUserUpn.toLowerCase()) {
     | ^  51 |   this.info("Clearing invalid cache of resource ".concat(resource));
  52 |   this.clearCacheForResource(resource);
  53 | }
View compiled
(anonymous function)
node_modules/react-adal/lib/adal.mod.js:33
  30 | 
  31 |   var resources = Object.values(this.config.endpoints);
  32 |   resources.forEach(function (r) {
> 33 |     return _this._clearStaleResourceToken(r, upn);
  34 |   });
  35 | };
  36 | /**
View compiled
AuthenticationContext.push../node_modules/react-adal/lib/adal.mod.js._adal.default.invalidateResourceTokens
node_modules/react-adal/lib/adal.mod.js:32
  29 |       upn = _this$_extractIdToken.upn;
  30 | 
  31 |   var resources = Object.values(this.config.endpoints);
> 32 |   resources.forEach(function (r) {
  33 |     return _this._clearStaleResourceToken(r, upn);
  34 |   });
  35 | };
View compiled
runWithAdal
node_modules/react-adal/lib/react-adal.js:100
   97 | authContext.handleWindowCallback(); // Clear the resource cache on new login
   98 | // https://github.com/salvoravida/react-adal/issues/68
   99 | 
> 100 | authContext.invalidateResourceTokens(); // prevent iframe double app !!!
      | ^  101 | 
  102 | if (window === window.parent) {
  103 |   if (!authContext.isCallback(window.location.hash)) {
View compiled
Module../src/index.tsx
src/index.tsx:6
  3 | 
  4 | const DO_NOT_LOGIN = true;
  5 | 
> 6 | runWithAdal(
  7 |   authContext,
  8 |   () => {
  9 |     require('./App.tsx');
View compiled
__webpack_require__
/Users/username/projectname/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled
fn
/Users/username/projectname/webpack/bootstrap:150
  147 | 		);
  148 | 		hotCurrentParents = [];
  149 | 	}
> 150 | 	return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 | 	return {
View compiled
1
http://localhost:8080/static/js/main.chunk.js:118095:18
__webpack_require__
/Users/username/projectname/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled
checkDeferredModules
/Users/username/projectname/webpack/bootstrap:45
  42 | 	}
  43 | 	if(fulfilled) {
  44 | 		deferredModules.splice(i--, 1);
> 45 | 		result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 | 	}
  47 | }
  48 | 
View compiled
Array.webpackJsonpCallback [as push]
/Users/username/projectname/webpack/bootstrap:32
  29 | 	deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 | 	// run deferred modules when all chunks ready
> 32 | 	return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 | 	var result;
View compiled
(anonymous function)
http://localhost:8080/static/js/main.chunk.js:1:83

Any ideas on that?

Best regards and Happy New Year! 🥳

Maciej

---

Update # 1

My temporary workaround but not a final solution:

---

Update # 2

A potential solution (in src/adal.mod.js) - @salvoravida, I’ll open the Merge Request soon.

[salvoravida]

0.5.2