Vue, Webpack, DC.js, and Finally Crossfilter

Question

I'm trying to build a proof of concept application that uses DC.js to bring in some static data and visualize it. We've decided to use Vue.js as our framework and Webpack as our build tool. I have included D3.js, Crossfilter, and DC.js in the base config.

resolve: {
    extensions: ['', '.js', '.vue'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components'),
      'd3': path.resolve(__dirname, '../bower_components/d3/d3.min.js'),
      'crossfilter': path.resolve(__dirname, '../bower_components/crossfilter/crossfilter.min.js'),
      'dc': path.resolve(__dirname, '../bower_components/dcjs/dc.js') // using unminified version to look at exactly where the error is coming from
    }
}

And in the file with the actual visualization components like so.

var d3 = require('d3')
var cf = require('crossfilter')
var crossfilter = cf.crossfilter
var dc = require('dc')

However DC.js requires crossfilter to work and it hangs on the first instance of of a call to crossfilter within the context of DC.js. Further more after I load the page I can no longer access crossfilter in the console however I can access D3. What is bringing D3.js in as a global require that isn't bringing crossfilter in as one?

Is there some configuration that I'm overlooking here?

Answer 1

So getting Crossfilter and DC.js to work with webpack and vue is possible. I had to make modifications to the DC.js source to get it work.

1. In webpack.base.conf.js you'll need to add the following to module exports.

   plugins: [ new webpack.ProvidePlugin({ d3: 'd3', crossfilter: 'crossfilter', dc: 'dc' }) ]

This makes these three libraries available globally. Without requiring them.

2. If Like me you were using ESlint you'll need to add the following to eslintrc.js to have it ignore the fact that you're not requiring these files.

   'globals': { 'd3': true, 'dc': true, 'crossfilter': true }

3. Finally in DC.js right after the 'use strict'; declaration you'll need to set up crossfilter.

   var crossfilter = crossfilter.crossfilter;

While this isn't a perfect answer it at least has me able to render charts. Now if I could figure out how to redefine the global Crossfilter package as crossfilter.crossfilter I would feel like I had a complete answer.