Power Platform Community Forum Thread Details

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:

https://summernote.org

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?

Categories:

Power Apps Pro Dev & ISV

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.