d3.event is null in webpack build

Question

I have a working D3/React/Webpack system where I am trying to reduce the build size by not importing all of D3. So I have a d3Import.js file with:

import { select, event } from 'd3-selection';
import { drag } from 'd3-drag';

export default { select: select, drag: drag, event: event };

and this is referenced with

import d3 from '../../d3Import.js';

Everything builds and works fine (there are many more imports than the ones shown above) with the exception of querying the event on e.g. a drag event.

onDrag = () => {
    const targetY = d3.event.y;

This fails with

TypeError: _d3Import2.default.event is null

I have tried using a different name for event as I read a suggestion here

import { select, event as currentEvent } from 'd3-selection';

...but no change. It all used to work with

import * as d3 from 'd3;

But that seemed to mean an extra 100k or so in bundle.js. Any help appreciated!

Answer 1

thanks to comment by Terry, I have a solution from here:

onDrag = () => {
   d3.getEvent = () => require("d3-selection").event;
   const targetY = d3.getEvent().y;
}