Cannot read property 'Converter' of undefined, when using StackExchange PageDown Library in Lightning Component

Question

BACKGROUND

I am trying to use the PageDown JavaScript library:

• Markdown.Converter.js - (click to view source)
• Markdown.Editor.js - (click to view source)
• Markdown.Sanitizer.js - (click to view source)

Inside a Lightning component

Component

<ltng:require scripts="{!join(',',
                       $Resource.pagedown + '/Markdown.Converter.js',
                       $Resource.pagedown + '/Markdown.Sanitizer.js',
                       $Resource.pagedown + '/Markdown.Editor.js'
                       )}"
              afterScriptsLoaded="{!c.afterScriptsLoaded}" />

<div class="body">
    <div class="wmd-panel">
        <div id="wmd-button-bar"></div>
        <textarea class="wmd-input" id="wmd-input">
            This is the *first* editor.

        </textarea>
    </div>
    <div id="wmd-preview" class="wmd-panel wmd-preview"></div>

    <br /> <br />

    <div class="wmd-panel">
        <div id="wmd-button-bar-second"></div>
        <textarea class="wmd-input" id="wmd-input-second">
            This is the *second* editor.
        </textarea>
    </div>
    <div id="wmd-preview-second" class="wmd-panel wmd-preview"></div>

</div>

JavaScript Controller

afterScriptsLoaded : function(component, event, helper) {

    var converter1 = Markdown.getSanitizingConverter();

    converter1.hooks.chain("preBlockGamut", function (text, rbg) {
        return text.replace('/^ {0,3}""" *\n((?:.*?\n)+?) {0,3}""" *$/gm', function (whole, inner) {
            return "<blockquote>" + rbg(inner) + "</blockquote>\n";
        });
    });

    var editor1 = new Markdown.Editor(converter1);

    editor1.run();

    var converter2 = new Markdown.Converter();
    converter2.hooks.chain("preConversion", function (text) {
        return text.replace('/\b(a\w*)/gi', "*$1*");
    });
    converter2.hooks.chain("plainLinkText", function (url) {
        return "This is a link to " + url.replace('/^https?:\/\//', "");
    });

    var help = function () { alert("Do you need help?"); }
    var options = {
        helpButton: { handler: help },
        strings: { quoteexample: "whatever you're quoting, put it right here" }
    };
    var editor2 = new Markdown.Editor(converter2, "-second", options);

    editor2.run();
}

But I get this error message:

Cannot read property 'Converter' of undefined

I suspect it relates to this line:

Converter = require("./Markdown.Converter").Converter;

Inside Markdown.Sanitizer.js but I am really not sure.

QUESTIONS

What is causing it?

Will this library work within LockerService?

Answer 1

Here's why it is not working as expected.

Markdown.Converter.js

var Markdown; // !!Assumes that this variable is defined in the global scope!!

if (typeof exports === "object" && typeof require === "function") // we're in a CommonJS (e.g. Node.js) module
    Markdown = exports;
else
    Markdown = {};

https://github.com/StackExchange/pagedown/blob/32c0bdb121de04e0e956ddde0391022644ff1a76/Markdown.Converter.js#L2-L7

Markdown.Sanitizer.js

var output, Converter;
if (typeof exports === "object" && typeof require === "function") { // we're in a CommonJS (e.g. Node.js) module
    output = exports;
    Converter = require("./Markdown.Converter").Converter;
} else {
    output = window.Markdown; // !!Tries to access the variable from the window!!
    Converter = output.Converter;
}

So the library is making an implicit assumption that the Markdown object can be accessed from the window. In good practice it should explicitly define window.Markdown in Markdown.Converter.js

As a solution you can file an issue for the library owner to fix the issue in the library. Or, you could fix the issue in your copy and upload that version in your org.

The fix in Markdown.Converter.js:

"use strict";
var Markdown;

if (typeof exports === "object" && typeof require === "function") // we're in a CommonJS (e.g. Node.js) module
    Markdown = exports;
else {
    window.Markdown = Markdown = {};
}