React Native - This package itself specifies a main module field that could not be resolved

[prajwolrg]

I am trying to implement use web3storage with the react-native application to easily upload file in IPFS. I successfully installed web3.storage with npm i web3.storage When I try to import inside my file with import { Web3Storage, getFilesFromPath } from 'web3.storage', I get the following error: While trying to resolve module web3.storage from file /home/prajwolrg/School/Vaccination/vaccine_frontend/app/pages/UserSetupImage.js, the package /home/prajwolrg/School/Vaccination/vaccine_frontend/node_modules/nft.storage/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/home/prajwolrg/School/Vaccination/vaccine_frontend/node_modules/nft.storage/dist/src/lib.cjs.

[buildgreatthings]

I'd like to see a fix for this too. Similar to issue #889

[LeslieOA]

@prajwolrg Heya. Thankfully the issue you're experiencing has a quick fix: add cjs and mjs to metro.config.js's module resolution section (as both NFT and Web3.Storage are CommonJS modules). If you don't have this file or are using Expo, here it is in full:

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {
    sourceExts: ['jsx', 'js', 'ts', 'tsx', 'cjs', 'mjs'], // added 'cjs' and 'mjs'
  },
};

Sadly, you will now see other module resolution issues (e.g. Unable to resolve module ipfs-car/pack). Your mileage may vary. Let me know what you encounter next.

CC @awcchungster

[prajwolrg]

@LeslieOA Thanks for the help. I tried the solution but it creates more problems than solutions in my case.

[ZemoApp]

Running into the same issues.

Any recommendations on how to get Web3.storage working with React Native?

[leobragaz]

Hi, any news for this one?