Can't upload metadata to bundlrStorage with upload() and uploadMetadata().
Vondert opened this issue · comments
I am trying to upload image and metadata with bundlr. In node js environment this code is working, but in react vite typescript app I am getting this error:
TypeError: this._stream.destroy is not a function
at StreamToAsyncIterator.close (s2ai.ts:213:22)
at StreamToAsyncIterator.next (s2ai.ts:106:22)
at StreamToAsyncIterator.next (s2ai.ts:128:33)
at async deepHash (deepHash.ts:20:22)
at async deepHashChunks (deepHash.ts:73:5)
at async deepHashChunks (deepHash.ts:76:10)
at async deepHashChunks (deepHash.ts:76:10)
at async deepHashChunks (deepHash.ts:76:10)
at async deepHashChunks (deepHash.ts:76:10)
at async deepHashChunks (deepHash.ts:76:10)
Files mentioned in error are from node_modules @Bundlr-Network and arbundles
Here is the code:
const METAPLEX = Metaplex.make(provider.connection)
.use(walletAdapterIdentityMeta(wallet))
.use(bundlrStorage({
address: 'https://devnet.bundlr.network',
providerUrl: "https://api.devnet.solana.com",
timeout: 60000,
}));
const imgMetaplexFile = await toMetaplexFileFromBrowser(selectedFile as File);
console.log(imgMetaplexFile);
//Error on next string
const imgUri = await METAPLEX.storage().upload(imgMetaplexFile);
console.log(imgUri);
vite.config.js from (https://github.com/metaplex-foundation/js-examples/tree/main/getting-started-vite)
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
import nodePolyfills from 'rollup-plugin-node-polyfills';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
stream: 'rollup-plugin-node-polyfills/polyfills/stream',
events: 'rollup-plugin-node-polyfills/polyfills/events',
assert: 'assert',
crypto: 'crypto-browserify',
util: 'util',
'near-api-js': 'near-api-js/dist/near-api-js.js',
},
},
define: {
'process.env': process.env ?? {},
global: 'window',
},
build: {
target: 'esnext',
rollupOptions: {
plugins: [
nodePolyfills({ crypto: true }),
],
},
},
optimizeDeps: {
esbuildOptions: {
plugins: [
NodeGlobalsPolyfillPlugin({ buffer: true }),
],
}
},
});
package.json dependecies
"dependencies": {
"@coral-xyz/anchor": "^0.29.0",
"@esbuild-plugins/node-globals-polyfill": "^0.2.3",
"@metaplex-foundation/js": "^0.19.5",
"@metaplex-foundation/mpl-token-metadata": "^3.1.0",
"@metaplex-foundation/umi": "^0.8.9",
"@metaplex-foundation/umi-bundle-defaults": "^0.8.9",
"@metaplex-foundation/umi-signer-wallet-adapters": "^0.8.9",
"@solana/spl-token": "^0.3.8",
"@solana/wallet-adapter-react": "^0.15.35",
"@solana/wallet-adapter-react-ui": "^0.9.34",
"@solana/wallet-adapter-wallets": "^0.19.23",
"assert": "^2.1.0",
"crypto-browserify": "^3.12.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rollup-plugin-node-polyfills": "^0.2.1",
"util": "^0.12.5"
},
"devDependencies": {
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"@vitejs/plugin-react": "^4.0.3",
"eslint": "^8.45.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"typescript": "^5.0.2",
"vite": "^4.4.5"
}
Fixed by changing rollup-plugin-node-polyfills
to vite-plugin-node-polyfills
And updating vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { nodePolyfills } from 'vite-plugin-node-polyfills'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
nodePolyfills(),
],
})