1

I'm in the midst of upgrading my app from Rails 5.2 to Rails 6.0, and am also trying to migrate some things over to webpacker, including crossfilter (which is now crossfilter2) and reductio, and after spending several hours, I'm no closer on figuring out how to resolve the following error.

In reductio's value-count.js, the top line is var crossfilter = require('crossfilter2');, and within the code itself, it calls crossfilter.bisect.by(function.... When I try to render my dc charts (which worked before moving over to webpack), my Chrome developer console shows:

Uncaught TypeError: Cannot read property 'by' of undefined at value-count.js:38

It was caused by crossfilter.bisect's returning undefined. So I dug a little deeper. In my own code that's calling crossfilter (a JS template that is called via AJAX), console.log showed that crossfilter is a function, which is as expected.

When I modified reductio's value-count.js and added a console.log statement inside the initial callback, it showed the crossfilter as a Module, with a default attribute containing the function crossfilter.

When I removed var crossfilter = require('crossfilter2'); from value-count.js, my app code worked again, presumably because I defined crossfilter in my application.js.erb (see below), which imported it as a function. So it seems like an inconsistency inside the reductio code itself, but since I'm new to webpack, I feel like I might be missing something in the import statements.

Question: How can I get reductio to use my global reference to crossfilter without modifying the reductio source files?

My environment:

ruby: 2.6.5
Rails: 6.0.2.1
crossfilter2: 1.5.2
reductio: 0.6.3

Here's the relevant code in my app/javascript/packs/application.js.erb (it took me several hours to figure this out):

import crossfilter from 'crossfilter2';
window.crossfilter = crossfilter;

import reductio from 'reductio';
window.reductio = reductio;

I'd greatly appreciate if someone can tell me what I'm missing.

Gordon
  • 19,811
  • 4
  • 36
  • 74
xfactorial
  • 161
  • 1
  • 8
  • Can you back out to crossfilter2@1.4? I think this is probably similar to [this Angular issue](https://github.com/crossfilter/crossfilter/issues/147), not in the specifics but in the ambiguity we have between crossfilter as a function and crossfilter as a module. Specifically, some build systems do not like a module that is also a function, which is the way crossfilter was always defined. – Gordon Jan 30 '20 at 00:35
  • 1
    Hi, and thanks @gordon for letting me know about this question! The way Reductio works right now with regards to modules is not something I'm happy with. Fortunately, we are about to merge a pull request that moves to using ES6 modules and a more standard build and module exposure approach. It will still expose a global and consume Crossfilter globals, but I hope it works better with build systems. Would you be willing to try the pull request and see if that works better for you? https://github.com/crossfilter/reductio/pull/60 – Ethan Jewett Jan 30 '20 at 14:24
  • Hi @Gordon, I tried downgrading to crossfilter2@1.4 (it installed 1.4.8), but the problem persisted. – xfactorial Jan 30 '20 at 18:07
  • @Ethan, your answer worked! – xfactorial Jan 30 '20 at 18:07

0 Answers0