Updating d3 & Angular to v11: ERROR - event was not found in d3

[Sahil Babbar]

After updating d3 to v6.3.1 and Angular to latest v11.0.6, getting the following error while doing ng build --prod. Earlier with d3 v5.4.0 and Angular v6.0.3, everything was working fine.

Error while ng build --prod:

"export 'event' was not found in 'd3'
    at HarmonyImportSpecifierDependency._getErrors (<application-path>\node_modules\webpack\lib\dependencies\HarmonyImportSpecifierDependency.js:109:11)
    at HarmonyImportSpecifierDependency.getErrors (<application-path>\node_modules\webpack\lib\dependencies\HarmonyImportSpecifierDependency.js:68:16)
    at Compilation.reportDependencyErrorsAndWarnings (<application-path>\node_modules\webpack\lib\Compilation.js:1463:22)
    at hooks.finishModules.callAsync.err (<application-path>\node_modules\webpack\lib\Compilation.js:1258:10)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (<application-path>\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:53:1)
    at AsyncSeriesHook.lazyCompileHook (<application-path>\node_modules\webpack\node_modules\tapable\lib\Hook.js:154:20)
    at Compilation.finish (<application-path>\node_modules\webpack\lib\Compilation.js:1253:28)
    at hooks.make.callAsync.err (<application-path>\node_modules\webpack\lib\Compiler.js:672:17)
    at _done (eval at create (<application-path>\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:9:1)
    at _err1 (eval at create (<application-path>\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:36:22)
    at _addModuleChain (<application-path>\node_modules\webpack\lib\Compilation.js:1185:12)
    at processModuleDependencies.err (<application-path>\node_modules\webpack\lib\Compilation.js:1097:9)
    at process._tickCallback (internal/process/next_tick.js:61:11)
 @ ./src/app/app.module.ngfactory.js
 @ ./src/main.ts
 @ multi ./src/main.ts

It seems that event is being referred from the following code:

import * as d3 from 'd3';
// Save x,y cordinates on drag start.
this.originalX = d3.event.x;
this.originalY = d3.event.y;
d3.event.sourceEvent.stopPropagation();

After googling a bit, someone suggested to install @types/d3 and then try; but after installing it, Webstorm starts to throw error on the usage of d3.event.

Has the API changed for accessing event via d3? Or something else is missing?

This code is part of a Angular Library, which gives the following output while ng build --prod:

Building Angular Package

------------------------------------------------------------------------------
Building entry point '@my-scope/my-library'
------------------------------------------------------------------------------
- Compiling TypeScript sources through NGC
× Compiling TypeScript sources through NGC
ERROR: <directive>.ts:35:29 - error TS2339: Property 'event' does not exist on type 'typeof import("<application-path>/node_modules/@types/d3/index")'.

35         this.originalX = d3.event.x;
                               ~~~~~
<directive>.ts:36:29 - error TS2339: Property 'event' does not exist on type 'typeof import("<application-path>/node_modules/@types/d3/index")'.

36         this.originalY = d3.event.y;
                               ~~~~~
<directive>.ts:37:12 - error TS2339: Property 'event' does not exist on type 'typeof import("<application-path>/node_modules/@types/d3/index")'.

37         d3.event.sourceEvent.stopPropagation();
              ~~~~~
<directive>.ts:47:23 - error TS2339: Property 'event' does not exist on type 'typeof import("<application-path>/node_modules/@types/d3/index")'.

47         const dx = d3.event.x,
                         ~~~~~
<directive>.ts:48:21 - error TS2339: Property 'event' does not exist on type 'typeof import("<application-path>/node_modules/@types/d3/index")'.

48             dy = d3.event.y;
                       ~~~~~

An unhandled exception occurred: <directive>.ts:35:29 - error TS2339: Property 'event' does not exist on type 'typeof import("<application-path>/node_modules/@types/d3/index")'.

35         this.originalX = d3.event.x;
                               ~~~~~
<directive>.ts:36:29 - error TS2339: Property 'event' does not exist on type 'typeof import("<application-path>/node_modules/@types/d3/index")'.

36         this.originalY = d3.event.y;
                               ~~~~~
<directive>.ts:37:12 - error TS2339: Property 'event' does not exist on type 'typeof import("<application-path>/node_modules/@types/d3/index")'.

37         d3.event.sourceEvent.stopPropagation();
              ~~~~~
<directive>.ts:47:23 - error TS2339: Property 'event' does not exist on type 'typeof import("<application-path>/node_modules/@types/d3/index")'.

47         const dx = d3.event.x,
                         ~~~~~
<directive>.ts:48:21 - error TS2339: Property 'event' does not exist on type 'typeof import("<application-path>/node_modules/@types/d3/index")'.

48m             dy = d3.event.y;
                       ~~~~~

[Mike Bostock]

Please read the release notes.

https://github.com/d3/d3/blob/master/CHANGES.md

[Jarrett Meyer]

Events are now handled in the callback, like all other web events.

[Sahil Babbar]

After downgrading D3 to v5.4.0 and this error vanished.