how to include use of node_modules in rollup compile

Question

I repeatedly get this message and I am trying to include the d3.js into my distribution file.

Treating 'd3.js' as external dependency

I've tried using this plugin

import includePaths from 'rollup-plugin-includepaths';

var includePathOptions = {
  paths: ['node_modules/d3/d3.min.js'],
  include: {
    d3: 'd3'
  },
};

what am i missing?

[`rollup-plugin-node-resolve`](https://github.com/rollup/rollup-plugin-node-resolve)? — gcampbell, Jul 28 '16 at 13:06
@gcampbell not according to http://fengshuo.co/2016/03/10/integrate-with-rollup-and-es2015-in-amd-project/ — user2167582, Jul 28 '16 at 18:02
only both worked for me: `@rollup/plugin-node-resolve` & `@rollup/plugin-commonjs` but apparently some modules from the internet are authored so poorly, the problem might reside with them and not us poor importing souls — vsync, Nov 02 '20 at 15:29

Bae · Accepted Answer · 2016-08-03T22:54:33.043

Note: This is for d3js v4 (I'm not sure its possible with v3)

You need to use rollup-plugin-node-resolve to make rollup aware of dependencies in node_modules.

You install it via npm install --save-dev rollup-plugin-node-resolve (Note: I'm new to all this, the babel plugin might not be necessary)

rollup.config.js

import babel from 'rollup-plugin-babel';
import nodeResolve from 'rollup-plugin-node-resolve';

export default {
  entry: 'path/to/your/entry.js',
  format: 'umd',
  plugins: [
    babel(),
    nodeResolve({
      // use "jsnext:main" if possible
      // see https://github.com/rollup/rollup/wiki/jsnext:main
      jsnext: true
    })
  ],
  sourceMap: true,
  dest: 'path/to/your/dest.js'
};

It's necessary to use jsnext:main otherwise you will get errors like Export '<function>' is not defined by 'path/to/node_module/file.js'

Taken from a post on integrate with rollup and es2015

This is also documented in rollup issue #473 (note it refers to the old name of this plugin rollup-plugin-npm)

Then you can run rollup via rollup -c

You also need to "roll your own" d3 module with just the bits you need. That way you can still use examples from the web with d3.* prefixes. I was originally importing the relevant bits into my client code but there is no way to merge all these into one namespace.

Start with d3 master module and paste all the exports that you need in your code into a local ./d3.js file

Example roll-your-own d3.js

/* 
 re-export https://github.com/d3/d3/blob/master/index.js for custom "d3" implementation.

 Include only the stuff that you need.
*/

export {
  ascending
} from 'd3-array';

export {
  nest,
  map
} from 'd3-collection';

export {
  csv, json
} from 'd3-request';

export {
  hierarchy,
  tree
} from 'd3-hierarchy';

export {
  select
} from 'd3-selection';

Import your hand rolled d3

import * as d3 from "./d3"

As you import more of d3 you only need to keep your ./d3.js in sync and your client code won't care.

Remember you will need to re-run rollup after any changes.

can you give an example how to achieve this in d3 version 3.x — user2167582, Aug 03 '16 at 21:56
Sorry, no. I dont think v3 has been modularized properly to allow you to do this stuff. But I'm no javascript expert. — Bae, Aug 03 '16 at 22:53
Yep it is: http://rollupjs.org/guide/ down by Using config files and Getting started with plugins — basickarl, Aug 27 '16 at 00:07

score 13 · Answer 2 · answered Jun 10 '21 at 14:54

FYI rollup-plugin-node-resolve is deprecated, you should use https://www.npmjs.com/package/@rollup/plugin-node-resolve

npm install @rollup/plugin-node-resolve --save-dev

rollup.config.js:

import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  input: 'main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  },
  plugins: [nodeResolve()]
};

Start Rollup with config file and watch mode:

rollup -c -w

how to include use of node_modules in rollup compile

2 Answers2