Почему я получаю сообщение об ошибке «Ответ имеет неподдерживаемый тип MIME» после объединения WASM, а не при работе с сервером webpack dev?

Question

Я пытаюсь создать проект Rust WebAssembly и изменил rust-webpack-template в качестве отправной точки. Шаблон представляет собой проект веб-пакета с файлом JavaScript, который вызывает одну функцию WASM, и Rust WASM вступает во владение.

Я изменил шаблон, потому что хотел бы, чтобы моя основная логика была в JavaScript, и вызывал Rust WASM через API.

Я изменил запись в веб-пакете на bootstrap.js, показанный ниже.

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

Я добавил файл index.js, и он вызывает функции Rust WASM

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

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

title.innerText = wasm.get_msg();

Функция get_msg от Rust выглядит так:

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

Когда я запускаю проект, используя webpack-dev-server -d, все работает нормально.

Однако, когда я собираю проект с использованием webpack и пытаюсь разместить сгенерированные файлы напрямую, ничего не отображается, а консоль браузера отображает ошибку:

Ошибка импорта 'index.js': TypeError: "Ответ имеет неподдерживаемый тип MIME"

Эта ошибка происходит из кода в bootstrap.js, но я не совсем уверен, что это значит или как исправить эту ошибку.

Почему все работает при обслуживании с сервером webpack, а не после объединения всего вместе?

Answer 1

Поскольку Shepmaster помог мне выяснить в комментариях, тип MIME файла .wasm устанавливается на application/octet-stream, когда браузер ожидает, что он будет application/wasm.

Я использую простой экспресс сервер для размещения моих файлов. Express можно настроить для использования правильного типа MIME с одной строкой.

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);

В соответствии с этой проблемой express будет корректно обрабатывать файлы .wasm после версии 4.17. Он корректно работает на сервере веб-пакетов, потому что они внедрили собственный обходной путь , ожидая исправления в экспрессе.