React.jsでmediainfo.js(WebAssembly)を使用したい

Question

mediainfo.jsというnpmパッケージを、React.jsで使用しようとしております。

https://github.com/buzz/mediainfo.js
上記サイトのReact.jsでの使用例をみると、webpack.config.jsにて設定しています。
ですが、create-react-appを用いて環境構築すると、それが内部にラップされ、ejectしないと編集できない様です。

react-app-rewiredというnpmパッケージを用いると、ejectしなくてもwebpack.configを編集できるとの事なので、やってみました。

// config-override.js (webpack.config.jsを上書きするもの)

const { resolve } = require('path');
const CopyPlugin = require('copy-webpack-plugin');

const wasmFile = resolve(
  __dirname,
  'node_modules',
  'mediainfo.js',
  'dist'
);
const dist = resolve('build', 'static', 'js');

// template from https://www.npmjs.com/package/react-app-rewired
module.exports = {
  webpack: function(config, env) {
    config.plugins.push(new CopyPlugin({
      patterns: [
        { from: wasmFile, to: dist },
      ],
    }),)
    return config;
  },
}

こちらがプロジェクト全体です。
https://github.com/ottonove/test_mediainfo

"npm run build"で生成されたものは正常に動作するのですが、"npm run start"で動作させると、下記のエラーとなります。

Unhandled Rejection (RuntimeError): abort(CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0). Build with -s ASSERTIONS=1 for more info.

下記の警告も出ております。

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

どの様に設定すると、"npm run start"でも動作する様になるのでしょうか？

ご教授頂けると幸いです。

Answer 1

こちらの記事を参考に、WebWorkerを使用したところ、動作するようになりました。
wasm-pack + WebWorker + react-scripts - Qiita

// config-override.js

const path = require("path");
const { resolve } = require('path');
const CopyPlugin = require('copy-webpack-plugin');

const devMode = process.env.NODE_ENV !== 'production'

const wasmFile = resolve(
  __dirname,
  'node_modules',
  'mediainfo.js',
  'dist',
  'MediaInfoModule.wasm'
);

const dist = devMode ? '.' : resolve(__dirname);

module.exports = function override(config, env) {
  config.module.rules.push({
    test: /.worker.js$/,
    use: { loader: "workerize-loader" },
  });

  const wasmExtensionRegExp = /.wasm$/;

  config.resolve.extensions.push(".wasm");

  config.module.rules.forEach((rule) => {
    (rule.oneOf || []).forEach((oneOf) => {
      if (oneOf.loader && oneOf.loader.indexOf("file-loader") >= 0) {
        // Make file-loader ignore WASM files
        oneOf.exclude.push(wasmExtensionRegExp);
      }
    });
  });

  config.module.rules.push({
    test: wasmExtensionRegExp,
    include: path.resolve(__dirname, "src"),
    use: [{ loader: require.resolve("wasm-loader"), options: {} }],
  });

  config.plugins.push(new CopyPlugin({
    patterns: [
      { from: wasmFile, to: dist },
    ],
  }),)
      
  return config;
};

プロジェクト全体はこちらです。
https://github.com/ottonove/test_mediainfo/blob/webworker/config-overrides.js