1

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

2
  • I have posted the example code on GitHub: github.com/jpgehrig/nextqt Commented Apr 30, 2021 at 6:54
  • which now contains a solution to the problem (probably not the best one...) Commented May 4, 2021 at 20:06

1 Answer 1

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.