Search code examples
javascripttypescriptpromisespfx

TypeScript/SPFx Promises throws Exception("Cannot read property 'then' of undefined") but seems to work

I try to create an SPFx Webpart. Before I can create a new Item, I need to call 0-4 times _ensureUser, depending if any combination of Client, AssignedTo, ResolvedBy and Referrer has been set. When all required _ensureUser calls are done, then the new Item can be created.

The code runs when debugging on the hosted workbench, but throws an exception when I call userPromises[0].then( (value: {}) => { ... or Promise.all(userPromises).then( (value: {}[]) => { ... . When I click F5/continue, the rest is executed and the new item is created. _ensureUser worked when I called it directly and chained it with then's, without putting it in the userPromises array first.

I think the problem is, that _ensureUser doesn't return a Promise. If so, how would I do that? Should I restructure _ensureUser and/or createItem? Do I need to call bind somewhere?

The createItem function:

public createItem( logItem: IInteractionLogItem): Promise<IInteractionLogItem[]> {
  const userPromises: Promise<{}>[] = [];

  if(logItem.Client && logItem.Client.AccountName){
    userPromises.push(this._ensureUser(logItem.Client));
  }

  if(logItem.AssignedTo && logItem.AssignedTo.AccountName){
    userPromises.push(this._ensureUser(logItem.AssignedTo));
  }

  if(logItem.ResolvedBy && logItem.ResolvedBy.AccountName){
    userPromises.push(this._ensureUser(logItem.ResolvedBy));
  }

  if(logItem.Referrer && logItem.Referrer.AccountName){
    userPromises.push(this._ensureUser(logItem.Referrer));
  }

  console.log("SharePointDataProvider.CreateItem: userPromises.length=" + userPromises.length);

  if( userPromises.length == 0) {
      const batch: SPHttpClientBatch = this.webPartContext.spHttpClient.beginBatch();

      const batchPromises: Promise<{}>[] = [
        this._createItem(batch, logItem),
        this._getItemsBatched(batch)
      ];

      return this._resolveBatch(batch, batchPromises);
  } else if( userPromises.length == 1) {
    userPromises[0].then( (value: {}) => {
      const batch: SPHttpClientBatch = this.webPartContext.spHttpClient.beginBatch();

      const batchPromises: Promise<{}>[] = [
        this._createItem(batch, logItem),
        this._getItemsBatched(batch)
      ];

      return this._resolveBatch(batch, batchPromises);
    });
  } else {
    Promise.all(userPromises).then( (value: {}[]) => {
      const batch: SPHttpClientBatch = this.webPartContext.spHttpClient.beginBatch();

      const batchPromises: Promise<{}>[] = [
        this._createItem(batch, logItem),
        this._getItemsBatched(batch)
      ];

      return this._resolveBatch(batch, batchPromises);
    });
  }
}

The _ensureUser function:

private _ensureUser( user: IInteractionLogPerson): Promise<ISPUser> {
  console.log("SharePointDataProvider.EnsureUser( \"" + user.AccountName + "\" )");
  var data = {logonName: user.AccountName};

  return this._webPartContext.spHttpClient.post(
    this._ensureUserUrl, 
    SPHttpClient.configurations.v1,
    { body: JSON.stringify(data) } ).then(
      (value: SPHttpClientResponse) => {
        console.log("SharePointDataProvider.EnsureUser Got Http Response:\"" + value.statusText + "\"" );
        return value.json();
      },
      (error: any) => console.log("SharePointDataProvider.EnsureUser Rejected: " + error )
    ).then((spUser: ISPUser) => {
      console.log("SharePointDataProvider.EnsureUser Set Id:" + spUser.Id +" LoginName:\"" + spUser.LoginName + "\"" );
      user.Id = spUser.Id;
      return spUser;
    });
}

The Debug output for 1 _ensureUser call:

SharePointDataProvider.EnsureUser( "i:0#.f|membership|[email protected]" )
SharePointDataProvider.CreateItem: userPromises.length=1
TypeError: Cannot read property 'then' of undefined
    at ILoggerContainer._createInteractionLogItem (d:\spfx\iLogger-webpart\dist\i-logger.bundle.js:22103:60)
    at ILoggerForm._handleAddButtonClick (d:\spfx\iLogger-webpart\dist\i-logger.bundle.js:23173:21)
    at Object.r (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-06-30.017/sp-webpart-workbench-assembly_en-us_f3fed222daad2a0117a4c168deed7705.js:174:75541)
    at a (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-06-30.017/sp-webpart-workbench-assembly_en-us_f3fed222daad2a0117a4c168deed7705.js:174:30260)
    at Object.s [as executeDispatchesInOrder] (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-06-30.017/sp-webpart-workbench-assembly_en-us_f3fed222daad2a0117a4c168deed7705.js:174:30475)
    at f (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-06-30.017/sp-webpart-workbench-assembly_en-us_f3fed222daad2a0117a4c168deed7705.js:174:26933)
    at m (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-06-30.017/sp-webpart-workbench-assembly_en-us_f3fed222daad2a0117a4c168deed7705.js:174:27059)
    at Array.forEach (<anonymous>)
    at r (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-06-30.017/sp-webpart-workbench-assembly_en-us_f3fed222daad2a0117a4c168deed7705.js:174:112499)
    at Object.processEventQueue (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-06-30.017/sp-webpart-workbench-assembly_en-us_f3fed222daad2a0117a4c168deed7705.js:174:28121)
SharePointDataProvider.EnsureUser Got Http Response:"OK"
SharePointDataProvider.EnsureUser Set Id:13 LoginName:"i:0#.f|membership|[email protected]"

The Debug output for 2 _ensureUser calls:

SharePointDataProvider.EnsureUser( "i:0#.f|membership|[email protected]" )
SharePointDataProvider.EnsureUser( "i:0#.f|membership|[email protected]" )
SharePointDataProvider.CreateItem: userPromises.length=2
TypeError: Cannot read property 'then' of undefined
    at ILoggerContainer._createInteractionLogItem (d:\spfx\iLogger-webpart\dist\i-logger.bundle.js:22103:60)
    at ILoggerForm._handleAddButtonClick (d:\spfx\iLogger-webpart\dist\i-logger.bundle.js:23173:21)
    at Object.r (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-06-30.017/sp-webpart-workbench-assembly_en-us_f3fed222daad2a0117a4c168deed7705.js:174:75541)
    at a (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-06-30.017/sp-webpart-workbench-assembly_en-us_f3fed222daad2a0117a4c168deed7705.js:174:30260)
    at Object.s [as executeDispatchesInOrder] (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-06-30.017/sp-webpart-workbench-assembly_en-us_f3fed222daad2a0117a4c168deed7705.js:174:30475)
    at f (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-06-30.017/sp-webpart-workbench-assembly_en-us_f3fed222daad2a0117a4c168deed7705.js:174:26933)
    at m (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-06-30.017/sp-webpart-workbench-assembly_en-us_f3fed222daad2a0117a4c168deed7705.js:174:27059)
    at Array.forEach (<anonymous>)
    at r (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-06-30.017/sp-webpart-workbench-assembly_en-us_f3fed222daad2a0117a4c168deed7705.js:174:112499)
    at Object.processEventQueue (https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-06-30.017/sp-webpart-workbench-assembly_en-us_f3fed222daad2a0117a4c168deed7705.js:174:28121)
SharePointDataProvider.EnsureUser Got Http Response:"OK"
SharePointDataProvider.EnsureUser Set Id:10 LoginName:"i:0#.f|membership|[email protected]"
SharePointDataProvider.EnsureUser Got Http Response:"OK"
SharePointDataProvider.EnsureUser Set Id:13 LoginName:"i:0#.f|membership|[email protected]"
Solution

  • I needed to add a return before calling userPromises[0].then( (value: {}) => { ... or Promise.all(userPromises).then( (value: {}[]) => { .... The code works now with the following modification:

    return userPromises[0].then( (value: {}) => {

    and

    return Promise.all(userPromises).then( (value: {}[]) => {