marmelab/EventDrops

Strange conflict with FontAwesome v5

aardvark82 opened this issue · 5 comments

I noticed that zoom functionality stopped functioning after an upgrade from FontAwesome 4

to FontAwesome 5 (https://fontawesome.com/)

 <script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

After including the all.js file above, I get the following error on zoom:

Uncaught TypeError: Cannot read property 'map' of undefined
at index.js:107
at Array.map ()
at index.js:107
at ut.call (d3.min.js:2)
at SVGSVGElement. (index.js:107)
at k.apply (d3.min.js:2)
at it (d3.min.js:2)
at a.emit (d3.min.js:2)
at a.zoom (d3.min.js:2)
at SVGSVGElement.c (d3.min.js:2)
at SVGSVGElement. (d3.min.js:2)

So the conflict happens with the .js version of FontAwesome but not the CSS one. I switched to v5 css for the time being (you lose the FA lazy loading mechanism for icons). I suppose their SVG based js version overrides necessary functions?
Not sure if this is a d3 issue (I didn't have any issue with my other d3 implementations using FAv5), FontAwesome or an EventDrops one but this might help someone facing the same issue since FA is pretty popular.

@aardvark82: thanks for the report. Which version of EventDrops are you using?

v1.0

I tried to reproduce the issue on the demo, adding the line:

 <script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

just before the closing </body> tag. However, it seems to work. Can you try to reproduce the issue locally?

To get the demo working, clone the projet, and run: make install run.

Closing as no more feedbacks. Feel free to re-open it if you still encounter the issue.