Dev Faq
9
votes

Pourquoi est-ce que j'obtiens l'erreur «La réponse a un type MIME non pris en charge» après avoir regroupé Wasm, mais pas lors du service avec le serveur de développement Webpack?

J'essaie de créer un projet Rust WebAssembly et j'ai modifié le rust-webpack-template a> comme point de départ. Le modèle est un projet Webpack avec un fichier JavaScript qui appelle une seule fonction Wasm et le Rust Wasm prend le relais à partir de là.

J'ai modifié le modèle car je voudrais avoir ma logique principale en JavaScript et appeler Rust Wasm via une API.

J'ai changé l'entrée du webpack en bootstrap.js ci-dessous. 

#[wasm_bindgen]
pub fn get_msg() -> String {
    "Hello from Rust WebAssembly!".to_owned()
}

J'ai ajouté le fichier index.js et il appelle les fonctions Rust Wasm 

// index.js
import * as wasm from "../crate/pkg/rust_webpack";

const title = document.getElementById("msg");

title.innerText = wasm.get_msg();

La fonction get_msg de Rust ressemble à ceci: p > 

// bootstrap.js
import("./index.js").catch(e => 
    console.error("Error importing 'index.js':", e)
);

Lorsque j'exécute le projet en utilisant webpack-dev-server -d , tout fonctionne correctement.

Cependant, lorsque je construis le projet en utilisant webpack et essayez d'héberger directement les fichiers générés, rien ne s'affiche et la console du navigateur affiche l'erreur:

Erreur lors de l'importation de 'index.js': TypeError: "La réponse a un type MIME non pris en charge"

Cette erreur vient du code dans bootstrap.js mais je ne suis pas tout à fait sûr de ce que cela signifie ou comment corriger cette erreur.

Pourquoi les choses fonctionnent-elles lors de la diffusion avec le serveur de développement Webpack mais pas après avoir tout regroupé?

7 commentaires

et hébergez directement les fichiers générés - comment les hébergez-vous? Regardez le type MIME des fichiers dans l'inspecteur de réseau de votre navigateur dans les deux cas; ils diffèrent vraisemblablement. Ensuite, découvrez pourquoi ils ne correspondent pas. Ensuite, découvrez comment les faire correspondre.

Pour la façon dont je les héberge, j'ai essayé à la fois un serveur simple express.js pour héberger statiquement le répertoire vers lequel le webpack exporte, ainsi que d'accéder aux fichiers directement via file: /// < / code>. J'obtiens la même erreur dans les deux cas.

Pour l'inspecteur de réseau, tout semble avoir réussi. Je ne sais pas exactement comment fonctionne Webpack, mais en réalité, il n'y a pas de fichiers index.js ou bootstrap.js . Il n'y a que bundle.js , 1.bundle.js et un fichier .module.wasm au nom apparemment aléatoire. Tous montrent qu'ils ont été acquis avec succès.

Je m'attendrais à ce que le transfert réseau se passe bien. Que disent les en-têtes de ces fichiers que les types MIME sont dans les cas où cela fonctionne et non?

Pour .js , le type de contenu est application / javascript , et pour le fichier module.wasm c'est application / octet-stream .

J'ai également trouvé que le chrome donne une erreur légèrement plus détaillée: TypeError: Impossible d'exécuter "compile" sur "WebAssembly": Type MIME de réponse incorrect. "Application / wasm" attendu

Je pense que cela peut suffire pour m'amener à la solution. Je donnerai une mise à jour si je peux faire fonctionner les choses à partir d'ici.

3 Réponses :

6
votes

Comme Shepmaster m'a aidé à comprendre dans les commentaires, le type MIME du fichier .wasm est défini sur application / octet-stream lorsque le navigateur s'attend à ce qu'il s'agisse de application / wasm .

J'utilise un simple express serveur pour héberger mes fichiers. Express peut être configuré pour utiliser le type MIME correct avec une seule ligne. 

var express = require('express');
var app = express();

// Set the MIME type explicitly
express.static.mime.define({'application/wasm': ['wasm']});

app.use(express.static('./dist'));

app.listen(3000);

Selon ce problème , express gérera correctement les fichiers .wasm après la version 4.17. Il fonctionne correctement dans le serveur de développement Webpack car ils ont implémenté leur propre solution de contournement pendant qu'ils attendez le correctif dans express.

0 commentaires
4
votes

J'ai eu un problème similaire ("La réponse a un type MIME non pris en charge") avec Flask. Le problème était que je n'avais pas d'itinéraire séparé vers le fichier .wasm . Par exemple: 

@app.route('/path/to/file.wasm')
def wasm_file():
    return send_file('/path/to/file.wasm', mimetype = 'application/wasm');

Ce n'est pas la réponse à cette question, mais c'est un indice pour d'autres personnes qui ont un problème similaire.

1 commentaires

Tout le mérite revient à l'utilisateur de la chaîne Discord Rust @Pauan

2
votes

J'ai également rencontré ce problème, ce qui m'a amené à modifier mon fichier .htaccess (j'utilise Apache pour héberger mon serveur local) pour inclure les éléments suivants: Application AddType / wasm wasm

Si l'erreur persiste et que vous obtenez cette erreur en utilisant WebAssembly.instantiateStreaming , cette question connexe peut avoir une explication et une solution de contournement: WebAssembly InstantiateStreaming Mauvais type MIME

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO