I am trying to use c3js for the chart with Lightning Component, but unluckily, I got an error with the external js file d3.v3.min.js.

Error at importing phase

import code:

<ltng:require styles="/resource/c3js/c3-0.4.11/c3.min.css" 
              scripts="/resource/d3v3min, /resource/c3js/c3-0.4.11/c3.min.js" 
              afterScriptsLoaded="{!c.afterJsLoaded}" />

Could you guys tell me how to solve this issue for using c3js in Lightning Component. I really appreciate any help. Thank you very much!

  • Hi Ted, can you check in your org if your Locker Service is activated in "Critical Updates"? If yes, try deactivating it and try again. It might be because the external library is not compatible with Locker Service. – SE_User Oct 7 '16 at 9:12
  • 1
    Hi @SE_User, thank you very much! solved it. Your answer help me solve the other issue with chartjs too. That's really awesome. – ted Oct 7 '16 at 9:59
  • @ted hold on a sec - for D3 there was an issue in that library itself that made it's module initialization not function correctly with strict mode (made the assumption in 1 location that this === window). That has been fixed in the latest version of D3 which is 4.2.6 and works find with LS activated. Can you try updating your component to use D3 v4 and see if that fixes the issue in C3 (I suspect it will). The issues with chartjs are Locker's though and should all be corrected with the upcoming patch deploying to WInter'17 orgs sometime on or near 10/18 – Doug Chasman Oct 7 '16 at 10:56
  • Hi @DougChasman, thank you very much for your caution. But my question was about using c3js, – ted Oct 7 '16 at 11:05
  • @ted I just tried the combination of D3 v4 and C3 v0.4.11 and a different issue pops up - SVGPathElement is not exposed in the current version of Locker on production - this one is also fixed with the upcoming 10/18 patch. – Doug Chasman Oct 7 '16 at 11:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.