魔术 header 未检测到文件已使用这些加载程序处理：*./node_modules/wasm-loader/index.js

Question

I have issue using webassembly wasm file in React with Typescript.

I have install react-app-rewired and wasm-loader and my config-overrides.js:

const path = require('path');

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

  return config;
};

in package json I change to use "start": "react-app-rewired start", but still have the same error. How can solve this issue? Thank you!

Answer 1

"magic header not detected" indicates that your .wasm file is not really a .wasm file. Can you verify that it is a valid file using wasm-objdump ?