Quasar(Webpack, Babel) + D3 v4 : issue : d3.event is always null

mysolultion.md

possible occuring errors while using d3 :

• can not read "sourceEvent" of null
• d3.event is always null ...

cause :

as far as i understand...

1. quasar using webpack and babel
2. webpack not checking "jsnext:main", it import default 'd3/index.js' and pass it to babel.
3. babel try to translate es6 'import' syntax inside 'd3/index.js', but break the live binding
   * may be webpack just import 'd3/build/d3.node.js' which use 'require' syntax. not sure about this part
4. d3.event should be mutable(live binding), but as babel broke it to immutable.
5. d3.event always stay the initial state, which is null
6. all other modules using d3.event broke too.

ref:
d3/d3-brush#9
d3/d3-zoom#32
d3/d3-selection-multi#15
https://stackoverflow.com/a/43846806 \

solution :

• configure webpack to resolve d3 manually import 'd3/build/d3.js'
  • in case of Quasar, webpack config is in the file 'quasar.conf.js'

//find and edit this part from the 'quasar.conf.js'
    build:{
      extendWebpack(cfg){
        ...
        cfg.resolve.alias['d3'] = 'd3/build/d3.js' // add this line
      }

if its webpack config

 {
   ...
   resolve:{
     ... ,
     alias:{
       ... ,
       'd3' : 'd3/build/d3.js' // add this line
  ...