d3-compat.js doesn't work if you only have d3 v6 in the javascript bundle

[mbucknell]

When I try to bundle an application that is using d3 v6 and d3-simple-slider, I get an error:

[!] Error: 'event' is not exported by node_modules/d3-selection/src/index.js, imported by node_modules/d3-simple-slider/src/d3-compat.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
node_modules/d3-simple-slider/src/d3-compat.js (1:9)
1: import { event } from 'd3-selection';
            ^

The import fails because event is not in the d3-selection module (I have installed version 2.0.0)

[johnwalley]

Thanks for reporting this. Would you mind confirming which bundler (and version of it) you are using? I'm guessing Rollup but just want to be sure.

The d3-compat.js file is relying on that import not causing a build error even if the export is not found. It's clearly not working properly! I'll take a look over the weekend.

[mbucknell]

Yes, I am using rollup and was investigating if there is a way to "handle" the error when the module is missing. I am using 2.28.1 of rollup. Thanks for looking into the issue. I'll see if I can come up with anything.

Thanks for the slider. We really like it and beats trying to use a html slider on a svg!

[johnwalley]

Ah, thanks for the extra detail.

What we need is a reliable way of detecting which version of d3 the library sees. It's made a little muddy because someone might be importing all of d3 or might just be bringing in d3-selection. Currently I look for whether event is exported by d3-selection but as you have noticed it isn't ideal. Let's see if we can come up with something better!

[mbucknell]

I think I may have a fix. It works when I use it locally when using d3 v6. #166

[johnwalley]

Merged #166 and published as v1.10.2. Release notes: https://github.com/johnwalley/d3-simple-slider/releases/tag/v1.10.2.

Thanks for your help!

[joeycato]

I just ran into this same issue even with latest code. In my case I used create-react-app (v4) to generate the initial project, and afterwards installed the d3 dependencies as follows:

yarn add d3
yarn add d3-simple-slider

When I launch using the sample d3-simpler-slider code, I hit that error. Should I downgrade to a different d3v6 version ( i.e. < 6.2.0 which is currently installed? )

Update: I tried using [email protected] and it didn't seem to help.

Thanks!
-joey

[joeycato]

Managed to finally workaround by it by downloading the d3-simple-slider source directly and including it in my project, then modifying d3-compat.js as follows:

export function adaptListener(listener) {
    return function (a, b) {
        // d3@v6
        listener.call(this, a, b);
    };
}

Apparently the event property check is not enough to avoid the warning ( not sure why )

[mbucknell]

I am using buble to compile and rollup to bundle. I to get the warning but the code compiles. The code will never hit the part that's generating the warning. It's not ideal but at does work (at least for me).

[johnwalley]

I'll take another look at the weekend. I imagine using CRA is the most common way people are consuming this library so I'll use that as a base case 👍

@joeycato you can try pinning the d3-simple-slider to an older version which doesn't try to detect d3 v6, e.g. v1.9.0 as a workaround for now

[joeycato]

@johnwalley Good to know, I'll keep that in mind. Thanks for creating this btw, it works great so far!

[johnwalley]

I'm still searching for a good solution. I can reproduce the problem with a new CRA example which is a nice starting place.

I've got an idea which uses dynamic imports but I'm not a fan: #167.

[johnwalley]

I'm hoping to schedule some time to update this library and revisit existing issues in the near future.