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?
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>