In visualforce, following line initializes mermaid object.

    mermaid.initialize({startOnLoad: true, theme: 'forest'});

Below code throws mermaid is not defined exception.

<aura:handler name="init" value="{!this}" action="{!c.handleInit}"/>

handleInit: function(cmp, event, helper) {
     mermaid.initialize({startOnLoad: true, theme: 'forest'});

In Lightning Components, how can be define and initialize JavaScript objects?


Library Must Be Compatible

In order for the library to work, it must define the object at the window level (e.g. window.mermaid = function() { ... }).

Library Must Be in a Static Resource

You need to upload the library to Setup > Develop > Static Resources, and make sure its type is JavaScript. This is a CSP security feature so you can verify that your script is not compromised because of upstream dependencies.

Library Must Be Included

You need to use ltng:require to get the script. Note that it will not be available during init, so you will have to listen for a separate event:

<ltng:require scripts="{!$Resource.mermaid}" afterScriptsLoaded="{!c.scriptsLoaded}" />

After that, you should be good to go. Many compatible scripts run just fine, but keep in mind that some forms of DOM traversal and manipulation are off limits, so the library might not work in your component anyways.

Please feel free to read more about Locker Service and Using External Scripts.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.