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!

[milahu]

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

will silently fail if node_modules/chartist/dist/chartist.min.css does not exist. to debug:

$ npx cross-env DEBUG=* eleventy | grep '(0 files)'
Eleventy:TemplatePassthroughManager Copied './node_modules/chartist/dist/chartist.min.css' (0 files)

[pdehaan]

@milahu Interesting, it worked for me on macOS 10.15.7 w/ Eleventy 0.11.1.

> Executing task: npm run build <

> 11ty-768-node-modules@1.0.0 build /Volumes/Dev/github/pdehaan/11ty-768-node-modules
> eleventy

Writing www/index.html from ./src/pages/home.liquid.
Copied 2 files / Wrote 1 file in 0.06 seconds (v0.11.1)

But it might depend on how you have Eleventy installed (locally vs globally) and if chartist is installed the same way. I generally always install Eleventy locally for each project and run via npm build scripts vs npx.

But another solution might be to use require.resolve() to get a full path to the specified chartist files:

const chartistCSS = require.resolve("chartist/dist/chartist.min.css");
const chartistJS = require.resolve("chartist/dist/chartist.min.js");

// console.log({ chartistCSS, chartistJS });

module.exports = (eleventyConfig) => {
  eleventyConfig.addPassthroughCopy({
    [chartistCSS]: "assets/chartist.min.css",
    [chartistJS]: "assets/chartist.min.js"
  });

  return {
    dir: {
      input: "src",
      output: "www"
    }
  };
};

[milahu]

if chartist is installed the same way

when it is NOT installed, then eleventy silently fails to copy

also this fails silently

eleventyConfig.addPassthroughCopy('this/should/not/exist/' + Math.random());

i would expect at least a warning, like warning from addPassthroughCopy: file does not exist: this/should/not/exist/0.1234