createUmi causes error in browser

[ethan-tqa]

I am using SvelteKit. Just a basic SvelteKit template is good enough for reproducing this issue.
If the line of import below appears in the +page.svelte file, it will cause error.

import { createUmi } from '@metaplex-foundation/umi-bundle-defaults';

The error

TypeError: import_os.homedir is not a function

It can be traced back to SolanaCliConfig from @soceanfi/solana-cli-config imported by umi-addsa-web3js. I don't understand why SolanaCliConfig is needed for a client side library or why it is being included in the client side code.

[ethan-tqa]

The change can be traced to this commit f3d99c8.

[everythingspirals]

Experiencing the same issue

[ethan-tqa]

@everythingspirals here is my temporary solution:

• Copy & paste createWeb3JsEddsa to my own code and stub out the 2 functions: createKeypairFromFile, createKeypairFromSolanaConfig.
• Copy & paste createUmi to my own code and use my custom createWeb3JsEddsa above.

The library should have just accept Uint8Array keypair and leave the loading key from file to the library user.

[beeman]

One way to get around this issue is by instructing the bundler of your frontend to add polyfills for the native Node packages like os.

Here you can see an example of how I did this with a project that's using vite.

[myx0m0p]

this bug should be breaking, its impossible to build vite project with 1.x umi

[silvestrevivo]

I am having the same issue using SvelteKit2 and Svelte5. Any solution for this? @beeman I've used your solution, that is working fine in localhost, but when I trigger npm run build I get the error Module "fs" has been externalized for browser compatibility

Do you get the same? Any suggestion about how to solve it? Thanks!!

[beeman]

I am having the same issue using SvelteKit2 and Svelte5. Any solution for this? @beeman I've used your solution, that is working fine in localhost, but when I trigger npm run build I get the error Module "fs" has been externalized for browser compatibility

Do you get the same? Any suggestion about how to solve it? Thanks!!

Happy to take a look if you can share a reproduction.

[beeman]

I am having the same issue using SvelteKit2 and Svelte5. Any solution for this? @beeman I've used your solution, that is working fine in localhost, but when I trigger npm run build I get the error Module "fs" has been externalized for browser compatibility

Do you get the same? Any suggestion about how to solve it? Thanks!!

I think I found your issue (but not 100% sure).

You probably need to use memfs to property polyfill fs during build.

This should make it work:

1. Install the vite-plugin-node-polyfills and memfs dev dependencies to your project.
2. In your vite.config.ts, call the nodePolyfills function like so: nodePolyfills({ overrides: { fs: 'memfs' } })
3. The dev and build commands should now work as expected.

To test this out with various frameworks, I created a repo with metaplex-umi-starters, currently featuring React, Svelte, and Vue. I included commands to quickly spin up new projects using create-solana-dapp.

If someone would like to see more examples, feel free to open an issue on that repo!

[silvestrevivo]

@beeman thank you so much!! this works totally fine, even with other Solana packages. I see in the last time the Sveltekit config doesn't need to be so complicated like years ago to work with web3. :)

[tonyboylehub]

I'm having a look into this over the weekend for you all :)

[zwifta]

Any solutions for webpack ?

[beeman]

Any solutions for webpack ?

If you can share a repo that shows the issues I'm happy to take a look

[tonyboylehub]

Any solutions for webpack ?

Can you open a new issue regarding this if there is one. Thanks :)

[aek676]

I'm using the template Metaplex-nextjs-tailwind and I'm having the same issue: Module not found: Can't resolve 'fs'
This is my code to Upload a File:

import { createGenericFile } from "@metaplex-foundation/umi";
import umiWithCurrentWalletAdapter from "./umiWithCurrentWalletAdapter";
import { createBundlrUploader } from "@metaplex-foundation/umi-uploader-bundlr";
import { createIrysUploader } from "@metaplex-foundation/umi-uploader-irys";

const umiUploadFile = async (file: File) => {
  try {
    const myAbortSignal = new AbortController().signal;
    const umi = umiWithCurrentWalletAdapter();

    console.log(`Umi: ${umi.payer.publicKey}`);

    const uploader = createIrysUploader(umi);

    const fileBuffer = await file.arrayBuffer();
    const fileUmi = createGenericFile(new Uint8Array(fileBuffer), file.name, {
      contentType: file.type,
    });

    console.log(`FileUmi: ${fileUmi.fileName}`);

    const myUris = await uploader.upload([fileUmi], {
      signal: myAbortSignal,
      onProgress: (percent) => {
        console.log(`${percent * 100}% uploaded...`);
      },
    });

    console.log(`Uploaded to: ${myUris[0]}`);
  } catch (error) {
    console.error("Error al subir el archivo:", error);
  }
};

export default umiUploadFile;

Can anyone help me? I've had this for 3 days