wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

[hoogw]

I run into error:

        `wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.

        falling back to ArrayBuffer instantiation

`

here is my code

                   ` config = {
                                                          locateFile: (filename, prefix) => {
                                                            console.log(`prefix is : ${prefix}`);
                                                            return `/public/utility/sqljs/${filename}`;
                                                          }
                                                        }



                                                        // The `initSqlJs` function is globally provided by all of the main dist files if loaded in the browser.
                                                        // We must specify this locateFile function if we are loading a wasm file from anywhere other than the current html page's folder.
                                                        initSqlJs(config).then(function(SQL){`

[kaizhu256]

this is not a javascript problem. the problem is your web-server, which needs to give a response-header Content-Type: application/wasm when serving the sql-wasm.wasm file:

[hoogw]

agree, I use node.js express as server, to serve this file

type is NOT right,
how to fix it on node.js server?

[hoogw]

why loading 2 copy of wasm file?

This is the second file

[kaizhu256]

i wouldn't know how to configure your express server, unless i saw the code.

anyways, here's a simple http-server in nodejs that will correctly serve .wasm files with proper response-header:

/*
 * fileserver.js
 * usage: PORT=8080 node fileserver.js
 */
"use strict";
let processCwd;
processCwd = process.cwd() + (
    process.platform === "win32"
    ? "\\"
    : "/"
);
process.env.PORT = process.env.PORT || "8080";
console.error("http-file-server listening on port " + process.env.PORT);
require("http").createServer(function (req, res) {
    let file;
    file = require("path").resolve(
        processCwd,
        require("url").parse(req.url).pathname.slice(1)
    );
    // security - disable parent-directory lookup
    if (file.indexOf(processCwd) !== 0) {
        res.statusCode = 404;
        res.end();
        return;
    }
    require("fs").readFile(file, function (err, data) {
        if (err) {
            res.statusCode = 404;
            res.end();
            return;
        }
        switch (require("path").extname(file)) {
        // properly handle .wasm mimetype
        case ".wasm":
            res.setHeader("content-type", "application/wasm");
            break;
        }
        res.end(data);
    });
}).listen(process.env.PORT);

[hoogw]

I fixed my problem by: use CDN file
no more error

                `config = {
                                                        //locateFile: filename => `/dist/${filename}`
                                                        locateFile: file => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.2.2/dist/${file}`

                                                                             // cdn :   https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.2.2/dist/sql-wasm.js
                                                       }`

[hoogw]

Finally found the ultimate solution:

enable express.js recognize .wasm file by,

update type-is version to 1.6.16 +
because 1.6.16 add support .wasm file

I use 1.6.15, not support .wasm file, so express will by default set response header to application/octet-stream

[hoogw]

first update express.js from 4.15 to 4.17 by modify package.json file,
change 4.15 to 4.17 as picture show
then run

              npm install express

app.js file add log, output current running express version
just make sure it is 4.17

Now install type-is, run

              npm install type-is

Make sure package.json type-is version is 1.6.18

Now my express.js support .wasm file by response correct header content-type application/wasm