Import package without npm

%3CLINGO-SUB%20id%3D%22lingo-sub-85726%22%20slang%3D%22en-US%22%3EImport%20package%20without%20npm%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-85726%22%20slang%3D%22en-US%22%3E%3CP%3EI'm%20sure%20that%20there's%20a%20simple%20answer%20to%20this%2C%20but%20how%20do%20I%20import%20a%20JavaScript%20package%20that%20does%20not%20exist%20in%20npm%3F%20%26nbsp%3BI've%20found%20one%20I'd%20like%20to%20try%20out%20but%20there's%20no%20npm%20listing%20for%20it.%20%26nbsp%3BJust%20typing%20an%20import%20statement%20and%20providing%20the%20path%20(I%20tried%20both%20relative%20and%20full)%20doesn't%20seem%20to%20do%20the%20trick.%20%26nbsp%3BThanks.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-86102%22%20slang%3D%22en-US%22%3ERe%3A%20Import%20package%20without%20npm%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-86102%22%20slang%3D%22en-US%22%3E%3CP%3EI%20have%20made%20an%20executive%20decision%20and%20decided%20to%20close%20this%20issue.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%26nbsp%3Bdid%20some%20poking%20around%2C%20experimenting%20with%20different%20approaches%2C%20and%20tried%20a%20couple%20of%20different%20things.%20%26nbsp%3BMy%20bigger%20problem%20actually%20turns%20out%20to%20be%20friction%20between%20Typescript%20the%20way%20the%20code%20is%20written%20in%20the%20.JS%20files%20I%20am%20trying%20to%20use.%20%26nbsp%3BIt%20turns%20out%20that%20the%20.JS%20is%20*very*%20JavaScript%2C%20and%20the%20Typescript%20transpiler%20doesn't%20like%20it%20AT%20ALL.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESince%20%22all%20JavaScript%20is%20actually%20Typescript%22%20I%20tried%20importing%20the%20files%20directly%20in%20my%20project%20and%20referencing%20them%20in%20the%20HTML%20in%20my%20SPFx%20web%20part.%20%26nbsp%3BThat%20didn't%20work.%20%26nbsp%3BThen%20I%20got%20the%20wild%20idea%20to%20just%20change%20the%20file%20extension%20to%20.TS%20and%20to%20import%20them%20directly%20from%20the%20project%20folder.%20%26nbsp%3BTHAT%20was%20interesting%20because%20although%20it%20did%20not%20work%2C%20I%20got%20a%20better%20idea%20of%20WHY%20it%20did%20not%20work.%20%26nbsp%3BThere%20were%20several%20hundred%20errors%20reported%20when%20I%20did%20the%20gulp%20serve.%20My%20take%20away%20was%20that%20it%20would%20require%20a%20conversion%20from%20the%20old%20.JS%20to%20a%20%22real%22%20.TS%20file%2C%20and%20I%20just%20don't%20have%20time%20for%20that.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20result%20of%20all%20this%20is%20a%20decision%20on%20my%20part%20to%20avoid%20trying%20to%20make%20this%20library%20work%20with%20the%20SPFx%20at%20this%20time.%20%26nbsp%3BThe%20library%20is%20still%20usable%20with%20the%20old%20Content%20Editor%20Web%20Part%20trick%20(although%20that%20requires%20that%20the%20tenant%20have%20scripting%20enabled%20on%20the%20site%20where%20I%20will%20be%20using%20it).%20%26nbsp%3BI%20will%20just%20have%20to%20wait%20to%20see%20if%20the%20author%20decides%20to%20port%20his%20product%20to%20Typescript%20to%20work%20with%20the%20SPFx.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%20for%20your%20help.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-85852%22%20slang%3D%22en-US%22%3ERe%3A%20Import%20package%20without%20npm%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-85852%22%20slang%3D%22en-US%22%3E%3CP%3EIt%20depends.%20On%20where%20you%20deploy..%3C%2FP%3E%3CP%3Eyou%20could%20refer%20to%20a%20js%20somewhere%20on%20the%20internet%20that%20is%20just%20like%20referencing%20in%20a%20normal%20page.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Contributor

I'm sure that there's a simple answer to this, but how do I import a JavaScript package that does not exist in npm?  I've found one I'd like to try out but there's no npm listing for it.  Just typing an import statement and providing the path (I tried both relative and full) doesn't seem to do the trick.  Thanks.

2 Replies
Highlighted

It depends. On where you deploy..

you could refer to a js somewhere on the internet that is just like referencing in a normal page.

Highlighted

I have made an executive decision and decided to close this issue.

 

I did some poking around, experimenting with different approaches, and tried a couple of different things.  My bigger problem actually turns out to be friction between Typescript the way the code is written in the .JS files I am trying to use.  It turns out that the .JS is *very* JavaScript, and the Typescript transpiler doesn't like it AT ALL.

 

Since "all JavaScript is actually Typescript" I tried importing the files directly in my project and referencing them in the HTML in my SPFx web part.  That didn't work.  Then I got the wild idea to just change the file extension to .TS and to import them directly from the project folder.  THAT was interesting because although it did not work, I got a better idea of WHY it did not work.  There were several hundred errors reported when I did the gulp serve. My take away was that it would require a conversion from the old .JS to a "real" .TS file, and I just don't have time for that.

 

The result of all this is a decision on my part to avoid trying to make this library work with the SPFx at this time.  The library is still usable with the old Content Editor Web Part trick (although that requires that the tenant have scripting enabled on the site where I will be using it).  I will just have to wait to see if the author decides to port his product to Typescript to work with the SPFx.

 

Thanks for your help.