customize-cra icon indicating copy to clipboard operation
customize-cra copied to clipboard

Loading wasm?

Open onionhammer opened this issue 4 years ago • 1 comments

Has anyone experimented with loading a wasm file in React using customize-cra? It would be a useful sample I think; assuming it's doable

onionhammer avatar Feb 28 '20 19:02 onionhammer

Has anyone experimented with loading a wasm file in React using customize-cra? It would be a useful sample I think; assuming it's doable

Hi,You should need this

config-overrides.js

const path = require("path"); const { override, fixBabelImports, addLessLoader } = require("customize-cra"); module.exports = override( fixBabelImports("import", { libraryName: "antd", libraryDirectory: "es", style: "css" }), addLessLoader({ javascriptEnabled: true, modifyVars: { "@primary-color": "#1DA57A" } }), 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) { 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;

} );

HelloRickey avatar Apr 04 '20 14:04 HelloRickey