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

jpgehrig

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

CKurdu

Hi,
Did you solve your problem?
😀

jpgehrig

Kinda...

I documented my findings on https://github.com/jpgehrig/nextqt.