Qt web assembly: configure kit

Question

I want to test out QT WebAssembly for my scientific program. Therefore, I installed emscripten.

$em++ --version

returns

emcc (Emscripten gcc/clang-like replacement) 1.38.30 (commit a5082b232617c762cb65832429f896c838df2483)...

Then I installed Qt using the Qt WebInstaller. In my installation directory I have a wasm_32 folder which contains bin and qmake:

$ ~/Qt_web/5.13.2/wasm_32/bin/qmake --version 

return

QMake version 3.1
Using Qt version 5.13.2 in /home/myName/Qt_web/5.13.2/wasm_32/lib

However, when I start Qt creator, click on Projects I see a Kit called: Qt 5.13.2 WebAssembly but I cannot select it (it is grayed out). When I click on manage Kits I saw that there is no C and C++ compiler selected for Qt 5.13.2.WebAssembly.

I also get an warning when I change to Qt Versions. The warning says:

ABI detection failed: Make sure to use a matching compiler when building. No qmlscene installed. 

This is a list of all compilers which are selectable:

Question:

I do not really understand what emscripten has to do with all that. Is emscripten a compiler? If yes should it have been auto-selected by the Qt 5.13.2 WebAssembly kit? How does a proper Qt WebAssembly kit look like?

If I select gcc as my compiler I get an error saying:

/home/myName/Qt_web/5.13.2/wasm_32/plugins/platforms/libqwasm.a:-1: error: error adding symbols: File format not recognized

EDIT:

When I open the qt maintenance tool and look at the installed packages I get the following:

EDIT2: After changing to Qt Creator 4.11.0-beta2 (4.10.83) I was able to follow parts of this description. I was able to select the Plugin, but I still can not change the Device type.

Maybe it has to do with this error that I get now:

EDIT3:

seems as if my emscripten compiler has some problems. Is the compiler located in:

emscripten/emsdk/clang/e1.38.30_64bit/clang++
emscripten/emsdk/clang/e1.38.30_64bit/clang

One thing I noticed is that If I use add in QtCreator >> Kits >> Compilers and I select Add >> WebAssembly >> C It generates a new entry in Manual >> C++ >> Emscripten Compiler and not in Manual >> C >> Emscripten Compiler. Is this a problem?

EDIT

This is how my Compilers page looks like:

Answer 1

1. You need to copy the .emscripten file from emsdk directory to your home (/home/myUsername).

2. You need to fix the paths in the file manually (See example below).

Notice that .emscripten file , at least in the version (1.39.8) i am using, is a python script (maybe a bug?)

example file before edit:

import os
emsdk_path = os.path.dirname(os.environ.get('EM_CONFIG')).replace('\\', '/')
NODE_JS = emsdk_path + '/node/12.18.1_64bit/bin/node'
LLVM_ROOT = emsdk_path + '/upstream/bin'
BINARYEN_ROOT = emsdk_path + '/upstream'
EMSCRIPTEN_ROOT = emsdk_path + '/upstream/emscripten'
TEMP_DIR = emsdk_path + '/tmp'
COMPILER_ENGINE = NODE_JS
JS_ENGINES = [NODE_JS]

after edit:

import os
emsdk_path = os.path.dirname(os.environ.get('EM_CONFIG')).replace('\\', '/')
NODE_JS = '/home/myUsername/node/12.18.1_64bit/bin/node'
LLVM_ROOT = '/home/myUsername/upstream/bin'
BINARYEN_ROOT = '/home/myUsername/upstream'
EMSCRIPTEN_ROOT = '/home/myUsername/upstream/emscripten'
TEMP_DIR = '/home/myUsername/tmp'
COMPILER_ENGINE = NODE_JS
JS_ENGINES = [NODE_JS]

When above steps are completed qt creator was able to detect the Emscripten Compiler with no errors.