anchor provider depends on fs module

[mschneider]

Bundling the anchor package for usage inside a browser-based react app is currently causing build failures. These can be circumvented by configuring webpack, but I think this kind of solutions is far from ideal, as it increases the friction for a first time anchor user. What would we need to change, to prevent the following issue?

I am using roughly the following code to create a new Program inside a react app

import * as anchor from '@project-serum/anchor'
import poolIdl from '../idls/ido_pool'

const provider = new anchor.Provider(connection, wallet, anchor.Provider.defaultOptions())
const programId = new anchor.web3.PublicKey('E5s3D6B3PJinuB9kb3dicxfi3qUNLUGX6hoPawhbqagt')
const program = new anchor.Program(poolIdl, programId, provider);

This will result in the following error:

./node_modules/@project-serum/anchor/dist/esm/provider.js:87:0
Module not found: Can't resolve 'fs'
null

I found a common workaround for this issue in this stack overflow post: https://stackoverflow.com/questions/57161839/module-not-found-error-cant-resolve-fs-in

[armaniferrante]

Agreed this is undesireable and should be fixed.

[armaniferrante]

@mschneider it appears the line where fs is used is using the NodeWallet.local api, i.e.

        const payer = new Account(Buffer.from(JSON.parse(require("fs").readFileSync(require("os").homedir() + "/.config/solana/id.json", {
            encoding: "utf-8",
        }))));

Can you confirm how you are creating the wallet being used above? The NodeWallet should not be used in a browser environment. One should use sol-wallet-adapter or any javascript implementing the Wallet interface, i.e.,

export interface Wallet {
  signTransaction(tx: Transaction): Promise<Transaction>;
  signAllTransactions(txs: Transaction[]): Promise<Transaction[]>;
  publicKey: PublicKey;
}

[mschneider]

I’m using the sol wallet adapter and pass it in. I think the issue is that the built module does reference it not that a line of code is actually trying to execute it. I simply configured bundler to ignore those missing references

…

On Sat 8. May 2021 at 21:15, Armani Ferrante ***@***.***> wrote: @mschneider <https://github.com/mschneider> it appears the line where fs is used is using the NodeWallet.local api, i.e. const payer = new Account(Buffer.from(JSON.parse(require("fs").readFileSync(require("os").homedir() + "/.config/solana/id.json", { encoding: "utf-8", })))); Can you confirm how you are creating the wallet being used above? The NodeWallet should not be used in a browser environment. One should use sol-wallet-adapter or any javascript implementing the Wallet interface, i.e., export interface Wallet { signTransaction(tx: Transaction): Promise<Transaction>; signAllTransactions(txs: Transaction[]): Promise<Transaction[]>; publicKey: PublicKey; } — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#244 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABDF7DBNUFGWTAZRA65HQTTMV5SFANCNFSM44EQWWMA> .

[armaniferrante]

Sounds like the solution here is to either move the node wallet out of the main @project-serum/anchor package. Or to add a build step, e.g., via rollup, that stubs out fs for browser builds.

[johnrees]

Does #436 close this @armaniferrante?

[armaniferrante]

Does #436 close this @armaniferrante?

I suspect it does but I haven't reproduced this issue to confirm.

[fanatid]

I did not test but I think that isBrowser in #436 does not fix the issue. Field browser in package.json for workspaces / NodeWallet should help to resolve issue 🤔

[johnrees]

I think it should fix the fs issue for now? but i'll leave it to you guys to resolve.

Very basic demo of anchor being loaded in React without errors here - https://codesandbox.io/s/floral-star-3sk2w?file=/src/App.tsx

[armaniferrante]

I think it should fix the fs issue for now? but i'll leave it to you guys to resolve.

Very basic demo of anchor being loaded in React without errors here - https://codesandbox.io/s/floral-star-3sk2w?file=/src/App.tsx

Looks resolved to me based on this code sandbox.

Please re-open if it's still an issue.

[woniesong92]

I can't repro it on sandbox for some reason but this is still causing an exception for me. Does this line have to be gated behind isBrowser too? @armaniferrante

[Hossman333]

Hmmm, I'm hitting this problem as well @woniesong92. 🤔

[Hossman333]

Wondering what you did to work around it @woniesong92? That's the line that has issues for me too.

[Hossman333]

Because I'm using next.js which uses webpack, I simply added this in my next.config.js

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback.fs = false;
    }
    return config;
  },
}

It'll work around it. 😃 Hopefully this helps someone!

[lsbyerley]

I am still seeing issues around the fs module in nextjs even with the above webpack config change. However the error is now pointing to readFileSync

TypeError: __webpack_require__(...).readFileSync is not a function

pointing to this line: https://github.com/project-serum/anchor/blob/cfba251fc4cb366adcd4ad48eefee2201d7448c5/ts/src/provider.ts#L236

[vpontis]

I created a minimal repro repo for Next.js here: https://github.com/vpontis/anchor-next-fs-issue/tree/176a7f4a6f8f970097aec1ce3f8868cdde1bda3d

Next.js is a pretty popular React framework and I think Anchor would benefit from working well with Next.js since it would make Solana beginner-friendly.

Also, the webpack work around mentioned above is not ideal since that means Anchor and Next.js can't work with each other out of the box.

@armaniferrante, any chance we can re-open this issue? I can look into how we can remove the fs dependency later today / tomorrow :)

[armaniferrante]

@vpontis would be awesome if you took a look at this.

[torquan]

I receive this error with React / Gatsby.js:

Not sure if it is related? If so, I can also provide a repro repo.

[AlexStefan]

the workaround from above works for the dev run, but fails for the prod build. Do you guys have suggestions on how to fix that?

[dragochar]

I receive this error with React / Gatsby.js:

Not sure if it is related? If so, I can also provide a repro repo.

Yep still getting this too