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

Question

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 MyApp from './MyApp'
import MyAppWASM from './MyApp.wasm'
export default function MyAppCanvas({ props }) {
const canvasRef = useRef(null)
useEffect(() => {
MyApp({
qtCanvasElements: [canvasRef.current],
locateFile: () => {
return MyAppWASM
},
}).then((instance) => {
console.log('MyApp Loaded')
})
})
return (
<canvas
id="qtcanvas"
contentEditable="true"
onContextMenu={(e) => e.preventDefault()}
width="100%"
height="100%"
ref={canvasRef}
{...props}
></canvas>
)
}
Any hints about why the undefined handle to stringToUTF16 would be very welcome! Thanks

Answer 1

I've encountered exactly this problem, searched for the origin of the bug, and then I found out that the bug is already fixed in Git by this commit.
The fix should be released in Qt 6.3.0, due on April 12, 2022.