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

Qt Web Assembly application and Next.JS: handle is undefined



  • Hello

    I am trying to embed a Qt 5.15.2 Web Assembly application in a Next.js app. The Qt app is running fine when loaded by qtloader.js into a simple HTML page, but it crashes when built as an ES6 module and loaded into a React component.

    The Qt app WASM loads fine and the app boots. It crashes when Qt calls back the stringToUTF16 javacript function exposed by Emscripten (v1.39.8):

    exception thrown: TypeError: handle is undefined,__emval_get_property@webpack-internal:///./pages/MyApp.js:912:1085
    QWasmString::toQString(emscripten::val const&)@http://localhost:8000/_next/static/94c486d8c8725ebf2f964854fb22d0f4.wasm
    QWasmScreen::canvasId() const@http://localhost:8000/_next/static/94c486d8c8725ebf2f964854fb22d0f4.wasm
    

    The Qt app is built with these Emscripten flags:

    wasm {
        QMAKE_LFLAGS += '-s USE_ES6_IMPORT_META=0 -s EXPORT_ES6=1 -s MODULARIZE=1 -s ENVIRONMENT="web"'
    }
    

    And loaded into the React component like this:

    import React, { useRef, useEffect } from 'react'
    import AnalogClock from './AnalogClock'
    import AnalogClockWASM from './AnalogClock.wasm'
    
    export default function QtApp({ props }) {
      const canvasRef = useRef(null)
    
      useEffect(() => {
        AnalogClock({
          qtCanvasElements: [canvasRef.current],
          locateFile: () => {
            return AnalogClockWASM
          },
        }).then((instance) => {
          console.log('AnalogClock loaded')
        })
      })
    
      return (
        <canvas
          id="qtcanvas"
          contentEditable="true"
          onContextMenu={(e) => e.preventDefault()}
          style={{ background: 'blue' }}
          width="500"
          height="500"
          ref={canvasRef}
          {...props}
        ></canvas>
      )
    }
    
    

    Any hints about why the handle to stringToUTF16 becomes undefined would be very welcome! Thanks!

    --
    PS: I have create a small example project here: https://github.com/jpgehrig/nextqt



  • Hi,
    Did you solve your problem?
    šŸ˜€


Log in to reply