i am trying to use mesh in my react web3 application but i am not able to something wrong with wasm

[meshjs]

i am trying to use mesh in my react web3 application but i am not able to something wrong with wasm

[ggcaponetto]

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
        },
    },
}

[huzaifa-99]

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;
    },
  },
};