request for help

[oerxlebe]

Hello!
I'm trying to import the occt-import-js to a react application. But unfortunately it is not working. I have imported
occt-import.js and occt-import-js.wasm to my scr folder in my react application. Within my react app I have a sandbox.js like this:

import occtimportjs from "./occt-import-js";
import {useEffect} from "react";

const Sandbox = () =>{
async function init(){
const occt = await occtimportjs();
// let result = occt.ReadStepFile(event.data.stepFile, null);
return occt;
}

useEffect(() => {
    init().then(
        function (value){console.log("success")},
        function (error){console.log("error")}
    );
},[]);
return (<p>sandbox</p>        );

}
export default Sandbox;

The occtimport.js is not running. I get following error in the console of my browser:

occt-import-js.js:326 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
occt-import-js.js:327 falling back to ArrayBuffer instantiation
occt-import-js.js:326 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
occt-import-js.js:327 falling back to ArrayBuffer instantiation
occt-import-js.js:316 failed to asynchronously prepare wasm: CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0
occt-import-js.js:242 Aborted(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0)

could you please help me?
Thank you very much. Best greetings
Olaf

[GitHubDragonFly]

@oerxlebe I am not sure if this might help you but you would have nothing to lose by trying.

The error is only complaining about mime type so it might resolve it for you if you could configure your server to serve the mime type when the wasm file is requested.

Here is a python example in Flask server that I am using:

@app.route('/<path:path>', methods=['GET'])
@cross_origin()
def get_path(path):
    if path != 'undefined':
        try:
            if path.startswith('uploads/'):
                return send_file( path )
            elif path.endswith('.css'):
                return Response( mimetype='text/css' )
            elif path.endswith('.wasm'):
                return Response( mimetype='application/wasm' )
            elif path.endswith('.bin'):
                return Response( mimetype='application/octet-stream' )
            else:
                return render_template( path )
        except Exception as e:
            return render_template( '404.html' ), 404
    else:
        return make_response( 'Path is undefined' )

Other than this, try Googling how to import wasm file into react.

Maybe this link might help as well if it's Node.js you are dealing with.

[kovacsv]

Yes, @GitHubDragonFly is right, your web server must serve wasm files with application/wasm mime type.

[oerxlebe]

Hi,
to fix my mime-problem I changed the fetch function calls (two lines 287 and 323)
return fetch(binaryFile, {credentials: "same-origin", headers: {'Accept': 'application/wasm'}}).then(function (response) {
I added ", headers: {'Accept': 'application/wasm'}"

But I still facing a lot of errors:

There are some symbols, which are not defined: "Browser", "globalThis", "emscripten_source_map" and "define"

I also have a compiler error, when I try to compile the application with "npm run build":
Failed to compile.

Module not found: Error: Can't resolve 'fs' in 'C:\Dev\falo3d\src'

I would be happy to get some hints for solving these problems. Many thanks

[oerxlebe]

Hi again,
when I ignore alle errors mentioned above I have these errors in my browser console:

Many thanks for helping me