Eleventy: How to include node_modules for use in js files

[nicholastillman]

I have been trying to use animeJS in my main.js file through an import statement from another file. When I add the library via a script tag in the page layout/template, it works. However, I would like to use the node module and not quite sure how to implement, as I get the error that the module being imported needs to have a relative path. Any tips would help. Thanks!

[zachleat]

You’ll need to copy it to your output before you can use it!

Here’s an example of how I did it in one of my projects (from my .eleventy.js config file) using passthrough file copy https://www.11ty.io/docs/copy/

eleventyConfig.addPassthroughCopy({
    "node_modules/chartist/dist/chartist.min.css": "assets/chartist.min.css",
    "node_modules/chartist/dist/chartist.min.js": "assets/chartist.min.js"
});

and then in my 11ty.js template:

<link rel="stylesheet" href="${this.url("/assets/chartist.min.css")}">
<script src="${this.url("/assets/chartist.min.js")}"></script>

If you’re using nunjucks or liquid it might look like

<link rel="stylesheet" href="{{ "/assets/chartist.min.css" | url }}">
<script src="{{ "/assets/chartist.min.js" | url }}"></script>

[zachleat]

This is an automated message to let you know that a helpful response was posted to your issue and for the health of the repository issue tracker the issue will be closed. This is to help alleviate issues hanging open waiting for a response from the original poster.

If the response works to solve your problem—great! But if you’re still having problems, do not let the issue’s closing deter you if you have additional questions! Post another comment and I will reopen the issue. Thanks!