define not working with spfx / sharepoint online

 usually when we use modern plugins you will see something like this in the top of the JS file:


!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).SOMEPLUGINNAME=e()}(this,(function(){"use strict"; //more js code


BUT you will see errors like "SOMEPLUGINNAME is not defined", "cannot find module", ect.

the reason is that MS overrides so many things and "define" as well, and i am not sure why it fails.

BUT all that code wants to find the the "Window" object as named above globalThis

So lets help him and change to 


!function(t,e){(t="undefined"!=typeof globalThis?globalThis:t||self).SOMEPLUGINNAME=e()}(this,(function(){"use strict"; //more js code


or even just !function(t,e){globalThis.SOMEPLUGINNAME=e()}

BTW for adding all those JS files in the right order:

  private addJsPromise(u:string){
    return new Promise((resolve, reject) =>{
      let myScriptTag: HTMLScriptElement = document.createElement("script");
      myScriptTag.src = this.baseU + u;
      myScriptTag.type = "text/javascript";
      myScriptTag.onload = ()=>{
        console.log("addJsPromise " + u);
        resolve(null);
      };
      document.body.appendChild(myScriptTag);
    })
  }

to be used like this

    this.addJsPromise("assets/plugins/THING.js").then(()=>
      this.addJsPromise("assets/plugins/GLING.js").then(()=>
        this.addJsPromise("assets/plugins/SHPLING.js").then(()=> {
            console.log("All MY js files loadeds by order, init my plugin")
            this.initMyPlugin();
        })
      )
    );

and "assets" is just a DocLib in my sp-site






Comments

Popular posts from this blog

OverTheWire[.com] Natas Walkthrough - JUST HINT, NO SPOILERS

SOLVED The item could not be indexed successfully because the item failed in the indexing subsystem

Asp.Net Ending Response options, Response.End() vs CompleteRequest()