js-plugin-nft-storage issues with React Native

[Michaelsulistio]

I'm trying to use NFT.storage as the Storage Provider plugin for Metaplex and running into dependency issues. I want to rely on the metaplex-auth scheme so I'm not passing any API token.

Code:
Attempting to use nftStorage() when instantiating my Metaplex instance.

    return Metaplex.make(connection)
      .use(mobileWalletAdapterIdentity(selectedAccount, authorizeSession))
      .use(nftStorage()); // This causes the error.

Error:
Results in this error

error: Error: Unable to resolve module ipfs-car/blockstore/fs from /Users/mikesulistio/Documents/sms/tutorial-apps/MobileNFTMinter/node_modules/nft.storage/dist/src/lib.cjs: ipfs-car/blockstore/fs could not be found within the project or in these directories:
  node_modules/nft.storage/node_modules
  node_modules
  14 | require('@web-std/blob');
  15 | var file = require('@web-std/file');
> 16 | var fs = require('ipfs-car/blockstore/fs');
     |                   ^
  17 | var gateway = require('./gateway.cjs');
  18 | var bsCarReader = require('./bs-car-reader.cjs');
  19 | var pipe = require('it-pipe');

What I've tried
I dug into the nft.storage module and found that ipfs-car/blockstore/fs relies on the node library fs which isn't available on non-Node environments. But, I saw that this plugin should be compatible on browser(?) which also doesn't have fs so I'm confused.

Question

• Is this plugin expected to only work in Node environments?
• Is this plugin expected to work in Browser environments?
• React Native environment?

[steveluscher]

Yeah, ipfs-car seems to presume that it's running in Node.

https://github.com/web3-storage/ipfs-car/blob/fdc46f5b87bc54209bb352f42797471f0db85e3a/src/blockstore/fs.ts#L1C8-L1C10

Maybe Metaplex should create a fork of this that's essentially a noop, and build a browser/native bundle with it?

js/packages/js-plugin-nft-storage/src/BlockstoreCarReader.ts

Lines 1 to 49 in 281403c

	import type { Blockstore } from 'ipfs-car/blockstore';
	import type { CID } from 'multiformats';
	/**
	* An implementation of the CAR reader interface that is backed by a blockstore.
	* @see https://github.com/nftstorage/nft.storage/blob/0fc7e4e73867c437eac54f75f58a808dd4581c47/packages/client/src/bs-car-reader.js
	*/
	export class BlockstoreCarReader {
	_version: number;
	_roots: CID[];
	_blockstore: Blockstore;
	constructor(roots: CID[], blockstore: Blockstore, version = 1) {
	this._version = version;
	this._roots = roots;
	this._blockstore = blockstore;
	}
	get version() {
	return this._version;
	}
	get blockstore() {
	return this._blockstore;
	}
	async getRoots() {
	return this._roots;
	}
	has(cid: CID) {
	return this._blockstore.has(cid);
	}
	async get(cid: CID) {
	const bytes = await this._blockstore.get(cid);
	return { cid, bytes };
	}
	blocks(): ReturnType<Blockstore['blocks']> {
	return this._blockstore.blocks();
	}
	async *cids() {
	for await (const b of this.blocks()) {
	yield b.cid;
	}
	}
	}

[lorisleiva]

Hi there,

Could you try to provide a token to the NFT.Storage plugin and see if you get the same error?

They warned us recently that they were going to disable the Metaplex authenticator as people were abusing it. I recently had a similar issue and was getting lots of weird module errors and it turns out it was just because of that, so worth double checking.

[Michaelsulistio]

Hey @lorisleiva,

Just tested, its still happening even with the a token provided. This should be unrelated to the Metaplex-auth endpoint change, as this happens at build/bundle time before we've even executed any uploads. The root cause is the reliance on a node library.

Something similar also happens when trying to use budnlrStorage()

I ended up getting around this just by sending raw HTTP requests to NFT.storage endpoint rather than trying to use it as a Metaplexstorage provider plugin! Although, it would be nice if nftStorage and bundlrStorage worked right out the box for react native :)

[lorisleiva]

Hi there, thanks for confirming this was not the issue.

I'm going to pay more attention to React Native environments going forward on our Umi-compatible libraries. However, please note that the JS SDK is no longer the recommended way to use Metaplex's products and therefore updates for these plugins are not planned.

Regarding NFT.Storage, they have announced a brand new client API recently so I should be re-creating the NFT.Storage Umi plugin as soon as I can.

[joenoon]

JS SDK is no longer the recommended way

@lorisleiva can you expand on this?

[lorisleiva]

@joenoon Hi, I mean this repository/package is gradually being replaced with our new Umi framework and the various Umi-compatible libraries such as Mpl Toolbox and Mpl Token Metadata.