Skip to content

@metaplex-foundation/umi-uploader-irys Not Compatible with Next.js Client Components #173

@AZhe-X

Description

@AZhe-X

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

  1. Create a Next.js project with client components (marked with 'use client')
  2. Install @metaplex-foundation/umi and @metaplex-foundation/umi-uploader-irys
  3. Configure Umi with the Irys uploader in a client component:
const umiRef = useRef(createUmi('https://api.devnet.solana.com').use(mplTokenMetadata()).use(irysUploader()));
  1. Use the uploader in your component:
const file = createGenericFileFromJson(jsonObject, 'file.json');
const [dataUri] = await umi.uploader.upload([file]);
  1. 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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions