ES6 modules in QWebEnginePage?

runiq

Hi,

Disclaimer: I'm coming from Anki and I'm completely out of my depth, please bear with me!

I'd like to inject Javascript into my Anki cards, and I'd like to use ES6 modules for ease of maintenance. However, this doesn't appear to work, so I've gone down a rabbithole and ended up here.

Anki internally uses a QWebEnginePage with setHtml() to build the page. The HTML looks something like this (lots of stuff omitted):

<html class=" webkit chrome linux js">
  <head>
    <title>main webview</title>
  </head>

  <body>
    <div id="qa">a
    <script type="module">
      import {say} from '_moduletesta.mjs';
      say("42");
    </script>
  </body>
</html>

This is the referenced _moduletesta.mjs:

export function say(message) {
        console.log(message);
}

I believe this should print 42 to the console, but it does not. Instead, the inlined script appears to be silently ignored.

Am I doing something wrong here, or is this expected?

I'm using Anki 2.1.13 (built with PyQt 5.12.2 and Qt 5.12.3). Qt 5.12.3 is using Chromium 69.0.3497.128, so ES6 modules should in theory be supported.

Edit: Crossposted to Reddit, Anki support and to the Qt bug tracker.

jsulm

@runiq Where is _moduletesta.mjs located?

runiq

@jsulm said in ES6 modules in QWebEnginePage?:

Where is _moduletesta.mjs located?

It's in Anki's collection.media folder, the only folder where Anki cards may load content from. Since it's the only content folder Anki allows, explicit paths are not needed. (I've verified with loading a non-module script and with CSS files, both of which are being loaded correctly.)

I've simplified the example somewhat, hopefully this makes things clearer. The example script in my OP should print 42 to the console, but it doesn't.

Edit: I've also tried importing from './_moduletesta.mjs' and '/_moduletesta.mjs', neither of which work.

Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

ES6 modules in QWebEnginePage?