Error: magic header not detected

[codepiyush]

I am using monaco-editor-textmate with react js using create react app. But I am getting the following error:

./src/onigasm.wasm
Module parse failed: magic header not detected
File was processed with these loaders:
* ./node_modules/wasm-loader/index.js
You may need an additional loader to handle the result of these loaders.
Error: magic header not detected

I used react-app-rewired to overwrite my config and used this article to configure webpack and CRA to work together. My config override file looks like this: -

const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
const path  = require('path')

module.exports = function override(config, env) {
  console.log(config);
  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);
      }
    });
  });

  // add a dedicated loader for WASM
  config.module.rules.push({
    test: wasmExtensionRegExp,
    include: path.resolve(__dirname, "src"),
    use: [{ loader: require.resolve("wasm-loader"), options: {} }],
  });
  config.plugins.push(
    new MonacoWebpackPlugin({
      languages: ["javascript"],
    })
  );
  return config;
};

I have given path for loading wasm to ../node_modules/onigasm/lib/onigasm.wasm

[zm-cttae]

I hacked past this error using encoded-uint8array-loader as my loader. It's sucky but works.