Configuring react-d3 into a Rollup Build System

Rollup is a next generation bundling system that I’m using with react. There is a port of the d3 Javascript graphing library called react-d3. As with most cases where you put together a bunch of new technologies, there are configuration issues.

Here is how I include react-d3 into my rollup projects:

import React from 'react'
import { LineChart } from 'react-d3'

Then to make an actual graph:

export class GraphWidget extends React.Component
{
   constructor( props ) { super( props ); }

   render()
   {
      var width = 700,
          height = 300,
          margins = {left: 100, right: 100, top: 50, bottom: 50},
          title = "Events",
          x = function( d ) { return d.index; };

      var lineData = 
          [
             {
                name: "series1",
                values: [ { x: 0, y: 20 }, { x: 24, y: 10 } ]
             },
             {
                name: "series2",
                values: [ { x: 70, y: 82 }, { x: 76, y: 82 } ]
             }
          ];

      return ( <LineChart
                  title     = {title}
                  width     = {width}
                  height    = {height}
                  margins   = {margins}
                  data      = {lineData}
                  x         = {x}
                /> 
             );
   }
}

React-D3 breaks with Use Strict

The current version of d3, and react-d3 depends on having access to “this”. The default build with babel is to use strict, which eliminates the global this, and will break react-d3.

There is a lot of discussion on the web about ways to turn off use strict in plain babel environments, and with more popular packagers like webpack and browserify. Here is how I solved this for my rollup environment.

First install:

npm install rollup-plugin-post-replace

This is just like the common plugin rollup-plugin-replace except that it runs after bundling.

Then in rollup.config.js:

var postReplaceConfig =
{
   '"use strict";': '',
   "'use strict';": ''
};

var config =
{
   plugins: 
   [ 
      postReplace ( postReplaceConfig ),
   ]
}

Resources