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.