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?

Answer 1

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.

Answer 2

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