cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Softwareschmid
Frequent Visitor

node_modules usage?

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?

1 ACCEPTED SOLUTION

Accepted Solutions

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.

View solution in original post

1 REPLY 1

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.

View solution in original post

Helpful resources

Announcements
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

M365 768x460.jpg

Microsoft 365 Collaboration Conference | December 7–9, 2021

Join us, in-person, December 7–9 in Las Vegas, for the largest gathering of the Microsoft community in the world.

Users online (2,410)