Cannot find module 'crypto' when using metaplex js sdk to upload metadata

Question

Hi all I am experiencing an error finding the crypto module while attempting to upload NFT Metadata using the metaplex js sdk and bundlrStorage in react native with the following typescript code:

await currentMetaplex
      .nfts()
      .uploadMetadata(nftMetadata);

This method worked in a regular react app and have tried installing and using the "crypto", "crypto-browserify", "react-native-crypto-js", and "crypto-js" modules as well as polyfilling following the directions in the metaplex react cra5 example without success. As far as I can tell this is could be an issue with polyfills or the fact that I am using expo but am new to react native and out of ideas on what else I can try.

Has anyone else experienced this error or have any idea on how to fix?

Answer 1

You could try adding this to your config.js:

  webpack: (config) => {
    config.resolve.fallback = { crypto: false }

    return config
  },

I had a similar problem recently with fs in next.js and this fixed it. Not sure if react native is webpack so maybe try one of the options here: https://stackoverflow.com/questions/54162297/module-not-found-error-cant-resolve-crypto

Answer 2

please try this in config-override.js

const webpack = require('webpack');

module.exports = function override(config) {
    const fallback = config.resolve.fallback || {};
    Object.assign(fallback, {
        "crypto": require.resolve("crypto-browserify"),
        "stream": require.resolve("stream-browserify"),
        "assert": require.resolve("assert"),
        "http": require.resolve("stream-http"),
        "https": require.resolve("https-browserify"),
        "os": require.resolve("os-browserify"),
        "url": require.resolve("url"),
        "zlib" : require.resolve("browserify-zlib"),
    })
    config.resolve.fallback = fallback;
    config.plugins = (config.plugins || []).concat([
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer']
        })
    ])
    return config;
}