# Importing JS from node packages

**URL:** https://discourse.gohugo.io/t/importing-js-from-node-packages/23545
**Category:** support
**Created:** [February 19, 2020, 8:49pm UTC](https://discourse.gohugo.io/t/importing-js-from-node-packages/23545 "2020-02-19T20:49:13Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![bradbice](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bradbice/32/14162_2.png) [@bradbice](https://discourse.gohugo.io/u/bradbice)
#### Post date: [February 19, 2020, 8:49pm UTC](https://discourse.gohugo.io/t/importing-js-from-node-packages/23545/1 "2020-02-19T20:49:13Z")

</div>

Is there a good way to import JS from a Node package on build? I typically do this with Gulp now, but would like to automate it so that I don’t forget when building the site with the `hugo` command.

---

<div class="post-metadata">

### Author: ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)
#### Post date: [February 19, 2020, 9:12pm UTC](https://discourse.gohugo.io/t/importing-js-from-node-packages/23545/2 "2020-02-19T21:12:31Z")

</div>

> [@bradbice](#):
>
> Is there a good way to import JS from a Node package on build?

ug not a big fan of huge “npm installs” so I have spent a fair amount of time pondering on that question.

If you dependency and bundling requirements are simple (which I guess is a good goal to have), you can get far by wrapping your dependencies in Hugo Components, ref. an experiment I did last week:

> <https://github.com/bep/hugo-bulma-hero/blob/fec0fa94fa52e56baa87f714aa781830888d835c/go.mod#L9>

Once these libs are mounted into your project (either directly or via a module path (see above)) they are managed by Hugo’s package manager, which is what NPM is dreaming to be when it grows up.

Once all of this matures I have some plans to create some “Hugo maintained” packages for what we/I consider useful libraries for Hugo.

We could imagine Hugo doing some NPM interaction in the future, but at the moment, for it to work with Hugo modules, you either need to mount the distribution on the library’s GitHub repo or maybe have your own GitHub repo with a `node_modules` and mount that into your project, as in [https://github.com/bep/hugo-jslibs/blob/master/alpinejs/config.toml](https://github.com/bep/hugo-jslibs/blob/master/alpinejs/config.toml)

---

<div class="post-metadata">

### Author: ![bradbice](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bradbice/32/14162_2.png) [@bradbice](https://discourse.gohugo.io/u/bradbice)
#### Post date: [February 19, 2020, 9:21pm UTC](https://discourse.gohugo.io/t/importing-js-from-node-packages/23545/3 "2020-02-19T21:21:52Z")

</div>

So, this is speaking more to a local package that I’ve already brought in to `node_modules`, and not worried about fetching the package itself, but more concerned with importing those files at build time into Hugo.

For example, an npm package I have installed into node\_odules has a \*.js file that I want to include into Hugo’s /static folder, but I want it to constantly check for or import that file whenever I run the `hugo` command.

Possible? Or does your answer address this as well?

---

<div class="post-metadata">

### Author: ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)
#### Post date: [February 19, 2020, 10:08pm UTC](https://discourse.gohugo.io/t/importing-js-from-node-packages/23545/4 "2020-02-19T22:08:07Z")

</div>

> [@bradbice](#):
>
> Possible? Or does your answer address this as well?

Yes that is possible. In your config:

```toml
[module]
  [[module.mounts]]
    source = "node_modules/somelibrary/dist"
    target = "static/somelibrary"

```

You can also mount to `assets`, `content` etc. and you can also mount single files not just directories.

When you’re running the server, the above directories will be added to the watch list for changes.

---

<div class="post-metadata">

### Author: ![bradbice](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bradbice/32/14162_2.png) [@bradbice](https://discourse.gohugo.io/u/bradbice)
#### Post date: [February 19, 2020, 10:13pm UTC](https://discourse.gohugo.io/t/importing-js-from-node-packages/23545/5 "2020-02-19T22:13:58Z")

</div>

Awesome, thank you!

---

<div class="post-metadata">

### Author: ![wbd](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/wbd/32/10371_2.png) [@wbd](https://discourse.gohugo.io/u/wbd)
#### Post date: [August 20, 2020, 8:08am UTC](https://discourse.gohugo.io/t/importing-js-from-node-packages/23545/6 "2020-08-20T08:08:50Z")

</div>

Don’t forget to mount the `static` folder if you use this method:

> [@resources.Concat with js - slice interface not supported in concat](https://discourse.gohugo.io/t/resources-concat-with-js-slice-interface-not-supported-in-concat/26558/4):
>
> See this: Did you mount assets folder using the new modules system? Try adding this to config.toml [[module.mounts]] source = “assets” target = “assets”
