tldr;
How do I import a specific JS file from an npm package?
I'm fairly new to this whole package deal but it feels hard to find a guide for my case, so I'd like to ask the pros here.
In my PCF I've been able to install and use jquery using
npm install jquery
npm install @types/jquery
and
import $ from "jquery";
So I feel like I got the basics.
A component that I'd like to use now is summernote, a WYSIWYG editor:
There's a version that uses Bootstrap, and there's a version that doesn't. I'm trying to use the one that doesn't. So first step I installed the package using
npm install summernote
This created the summernote folder inside node_modules. And inside this summernote folder there are a couple files, one of them being the one for the version with BS (summernote.js) and one without (summernote-lite.js). Both create a new jquery extension called summernote and depending on which of these two JS files is being referenced it either uses the one with BS or the one without.
How do I tell my PCF which to use? While this statement compiles it obviously does not give the desired result:
import summernote from "summernote";
What exactly does this line import and from where (as in: from which file exactly)? How do I import specifically the summernote-lite.js from the package called summernote?
Solved! Go to Solution.
This is a fairly complex subject - but to use the code that you are importing, it must be written in such a way that supports modules.
There is a good explanation here - https://javascript.info/modules-intro
Additionally, the library must also provide typescript definitions - the most common source for theses are found at https://github.com/DefinitelyTyped/DefinitelyTyped - but equally the module itself might ship with d.ts files - or you can even write your own.
When a library exports a module - it can then be packed (using webpack in the case of PCF) into the bundle.js. You might be used to using <SCRIPT> tags to use libraries - this would be an 'ambient' library and is not directly supported by PCF - that said you can inject <SCRIPT> definitions at runtime but I don't think it is technically supported to do that.
Taking a quick look at summernote - it doesn't look like it supports javascript modules - and requires an ambient declaration using <SCRIPT> tags.
I would suggest that you start by learning about javascript modules - then look at how you export and import - this will give you the necessary background to get to grips with how PCF uses external libraries when it bundles them using webpack.
This is a fairly complex subject - but to use the code that you are importing, it must be written in such a way that supports modules.
There is a good explanation here - https://javascript.info/modules-intro
Additionally, the library must also provide typescript definitions - the most common source for theses are found at https://github.com/DefinitelyTyped/DefinitelyTyped - but equally the module itself might ship with d.ts files - or you can even write your own.
When a library exports a module - it can then be packed (using webpack in the case of PCF) into the bundle.js. You might be used to using <SCRIPT> tags to use libraries - this would be an 'ambient' library and is not directly supported by PCF - that said you can inject <SCRIPT> definitions at runtime but I don't think it is technically supported to do that.
Taking a quick look at summernote - it doesn't look like it supports javascript modules - and requires an ambient declaration using <SCRIPT> tags.
I would suggest that you start by learning about javascript modules - then look at how you export and import - this will give you the necessary background to get to grips with how PCF uses external libraries when it bundles them using webpack.
This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.
Come together to explore latest innovations in code and application development—and gain insights from experts from around the world.
User | Count |
---|---|
10 | |
8 | |
5 | |
3 | |
2 |