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

[eric248550]

I'm building React web app with Webpack, using wasm to load some libraries, deployed on Heroku. But get the error message on web console: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'

Everything went right when running on local and Heroku local command. Struggling for a week but couldn't find any solution, please help me.

the only code related to WebAssembly below

class Loader {
  async load() {
    if (this._wasm) return;
    /**
     * @private
     */
    this._wasm = await import("@emurgo/cardano-serialization-lib-browser/");
  }

  get Cardano() {
    return this._wasm;
  }
}

export default new Loader();

[mars]

Hi @eric248550,

I am not familiar with loading WASM in a web app, but here's my best effort to help.

I believe there are two issues at play here:

---

1. Browser import does not support npm

Your sample import() statement references an npm module namespace, but browsers cannot load modules directly from npm. node_modules/ is a Node-specific feature.

The module needs to be available as a JS file within the web app, so that it can load it directly:

module-name
The module to import from. This is often a relative or absolute url to the .js file containing the module. Certain bundlers may permit or require the use of the extension; check your environment. Only single quoted and double quoted Strings are allowed. —https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

2. Static web server config

The static web server would need to be configured to return those JS file modules with the expected content-type header.

Once you move the modules into your web app's filesystem (for example, a public modules/ directory), then you may configure heroku-buildpack-static server to send the correct headers via static.json file in your app:

{
  "root": "build/",
  "routes": {
    "/**": "index.html"
  },
  "headers": {
    "/modules/**": {
      "Content-Type": "application/wasm"
    }
  }
}

---

I hope this helps.

[mars]

No response. Closing the issue.

[iamhamzaawan]

Have you find any solution for this?

[eric248550]

@iamhamzaawan Yes, but however I stop using this repo since you can run react with nodejs server

[iamhamzaawan]

Can you tell me the solution as i am also facing the same issue running react app with the rails server? It works great on local but not on live servers.

[eric248550]

What's your problem and error code?

[iamhamzaawan]

The Problem is exactly the same as yours while importing the Cardano library. It is working fine on the local but gives the above error on the staging environment.

[eric248550]

Do you add static.json file? If you already did, here is the thing you may forget: Use the static server to host Here is a node.js static server example run on heroku:

const path = require('path');
const express = require('express');

const app = express();

const dist = path.join(__dirname, 'dist');

app.use(express.static(dist));
// app.set('port', process.env.PORT || 5000);
const PORT = process.env.PORT || 5000;
console.log(`Listening on ${ PORT }`);

app.get('/*', (req, res) => {
  res.sendFile(`${dist}/index.html`);
})

// app.listen(PORT, function() {
//   console.log('listening on port ', process.env.PORT || 5000);
// });
app.listen(PORT, () => console.log(`Listening on ${ PORT }`))