Uncaught ReferenceError: PasteFromWord is not defined

Question

I am trying to incorporate the PasteFromWord module into my web app. I downloaded the two files and dropped them into my app. My web app technology doesn't really matter, but for reference it is Java + Tomcat 8.5 + JSF 2.3 + Primefaces 8.0 + p:textEditor (which uses Quill underneath). The framework has already included jQuery.

I modified PasteFromWord.js slightly from the original to import tools from './tools.js' instead of './tools' to fix a browser complaint, and added a console.log statement. Here is what PasteFromWord.js looks like:

import tools from './tools.js'

console.log("Initializing PasteFromWord");

class PasteFromWord {
    constructor(config) {
        this.config = config || {}
    }

    ... rest of class definition omitted ...
}

export default PasteFromWord

I put this in the outputted HTML header to load the module:

<script type="module">
    import PasteFromWord from '../PasteFromWord.js';
    console.log("imported PasteFromForward=" + PasteFromForward);
</script>

Both the log message in the PasteFromWord.js and the log message in the <script> tag show up in the console demonstrating that it is loading the script and the function is defined.

Farther down in the HTML output, I have this code to actually use it:

<script type="javascript">
    $(window).ready(function() {
        console.log("about to create PasteFromWord");
        var paster = new PasteFromWord();
        // more code will go here in the future
    });
</script>

The log message prints out, and on the next line, in the browser console I get the following error (identical in Firefox and Chrome):

Uncaught ReferenceError: PasteFromWord is not defined

I have searched a lot for causes of ReferenceError, but none of the solutions applies. I believe I have all the bases covered, but obviously something is missing. Is there something wrong with scope? Strict mode? Something else?

Answer 1

This answer (inspired by an answer to a different question) seems to work, but I am not happy with it so I am not marking it as the solution. Hopefully there is a better answer, or someone who works with JavaScript more regularly than I do can say whether it is an appropriate answer.

The problem appears to be one of scope, where PasteFromWord is available inside the initial <script> tag that imports the module, but not later. So the answer is to assign the class definition to be a member of an object that is known in other scopes.

<script type="module">
    import PasteFromWord from '../PasteFromWord.js';
    window.PasteFromWord = PasteFromWord;
    console.log("imported PasteFromForward=" + PasteFromForward);
</script>

Then, the class can be instantiated by prepending window. to the class name:

<script type="text/javascript">
    $(window).ready(function() {
        var paster = new window.PasteFromWord();
        // more code will go here in the future
    });
</script>