Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-96902

Import of JS module to QML does not work

    XMLWordPrintable

Details

    • Linux/X11
    • 29946505a35f9f52ddc4f3e09e40c52efefad93d (qt/qtdeclarative/dev) 3bb2f7dde4b53173494710692a498ef6fee79cc3 (qt/qtdeclarative/6.2) bcce8187542d45b8986bd53cda3827d46badb82d (qt/tqtc-qtdeclarative/5.15)

    Description

      I followed the example provided in the docs: 

      // main.qml
      import QtQuick 2.0
      import "script.mjs" as MyScript
      Item {
        width: 100; height: 100
        MouseArea {
          anchors.fill: parent
          onClicked: {
            MyScript.showCalculations(10)
            console.log("Call factorial() from QML:",
              MyScript.factorial(10))
          }
        }
      }
      

        

      // script.mjs
      import { factorial } from "factorial.mjs"
      function showCalculations(value) {
        console.log(
         "Call factorial() from script.js:",
         factorial(value));
      }
      

       

      // factorial.mjs
      export function factorial(a) {
        a = parseInt(a);
        if (a <= 0)
          return 1;
        else
          return a * factorial(a - 1);
      }

      Running qmlscene on main.qml and mouse click on the window triggers the following error:  

      main.qml:12: TypeError: Property 'showCalculations' of object TypeError: Type error is not a function

      Expected output: Must calculate factorial twice and print to console

       

      If I fix `script.mjs` by exporting `showCalculations` function like this: 

      export function showCalculations(value) {

      I get factorial calculated only once, but expected twice. Output is the following: 

      qml: Call factorial() from script.js: 3628800
      main.qml:13: TypeError: Property 'factorial' of object TypeError: Type error is not a function

      I also tried to rename script.mjs to script.js, but that breaks import factorial.js, so it does not help.

       

      One more issue is that docs state that "Sometimes it is desirable to have the functions made available in the importing context without needing to qualify them. In this case ECMAScript modules and the JavaScript import statement should be used without the as qualifier."

      I tried:

      import "script.mjs"

      But I get error:

      main.qml:4 Script import requires a qualifier

      Expected: import must happen without issues and one can call `showCalculations()` and `factorial()` without qualifier like this:

      onClicked: {
        showCalculations(10)
        console.log("Call factorial() from QML:",
         factorial(10))
      }

      Attachments

        No reviews matched the request. Check your Options in the drop-down menu of this sections header.

        Activity

          People

            qtqmlteam Qt Qml Team User
            rightaway717 Ivan Belyakov
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved:

              Gerrit Reviews

                There are no open Gerrit changes