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