LWR SPA - how to add additional JS modules for consume

Question

LWR -> Lightning Web Runtime developer.salesforce.com/docs/platform/lwr/guide/lwr-intro.html

I'll try to provide a clear project structure and questions. While learning LWR, I've started a new LWR project and chose a Single Page App for the project type

This gives a starting project structure like the following:

src
- modules / example
- - app
- - - app.css
- - - app.js
- - - app.html
lwr.config.json
package.json

My question is what is the correct way to include other npm packages or modules for consumption in my project? Do I need to add new module references to my lwr.config.json?

I've tried including some directly in my app.js but learned that is not the way with project type of module.

Thanks in advance for taking a look, I know LWR is still new so looking to learn where I can. I appreciate it!

Answer 1

There's a demo of this in lwc-recipes-oss.

First, you just install d3:

npm install d3 --save

Then you can import it in your JS file:

import { LightningElement } from 'lwc';
import * as d3 from 'd3';
...

You can clone the repo and follow the instructions in the README.md file to see d3 in action, as well as seeing it in action in the LWC OSS documentation.