How to load javascript module in epub xhtml

Question

I have an ebook (ebook1.epub) that loads a javascript file (script1.js) like so:

cat EPUB/xhtml/raw/ch1.xhtml
<!--?xml version='1.0' encoding='UTF-8'?-->
<!DOCTYPE html><html xml:lang="en-us" lang="en-us" xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:xlink="http://www.w3.org/1999/xlink">
    <head>
        <script type="text/javascript" src="../../js/script1.js"></script>
...
    </head>
...
</html>

# --------------------------------------------------------------

cat EPUB/package.opf
...
<item id="js4" href="js/script1.js" media-type="text/javascript"/>

This works ok. I view the book with:

calibre ebook1.epub

script1 works as expected, (e.g. calling console.log("foo1") from within script1 responds as expected and prints to the terminal where calibre was launched).

Now, I need to use Javascript module file (ES6) (script2.js) The javascript module file is loaded like so:

cat EPUB/xhtml/raw/ch1.xhtml
<!--?xml version='1.0' encoding='UTF-8'?-->
<!DOCTYPE html><html xml:lang="en-us" lang="en-us" xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:xlink="http://www.w3.org/1999/xlink">
    <head>
        <script type="module" src="../../js/script2.js"></script>
...
    </head>
...
</html>

# --------------------------------------------------------------

cat EPUB/package.opf
...
<item id="js4" href="js/script2.js" media-type="text/javascript"/>

When I ran calibre with

calibre ebook2.epub

script2 does not work.
Calling function from script2:

does not print anything to the terminal.
the terminal shows an error message:

ERROR: clbr://internal.sandbox/book/EPUB/js/script2.js:0: Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

How can I load a javascript module file in the .epub?

Thanks, Avner

score 1 · Answer 1 · answered Jun 28 '21 at 00:47

I installed the latest Calibre version (5.22.1) from here.
After install, I was able to load module javascript files, and see messages from console.log() in the terminal where I launched Calibre from.

cat EPUB/xhtml/raw/ch1.xhtml
<!--?xml version='1.0' encoding='UTF-8'?-->
<!DOCTYPE html><html xml:lang="en-us" lang="en-us" xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:xlink="http://www.w3.org/1999/xlink">
    <head>
        <script type="module" src="../../js/script2.js"></script>
...
    </head>
...
</html>

# --------------------------------------------------------------

cat EPUB/package.opf
...
        <item id="js4" href="js/script2.js" media-type="module"/>

When I ran calibre with calibre ebook2.epub script2.js works ok:
I can see messages from Console.log() in the terminal.

The solution came from this post.

How to load javascript module in epub xhtml

1 Answers1