Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Module not found: Can't resolve 'fs' #1262

Open
yudhomax opened this issue Nov 29, 2024 · 1 comment
Open

Module not found: Can't resolve 'fs' #1262

yudhomax opened this issue Nov 29, 2024 · 1 comment
Labels
bug Something isn't working Emerging Tech Emerging Tech flying formation at Pagoda

Comments

@yudhomax
Copy link

yudhomax commented Nov 29, 2024

i am trying to integrate wallet selector in nextjs app router with version "next": "15.0.3",

my wallet selector provider code like this

import { setupCoin98Wallet } from '@near-wallet-selector/coin98-wallet';
import type {
AccountState,
InjectedWalletBehaviour,
WalletSelector,
} from '@near-wallet-selector/core';
import { setupWalletSelector } from '@near-wallet-selector/core';
import { setupHereWallet } from '@near-wallet-selector/here-wallet';
import { setupMathWallet } from '@near-wallet-selector/math-wallet';
import { setupMeteorWallet } from '@near-wallet-selector/meteor-wallet';
import { setupNarwallets } from '@near-wallet-selector/narwallets';
import type { WalletSelectorModal } from '@near-wallet-selector/modal-ui';
import { setupModal } from '@near-wallet-selector/modal-ui';
import { setupNearFi } from '@near-wallet-selector/nearfi';
import { setupNightly } from '@near-wallet-selector/nightly';
import { setupSender } from '@near-wallet-selector/sender';
import { setupBitgetWallet } from '@near-wallet-selector/bitget-wallet';
import { setupWalletConnect } from '@near-wallet-selector/wallet-connect';
import { setupWelldoneWallet } from '@near-wallet-selector/welldone-wallet';
import { setupNearSnap } from '@near-wallet-selector/near-snap';
import { setupNeth } from '@near-wallet-selector/neth';
import { setupMyNearWallet } from '@near-wallet-selector/my-near-wallet';
import { setupLedger } from '@near-wallet-selector/ledger';
import { setupXDEFI } from '@near-wallet-selector/xdefi';
import { setupRamperWallet } from '@near-wallet-selector/ramper-wallet';
import { setupNearMobileWallet } from '@near-wallet-selector/near-mobile-wallet';
import { setupMintbaseWallet } from '@near-wallet-selector/mintbase-wallet';
import { setupBitteWallet } from '@near-wallet-selector/bitte-wallet';
import { setupEthereumWallets } from '@near-wallet-selector/ethereum-wallets';

import type { ReactNode } from 'react';
import React, {
useCallback,
useContext,
useEffect,
useState,
useMemo,
} from 'react';
import { distinctUntilChanged, map } from 'rxjs';
import { watchAccount, type GetAccountReturnType } from '@wagmi/core';
import { wagmiConfig, web3Modal } from '@/utils/app/web3modal';
import Skeleton from '../skeleton/common/Skeleton';

declare global {
interface Window {
selector: WalletSelector;
modal: WalletSelectorModal;
}
}

interface WalletSelectorContextValue {
selector: WalletSelector;
modal: WalletSelectorModal;
accounts: Array;
accountId: string | null;
}

const WalletSelectorContext =
React.createContext<WalletSelectorContextValue | null>(null);

const CONTRACT_ID = '';

export const WalletSelectorContextProvider: React.FC<{
children: ReactNode;
}> = ({ children }) => {
const [selector, setSelector] = useState<WalletSelector | null>(null);
const [modal, setModal] = useState<WalletSelectorModal | null>(null);
const [accounts, setAccounts] = useState<Array>([]);
const [loading, setLoading] = useState(true);

// Log in with Ethereum flow: auto connect to ethereum-wallets without showing the NEAR modal.
useEffect(() => {
if (!selector) {
return;
}
// Watch the connected Ethereum account and connect to the ethereum-wallets module automatically.
watchAccount(wagmiConfig, {
onChange: (data: GetAccountReturnType) => {
if (!data.address || selector.store.getState().selectedWalletId) {
return;
}
selector.wallet('ethereum-wallets').then((wallet) =>
(wallet as InjectedWalletBehaviour).signIn({
contractId: CONTRACT_ID,
}),
);
},
});
}, [selector]);

const init = useCallback(async () => {
const _selector = await setupWalletSelector({
network: 'testnet',
debug: true,
modules: [
setupMyNearWallet(),
setupLedger(),
setupSender(),
setupBitgetWallet(),
setupMathWallet(),
setupNightly(),
setupMeteorWallet(),
setupNearSnap(),
setupNarwallets(),
setupWelldoneWallet(),
setupHereWallet(),
setupCoin98Wallet(),
setupNearFi(),
setupRamperWallet(),
setupNeth({
gas: '300000000000000',
bundle: false,
}),
setupXDEFI(),
setupWalletConnect({
projectId: 'c4f79cc...',
metadata: {
name: 'NEAR Wallet Selector',
description: 'Example dApp used by NEAR Wallet Selector',
url: 'https://github.com/near/wallet-selector',
icons: ['https://avatars.githubusercontent.com/u/37784886'],
},
}),
setupNearMobileWallet(),
setupMintbaseWallet({ contractId: CONTRACT_ID }),
setupBitteWallet({ contractId: CONTRACT_ID }),
setupEthereumWallets({
wagmiConfig: wagmiConfig as any,
web3Modal: web3Modal as any,
}),
],
});
const _modal = setupModal(_selector, {
contractId: CONTRACT_ID,
});
const state = _selector.store.getState();
setAccounts(state.accounts);

// this is added for debugging purpose only
// for more information (https://github.com/near/wallet-selector/pull/764#issuecomment-1498073367)
window.selector = _selector;
window.modal = _modal;

setSelector(_selector);
setModal(_modal);
setLoading(false);

}, []);

useEffect(() => {
init().catch((err) => {
console.error(err);
alert('Failed to initialise wallet selector');
});
}, [init]);

useEffect(() => {
if (!selector) {
return;
}

const subscription = selector.store.observable
  .pipe(
    map((state) => state.accounts),
    distinctUntilChanged(),
  )
  .subscribe((nextAccounts) => {
    console.log('Accounts Update', nextAccounts);

    setAccounts(nextAccounts);
  });

const onHideSubscription = modal!.on('onHide', ({ hideReason }) => {
  console.log(`The reason for hiding the modal ${hideReason}`);
});

return () => {
  subscription.unsubscribe();
  onHideSubscription.remove();
};

}, [selector, modal]);

const walletSelectorContextValue = useMemo(
() => ({
selector: selector!,
modal: modal!,
accounts,
accountId: accounts.find((account) => account.active)?.accountId || null,
}),
[selector, modal, accounts],
);

if (loading) {
return ;
}

return (
<WalletSelectorContext.Provider value={walletSelectorContextValue}>
{children}
</WalletSelectorContext.Provider>
);
};

export function useWalletSelector() {
const context = useContext(WalletSelectorContext);

if (!context) {
throw new Error(
'useWalletSelector must be used within a WalletSelectorContextProvider',
);
}

return context;
}

This is my package.json

"dependencies": {
"@aws-sdk/client-ses": "^3.651.1",
"@braintree/sanitize-url": "7.0.1",
"@marsidev/react-turnstile": "1.0.2",
"@near-js/providers": "^1.0.1",
"@near-wallet-selector/bitget-wallet": "8.9.13",
"@near-wallet-selector/bitte-wallet": "8.9.13",
"@near-wallet-selector/coin98-wallet": "8.9.13",
"@near-wallet-selector/core": "8.9.13",
"@near-wallet-selector/ethereum-wallets": "^8.9.14",
"@near-wallet-selector/here-wallet": "8.9.13",
"@near-wallet-selector/ledger": "8.9.13",
"@near-wallet-selector/math-wallet": "8.9.13",
"@near-wallet-selector/meteor-wallet": "8.9.13",
"@near-wallet-selector/mintbase-wallet": "8.9.13",
"@near-wallet-selector/modal-ui": "8.9.13",
"@near-wallet-selector/my-near-wallet": "8.9.13",
"@near-wallet-selector/narwallets": "8.9.13",
"@near-wallet-selector/near-mobile-wallet": "8.9.13",
"@near-wallet-selector/near-snap": "8.9.13",
"@near-wallet-selector/nearfi": "8.9.13",
"@near-wallet-selector/neth": "8.9.13",
"@near-wallet-selector/nightly": "8.9.13",
"@near-wallet-selector/ramper-wallet": "8.9.13",
"@near-wallet-selector/sender": "8.9.13",
"@near-wallet-selector/wallet-connect": "8.9.13",
"@near-wallet-selector/welldone-wallet": "8.9.13",
"@near-wallet-selector/xdefi": "8.9.13",
"@opentelemetry/api-logs": "^0.54.2",
"@opentelemetry/instrumentation": "^0.54.2",
"@opentelemetry/sdk-logs": "^0.54.2",
"@reach/accordion": "^0.18.0",
"@reach/combobox": "^0.18.0",
"@reach/dialog": "^0.18.0",
"@reach/menu-button": "^0.18.0",
"@reach/tooltip": "^0.18.0",
"@vercel/og": "^0.6.3",
"@vercel/otel": "^1.10.0",
"@web3-onboard/core": "2.21.2",
"@web3-onboard/injected-wallets": "2.10.11",
"@web3-onboard/ledger": "2.5.2",
"@web3-onboard/react": "2.8.13",
"@web3-onboard/walletconnect": "2.3.9",
"@web3modal/wagmi": "^5.1.11",
"ahooks": "^3.8.0",
"axios": "^1.7.2",
"big.js": "6.2.1",
"borsh": "0.7.0",
"browserify-fs": "^1.0.0",
"clipboard": "^2.0.11",
"dayjs": "1.11.13",
"ethers": "^5.7.2",
"formik": "^2.4.6",
"highcharts": "^11.4.8",
"highcharts-react-official": "^3.2.1",
"js-cookie": "^3.0.5",
"lodash": "^4.17.21",
"near-api-js": "5.0.0",
"near-social-vm": "github:NearSocial/VM#2.5.5",
"next": "15.0.3",
"next-intl": "^3.25.1",
"next-runtime-env": "^3.2.2",
"next-themes": "^0.3.0",
"numerable": "^0.3.15",
"qs": "^6.12.3",
"react": "19.0.0-rc.1",
"react-dom": "19.0.0-rc.1",
"react-hook-form": "7.46.1",
"react-perfect-scrollbar": "^1.5.8",
"react-singleton-hook": "4.0.1",
"react-syntax-highlighter": "^15.5.0",
"react-tabs": "^6.0.2",
"react-toastify": "10.0.5",
"swr": "^2.2.5",
"wagmi": "^2.12.25",
"yup": "^1.4.0",
"zustand": "4.3.7"
},
"overrides": {
"@near-wallet-selector/ethereum-wallets": {
"near-api-js": "5.0.0"
}
},
"devDependencies": {
"@cloudflare/next-on-pages": "^1.13.5",
"@types/big.js": "~6.2.2",
"@types/js-cookie": "^3.0.6",
"@types/lodash": "~4.17.7",
"@types/node": "~20.8",
"@types/qs": "~6.9.15",
"@types/react": "~18.2",
"@types/react-dom": "~18.2",
"@types/react-syntax-highlighter": "^15.5.13",
"autoprefixer": "~10.4",
"encoding": "^0.1.13",
"eslint-config-custom-nextjs": "",
"eslint-plugin-next-on-pages": "^1.13.5",
"nb-tsconfig": "
",
"nb-types": "*",
"pino-pretty": "^11.3.0",
"postcss": "~8.4",
"tailwindcss": "~3.3",
"typescript": "~5.2",
"vercel": "^37.14.0"
},
"engines": {
"node": "^18.18 || >=20"
}
please help me to resolve this issue
Screenshot from 2024-11-29 16-23-55

@yudhomax yudhomax added bug Something isn't working Emerging Tech Emerging Tech flying formation at Pagoda labels Nov 29, 2024
@github-project-automation github-project-automation bot moved this to NEW❗ in DevTools Nov 29, 2024
@kujtimprenku
Copy link
Contributor

Try removing the @near-wallet-selector/near-snap from your project.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working Emerging Tech Emerging Tech flying formation at Pagoda
Projects
Status: NEW❗
Development

No branches or pull requests

2 participants