i am trying to use mesh in my react web3 application but i am not able to something wrong with wasm
opened this issue · comments
Hello. I had a similar issue when using a create react app that uses webpack 5.
I solved the import issues with the following craco config; maybe this helps. I also installed the Buffer libaray separately by running npm i --save-dev buffer
.
module.exports = {
webpack: {
configure: config => {
const wasmExtensionRegExp = /\.wasm$/
config.resolve.extensions.push('.wasm')
config.experiments = {
syncWebAssembly: true,
asyncWebAssembly: true,
}
config.module.rules.forEach(rule => {
;(rule.oneOf || []).forEach(oneOf => {
if (oneOf.type === 'asset/resource') {
oneOf.exclude.push(wasmExtensionRegExp)
}
})
})
return config
},
},
}
Many thanks to @ggcaponetto for their answer but I stilled faced the issue in a CRA app, replaced react-scripts
with craco
and used this craco.config.js
.
const webpack = require('webpack');
module.exports = {
webpack: {
configure: (config) => {
const wasmExtensionRegExp = /\.wasm$/;
config.resolve.extensions.push('.wasm');
config.resolve.fallback = {
...config.resolve.fallback,
buffer: require.resolve('buffer'),
stream: require.resolve('stream'),
};
config.plugins = [
...config.plugins,
new webpack.ProvidePlugin({
Buffer: ['buffer', 'Buffer'],
}),
];
config.experiments = {
syncWebAssembly: true,
asyncWebAssembly: true,
};
for (const rule of config.module.rules) {
for (const oneOf of (rule.oneOf || [])) {
if (oneOf.type === 'asset/resource') {
oneOf.exclude.push(wasmExtensionRegExp);
}
}
}
return config;
},
},
};