So, you have a couple of SPFX solutions and they all share some code. You’d like to put that code together, build a library and make those SPFX solutions consume it. SPFX 1.9.1 now officially includes library components and that’s exactly what it’s for!

I’ll walk you through a basic example where I build a library that gets some information from the current SharePoint site using @pnp/sp. Then another solution, a webpart, that doesn’t have any reference to pnp and just consumes the function that the library exposes. Let’s get started!

To start with, ensure you have the latest version of the sharepoint generator:

Once you have installed version 1.9.1, just go ahead and create a new SPFX solution.

• when it asks you to skip tenant deployment, say yes
• when it asks you to create an isolated webpart, say no
• and when it asks you for the type of component, here you’ll see the new option, library

You’ll have created your first SPFX library. Check the manifest file, you’ll see the component type:

Let’s focus on creating our reusable class/method. In this case, I just took the default library that the generator created for me, added a reference to @pnp/sp and created a method that retrieves the web title:

Our library is now ready to use. Let’s focus on the consumer webpart. Start by adding a reference to your library:

You can get your library name and version from your library package.json file:

Go ahead and import the library in your code:

Ups! If you compile, you’ll get an error. It can’t find your library:

What’s going on here is that npm doesn’t know about your library, you need to link it. So, go to your library and run npm link:

Now go to the consumer webpart and link it to the library, by typing npm link and the library name:

Now your import statement will be recognized as valid. So, go ahead and consume the library from within your webpart. In my case, I’m just showing the web title to the end user:

Now, both your library and webparts are ready. You have these options:

• Debug your webparts using the workbench. In this case, just bundle them and gulp serve. Note: ensure both components are using a different local server port, otherwise, only one will run successfully. Compare both serve.json files.
• Debug your webparts by adding them to any page. In this case, package them and upload them to the app catalog. Same as in the previous scenario, ensure gulp serve is running for both on different ports
• Or just package them with ship and upload them to the catalog.

In any case, there you go:

If you’re running your webpart and library in debug mode, you’re able to debug both of them:

If you shipped your code, you can see the request to library file to the app catalog (or the CDN):

Hope you find it useful!