-
Notifications
You must be signed in to change notification settings - Fork 74
Description
Issue Summary
The @metaplex-foundation/umi-uploader-irys package is not compatible with Next.js client components (marked with 'use client'). When using this package in a client component, the build fails due to the package trying to use Node.js-specific modules that aren't available in the browser environment.
(The code works perfectly fine in local development (using next dev) but fails when doing a production build (next build or deploying to Vercel).)
Environment
- Next.js: 15.1.5
- React: 19.0.0
- @metaplex-foundation/umi: 1.0.0
- @metaplex-foundation/umi-uploader-irys: 1.2.0
- @solana/web3.js: 1.98.0
Error Messages
When attempting to build a Next.js project using the Irys uploader, the following errors are encountered:
▲ Failed to compile.
▲ ./node_modules/external-editor/main/index.js
▲ Module not found: Can't resolve 'child_process'
▲
▲ https://nextjs.org/docs/messages/module-not-found
▲
▲ Import trace for requested module:
▲ ./node_modules/inquirer/lib/prompts/editor.js
▲ ./node_modules/inquirer/lib/inquirer.js
▲ ./node_modules/@irys/upload/dist/esm/upload.js
▲ ./node_modules/@irys/upload/dist/esm/base.js
▲ ./node_modules/@irys/upload/dist/esm/builder.js
▲ ./node_modules/@irys/upload/dist/esm/index.js
▲ ./node_modules/@metaplex-foundation/umi-uploader-irys/dist/esm/createIrysUploader.mjs
▲ ./node_modules/@metaplex-foundation/umi-uploader-irys/dist/esm/index.mjs
▲ ./src/app/page.tsx
▲
▲ ./node_modules/@irys/arweave/build/esm/node/stream/index.js
▲ Module not found: Can't resolve 'stream/promises'
...
and additional similar errors.
Steps to Reproduce
- Create a Next.js project with client components (marked with
'use client') - Install @metaplex-foundation/umi and @metaplex-foundation/umi-uploader-irys
- Configure Umi with the Irys uploader in a client component:
const umiRef = useRef(createUmi('https://api.devnet.solana.com').use(mplTokenMetadata()).use(irysUploader()));- Use the uploader in your component:
const file = createGenericFileFromJson(jsonObject, 'file.json');
const [dataUri] = await umi.uploader.upload([file]);- Attempt to build the project
Expected Behavior
The Umi Irys uploader should work in browser environments, particularly in Next.js client components, as Umi is described as a framework for building dApps.
Actual Behavior
The build fails because the Irys uploader is trying to use Node.js-specific modules like 'child_process' and 'stream/promises' which aren't available in browser environments.
Workaround
We had to revert to using the @irys/web-upload and @irys/web-upload-solana packages directly. This approach works correctly in the browser environment.
Question
Is there a browser-compatible version of the Irys uploader for Umi, or are there plans to make the current implementation compatible with browser environments? Alternatively, is there documentation that explains which uploaders should be used in which environments?