# How to install npm packages in custom themes/plugins
**URL:** https://meta.discourse.org/t/how-to-install-npm-packages-in-custom-themes-plugins/142695
**Category:** Development
**Created:** [February 26, 2020, 5:01pm UTC](https://meta.discourse.org/t/how-to-install-npm-packages-in-custom-themes-plugins/142695 "2020-02-26T17:01:23Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@eatcodetravel](https://meta.discourse.org/u/eatcodetravel)
#### Post date: [February 26, 2020, 5:01pm UTC](https://meta.discourse.org/t/how-to-install-npm-packages-in-custom-themes-plugins/142695/1 "2020-02-26T17:01:23Z")
Hello!
Is it possible to install npm packages (via `package.json` or similar) in Discourse Themes/Plugins? We are looking to reuse some components across apps and this can be a blocker if it’s not possible.
Thanks!
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [February 26, 2020, 5:25pm UTC](https://meta.discourse.org/t/how-to-install-npm-packages-in-custom-themes-plugins/142695/2 "2020-02-26T17:25:00Z")
You could sorta do what we do in core, which is, add npm packages via `package.json` and then copy JS files to a theme folder (like `javascripts/discourse/lib/` for example) but you can’t import the packages from `node_modules` directly, I don’t think that would work.
---
### Author:  [@duranmla](https://meta.discourse.org/u/duranmla)
#### Post date: [May 18, 2020, 6:38am UTC](https://meta.discourse.org/t/how-to-install-npm-packages-in-custom-themes-plugins/142695/4 "2020-05-18T06:38:29Z")
> [@pmusaraj](#):
>
> package
Assuming we have a plain Javascript code _(Like something we can include and run to support a custom web component)_ [like this one](https://unpkg.com/@debtcollective/dc-popup-component@0.0.1/dist/popup-component/popup-component.js) how I can run it with your approach? When I copy and paste it into `discourse/lib` within my theme it doesn’t work.
I assume it doesn’t work because the code is “not being called at the right time?” like is not being called when the page is loaded and within the browser environment.
Furthermore, to give context to everyone If I try to use the [https://unpkg.com/](https://unpkg.com/) and include it into the header I get an error like:
---
### Author:  [@duranmla](https://meta.discourse.org/u/duranmla)
#### Post date: [May 18, 2020, 6:53am UTC](https://meta.discourse.org/t/how-to-install-npm-packages-in-custom-themes-plugins/142695/5 "2020-05-18T06:53:17Z")
After reply to the comment and convey the information in a single idea I get rid of the error by following [DISCOURSE\_CDN\_URL causes content security policy violations?](https://meta.discourse.org/t/discourse-cdn-url-causes-content-security-policy-violations/140935)
> Turning off `content_security_policy` setting
I still figure out why the script doesn’t work as I have another error but maybe so far can be useful for someone else.
FYI, the error I am having is this one:
But the script has loaded 🤷♂️
---
### Author:  [@duranmla](https://meta.discourse.org/u/duranmla)
#### Post date: [May 18, 2020, 7:41am UTC](https://meta.discourse.org/t/how-to-install-npm-packages-in-custom-themes-plugins/142695/6 "2020-05-18T07:41:29Z")
Finally, for someone within the same quest. I make it work by:
1. Turning off `content_security_policy` setting
2. Explicitly adding the script programatically (not using `$.getScript` not using other approach).
A example summary snippet of what works for me is _(replace web-component for what makes sense in your case)_:
```js
import { withPluginApi } from "discourse/lib/plugin-api";
let flag = false;
export default {
name: "web-component",
initialize() {
withPluginApi("0.8", api => {
api.onAppEvent("page:changed", () => {
if (flag) return;
addScript(
"https://unpkg.com/web-component@0.0.1/dist/web-component/web-component.js",
{ defer: "", crossorigin: "anonymous" }
);
addWebComponent(
"web-component",
{
id: "web-component"
},
`Hello world`
);
flag = true;
});
});
}
};
function addWebComponent(tag, attrs, content) {
var component = document.createElement(tag);
Object.keys(attrs).forEach(key => {
component.setAttribute(key, attrs[key]);
});
component.textContent = content;
document.body.appendChild(component);
}
function addScript(src, attrs) {
var script = document.createElement("script");
script.setAttribute("src", src);
Object.keys(attrs).forEach(key => {
script.setAttribute(key, attrs[key]);
});
document.body.appendChild(script);
}
```
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [May 20, 2020, 1:46am UTC](https://meta.discourse.org/t/how-to-install-npm-packages-in-custom-themes-plugins/142695/7 "2020-05-20T01:46:36Z")
The better way to do this is to whitelist that specific URL either in the `content securty policy script src` site setting or in your theme component, see [Mitigate XSS Attacks with Content Security Policy](https://meta.discourse.org/t/mitigate-xss-attacks-with-content-security-policy/104243) for more details.
And also, you can `import loadScript from "discourse/lib/load-script";` and then use that to load an external script (instead of defining your own addScript injector).
---
### Author:  [@MattiaB](https://meta.discourse.org/u/MattiaB)
#### Post date: [November 11, 2023, 5:01pm UTC](https://meta.discourse.org/t/how-to-install-npm-packages-in-custom-themes-plugins/142695/8 "2023-11-11T17:01:54Z")
Sorry for necroing this thread but it’s the most relevant one I could find.
I am trying to add [this package](https://github.com/radixdlt/radix-dapp-toolkit) in a plugin. I would like to import it using `import { RadixDappToolkit, RadixNetwork } from '@radixdlt/radix-dapp-toolkit'`
It’s also avaliable on Yarn which I think is what Discourse use, but I don’t think I can just add it as a dependency..can I?
I’m not sure I can just load it using unpkg either since it has lots of dependencies. What options do I have? Any pointers are appreciated.
Sorry for the broad question, but I’m very confused. Thank you!