Creating list with Columns in SPFx is failing for few columns

Question

I am creating a list with specified columns on page load (later i will change this logic to on button click). I am using SPFx framework. I have installed sp-pnp libraries. I am able to create the lists properly. I am creating two columns for each list. Out of 4 columns, 3 are creating successfully, but one is giving exception as The specified program requires a newer version of Windows. (Exception from HRESULT: 0x8007047E) Below is my code: I have tried with both createFieldAsXml and addText

private ValidateAndCreateLists() {
    let listStructure: any = [{
      "ListName": "Categories",
      "ListTemplate":"100",
      "Fields": [
        "<Field DisplayName='My PnP TextField1' Type='Text' Required='FALSE' Name='mypnpfield1' />",
        "<Field DisplayName='My PnP TextField2' Type='Text' Required='FALSE' Name='mypnpfield2'  />"
      ],
      "FieldTexts":["Test1", "Test2"]
    },
    {
      "ListName": "ABC",
      "ListTemplate":"100",
      "Fields": [
        "<Field DisplayName='My PnP TextField1' Type='Text' Required='FALSE' Name='mypnpfield1' />",
        "<Field DisplayName='My PnP TextField2' Type='Text' Required='FALSE' Name='mypnpfield2'  />"
      ],

      "FieldTexts":["Test1", "Test2"]
    }
    ];
    Promise.all(listStructure.map((elm)=>{
      return(this.CreateListInSP(elm));
    }));

  }
private CreateListInSP(element): Promise<any> {

    let spWeb = new Web(this.context.pageContext.web.absoluteUrl);
    let spListTitle = element["ListName"];
    let spListTemplate = element["ListTemplate"];
    let fieldsToCreate = element["FieldTexts"];
    return spWeb.lists.add(spListTitle, "", spListTemplate, false).then((list) => {
      return Promise.all(fieldsToCreate.map((elm)=>{
        return(this.CreateColumnsInSPList(spListTitle,elm));
      }));
      //return Promise.resolve(true);
    },()=>{
      return Promise.resolve(false);
    });
  }
  private CreateColumnsInSPList(listName,fields:string):Promise<any>{    
    let ctx = new Web(this.context.pageContext.web.absoluteUrl);   
    return (ctx.lists.getByTitle(listName).fields.addText(fields).then(()=>{
      return Promise.resolve();
    }));

  }

Answer 1

It looks like you are working in SharePoint Framework - have a look at this article - you can set the context once and save yourself having to create the Web instances each time. I've included the relevant code below:

import pnp from "sp-pnp-js";

// ...

public onInit(): Promise<void> {

  return super.onInit().then(_ => {

    pnp.setup({
      spfxContext: this.context
    });

  });
}

I wasn't able to recreate this error, but I cleaned up your code a bit (I also converted it to just functions to make things easier to test locally). I removed some of the extra returns and made some changes so it would run in node easily. I also updated the fields creation to use batching to make it more efficient, especially if you try and add more than a few fields. I've pasted that full code below, please give it a try and see if any of those changes help you.

import pnp, {
    Web,
    ListAddResult,
    List,
} from "sp-pnp-js";

declare var process: { exit: (code?: number) => void; };

export function Example() {

    ValidateAndCreateLists().then(_ => {

        console.log("Success");
        process.exit(0);

    }).catch(e => {

        console.error(e);
        process.exit(1);
    });
}

function ValidateAndCreateLists() {

    // You might consider creating interfaces for this 
    // structure if you plan to use it a lot.
    const listStructure: any = [
        {
            "ListName": "Categories1",
            "ListTemplate": "100",
            "Fields": [
                "<Field DisplayName='My PnP TextField1' Type='Text' Required='FALSE' Name='mypnpfield1' />",
                "<Field DisplayName='My PnP TextField2' Type='Text' Required='FALSE' Name='mypnpfield2'  />"
            ],
            "FieldTexts": ["Test1", "Test2"],
        },
        {
            "ListName": "ABC1",
            "ListTemplate": "100",
            "Fields": [
                "<Field DisplayName='My PnP TextField1' Type='Text' Required='FALSE' Name='mypnpfield1' />",
                "<Field DisplayName='My PnP TextField2' Type='Text' Required='FALSE' Name='mypnpfield2'  />"
            ],

            "FieldTexts": ["Test1", "Test2"],
        },
    ];

    return Promise.all(listStructure.map((elm) => {
        return CreateListInSP(elm);
    }));
}

function CreateListInSP(element): Promise<any> {

    // changed to literal url string
    const spWeb = new Web(this.context.pageContext.web.absoluteUrl);
    const spListTitle = element["ListName"];
    const spListTemplate = element["ListTemplate"];
    const fieldsToCreate: string[] = element["FieldTexts"];

    return spWeb.lists.add(spListTitle, "", spListTemplate, false).then((list: ListAddResult) => {

        // add all the fields in a single batch call
        const batch = spWeb.createBatch();

        for (let i = 0; i < fieldsToCreate.length; i++) {
            // add each addText call to the batch
            list.list.fields.inBatch(batch).addText(fieldsToCreate[i]);
        }

        // execute the batch
        return batch.execute();
    });
}

• Is that error coming back from the server or something on the client machine?
• Does it happen if you change the list titles or fields names?
• Can you share details about the client and server environment, SharePoint version?

Let me know, we'll so our best to help you out. Thanks for your interest in using the library! If you aren't please join our bi-weekly calls where we discuss upcoming SPFx details and general client side dev topics.

-- Patrick