Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QtWebEngine
  4. ES6 modules in QWebEnginePage?
Forum Updated to NodeBB v4.3 + New Features

ES6 modules in QWebEnginePage?

Scheduled Pinned Locked Moved Unsolved QtWebEngine
3 Posts 2 Posters 1.2k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • R Offline
    R Offline
    runiq
    wrote on last edited by runiq
    #1

    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.

    jsulmJ 1 Reply Last reply
    0
    • R 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.

      jsulmJ Offline
      jsulmJ Offline
      jsulm
      Lifetime Qt Champion
      wrote on last edited by
      #2

      @runiq Where is _moduletesta.mjs located?

      https://forum.qt.io/topic/113070/qt-code-of-conduct

      1 Reply Last reply
      0
      • R Offline
        R Offline
        runiq
        wrote on last edited by runiq
        #3

        @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.

        1 Reply Last reply
        0

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved