Fix: NEAR Wallet Selector 'Signer' Error In React & Rsbuild

Aug 14, 2025 by Felix Dubois 60 views

Fix: Cannot Read Properties of Undefined ('signer') in NEAR Wallet Selector

Hey everyone! Running into the frustrating error "Cannot read properties of undefined (reading 'signer')" when trying to connect your wallet with NEAR Wallet Selector in your React app? You're not alone! This issue seems to pop up, especially when using Rsbuild with React and either @near-wallet-selector/react-hook or @near-wallet-selector/core. Let's dive into what causes this and how to fix it.

Understanding the Problem

So, what's exactly going on here? The error message "Cannot read properties of undefined (reading 'signer')" essentially means that your application is trying to access the signer property of an object that is, well, undefined. In the context of NEAR Wallet Selector, this usually points to an issue with how the wallet connection is being established or how the signer object is being accessed.

This problem often surfaces when there's a mismatch between the expected state and the actual state of the wallet connection process. For instance, if the application tries to access the signer before the wallet has fully connected or if there's an issue during the initialization of the wallet selector, this error can occur. It's crucial to ensure that all asynchronous operations related to wallet connection and signer retrieval are properly handled to prevent this issue.

When using Rsbuild, a fast and modern build tool for web applications, these kinds of issues might be further complicated by how Rsbuild handles module bundling and optimization. Sometimes, configurations or plugin interactions within Rsbuild can lead to unexpected behaviors, making it essential to carefully examine your build setup when troubleshooting such errors. It's also vital to consider the specific versions of the libraries you're using, as compatibility issues between different versions of @near-wallet-selector/react-hook, @near-wallet-selector/core, and other related packages can contribute to this problem. Keeping your dependencies up-to-date and ensuring they are compatible with each other is a key step in resolving this error.

Common Causes and How to Troubleshoot

Okay, let's break down the common culprits behind this error and how you can tackle them. Here are some key areas to investigate:

1. Initialization Issues with NEAR Wallet Selector

First up, let's talk initialization. The way you initialize NEAR Wallet Selector is super important. If it's not set up correctly, you might run into this dreaded error. Here's what to check:

Asynchronous Setup: NEAR Wallet Selector often involves asynchronous operations, like loading the wallet selector and connecting to the wallet. Make sure you're handling these operations correctly using async/await or Promises. This ensures that the signer is available before you try to use it. It's important to use async/await to handle the asynchronous operations, which is crucial for ensuring that the signer is available before you attempt to utilize it. Properly managing these asynchronous tasks helps prevent the application from trying to access the signer before it is ready, which is a common cause of the error.
Correct Configuration: Double-check your initialization configuration. Ensure you're passing in the correct network ID, contract ID, and wallet selector options. A small typo here can lead to big problems. Incorrect configuration settings can disrupt the entire wallet connection process, making it impossible to retrieve the signer correctly. This includes ensuring that the network ID, contract ID, and wallet selector options are accurately set. Even minor discrepancies can lead to the application failing to establish a proper connection with the wallet.
React Context Provider: If you're using @near-wallet-selector/react-hook, make sure you've wrapped your app with the WalletSelectorContext.Provider. This makes the wallet selector instance available to your components. The WalletSelectorContext.Provider acts as a crucial bridge, making the wallet selector instance accessible throughout your application. Without it, components won't be able to access the necessary wallet functionalities, leading to errors like the 'signer' being undefined.

2. Rsbuild Configuration

Since you're using Rsbuild, let's peek under the hood and see if anything's amiss there. Rsbuild is great, but sometimes its configurations can play tricks on us:

Module Bundling: Rsbuild uses module bundlers like Webpack or Rspack. Ensure that your Rsbuild configuration correctly handles the modules from @near-wallet-selector/react-hook or @near-wallet-selector/core. Misconfigured bundling can lead to parts of the library not being included in the build, resulting in runtime errors. Incorrect handling of these modules can prevent them from being properly included in the final build, leading to runtime errors. Check your Rsbuild configuration to ensure that all necessary modules are being bundled correctly.
Plugin Conflicts: Rsbuild plugins can sometimes interfere with each other. If you're using other plugins, try temporarily disabling them to see if one is causing the issue. Plugin conflicts can be a subtle but significant source of errors in complex build setups. By temporarily disabling other plugins, you can isolate whether a conflict is the cause of the problem. If the error disappears when other plugins are disabled, it indicates that one of them is likely interfering with the NEAR Wallet Selector.
Environment Variables: Ensure your environment variables are correctly set for your NEAR environment (e.g., NODE_ENV, REACT_APP_NEAR_NETWORK_ID). Incorrect environment variables can lead to the application operating in the wrong network or with incorrect settings. This can have a cascading effect, impacting wallet connection and signer retrieval. Make sure that NODE_ENV and REACT_APP_NEAR_NETWORK_ID are properly configured to match your intended deployment environment.

3. Asynchronous Operations and State Management

The asynchronous nature of wallet connections can be tricky. Here's how to make sure you're managing state correctly:

Waiting for the Signer: Before you try to use the signer, make absolutely sure it's available. Use conditional rendering or state variables to ensure that you only access the signer after the wallet is connected. This involves checking if the signer object is not null or undefined before attempting to use it. Trying to use the signer prematurely can lead to the error we're discussing.
React Hooks and State Updates: If you're using React Hooks, ensure your state updates are triggering re-renders correctly. Sometimes, state updates might not happen as expected, leading to stale data. This can be particularly problematic when dealing with asynchronous operations where the state needs to reflect the current status of the wallet connection. Proper state management and updates are essential for ensuring that your application accurately reflects the wallet's state.
Error Handling: Implement proper error handling around your wallet connection logic. Catch any errors that might occur during the connection process and log them for debugging. Comprehensive error handling is crucial for diagnosing issues related to wallet connections. By catching and logging errors, you can gain valuable insights into what might be going wrong and where to focus your debugging efforts.

4. Wallet Compatibility and Updates

Sometimes, the issue might be with the wallet itself or the versions of the libraries you're using:

Wallet Versions: Make sure the wallets you're trying to connect to are up-to-date. Outdated wallets might have compatibility issues with NEAR Wallet Selector. Wallet compatibility is a critical aspect of ensuring smooth wallet connections. Using the latest versions of wallets can resolve many issues related to compatibility with NEAR Wallet Selector and other dApp integrations.
Library Versions: Ensure that @near-wallet-selector/react-hook and @near-wallet-selector/core are compatible with each other and with your other dependencies. Check the official documentation for any known compatibility issues. Compatibility issues between different versions of libraries can lead to unexpected errors and behaviors. Reviewing the official documentation and release notes for any compatibility information is essential for maintaining a stable and functional application.
Browser Extensions: Browser extensions can sometimes interfere with wallet connections. Try disabling any extensions that might be interacting with the NEAR blockchain or wallet connections. Certain extensions can inadvertently disrupt the communication between the dApp and the wallet, leading to connection failures. Temporarily disabling these extensions can help identify whether they are the cause of the issue.

Example Fixes

To give you a clearer picture, let's look at some code snippets that might help:

1. Ensure Asynchronous Initialization

Make sure you're initializing the wallet selector asynchronously:

import { setupWalletSelector } from "@near-wallet-selector/core";
import { setupHereWallet } from "@near-wallet-selector/here-wallet";
import { setupMeteorWallet } from "@near-wallet-selector/meteor-wallet";

async function initializeWalletSelector() {
  const selector = await setupWalletSelector({
    network: "testnet",
    modules: [setupHereWallet(), setupMeteorWallet()],
  });
  return selector;
}

// Use this function in your component
async function MyComponent() {
  const walletSelector = await initializeWalletSelector();
  // ... rest of your component logic
}

2. Use `useWalletSelector` Hook Correctly

If you're using @near-wallet-selector/react-hook, ensure you're using the useWalletSelector hook correctly:

import { useWalletSelector } from "@near-wallet-selector/react-hook";

function MyComponent() {
  const { selector, wallets, store, error } = useWalletSelector();

  if (error) {
    console.error("Wallet selector error:", error);
    return <p>Error: {error.message}</p>;
  }

  if (!selector) {
    return <p>Loading wallet selector...</p>;
  }

  // ... rest of your component logic, ensuring selector is available
}

3. Conditional Rendering for Signer

Ensure you're only trying to access the signer after the wallet is connected:

import { useWalletSelector } from "@near-wallet-selector/react-hook";

function MyComponent() {
  const { selector, wallets, store, error } = useWalletSelector();

  const [isSignedIn, setIsSignedIn] = React.useState(false);

  React.useEffect(() => {
    if (selector && selector.isSignedIn()) {
      setIsSignedIn(true);
    } else {
      setIsSignedIn(false);
    }
  }, [selector]);

  const getSigner = async () => {
    if (isSignedIn) {
      const wallet = await selector.wallet();
      const signer = await wallet.getSigner();
      console.log("Signer:", signer);
    } else {
      console.log("Not signed in");
    }
  };

  return (
    
      {isSignedIn ? (
        <button onClick={getSigner}>Get Signer</button>
      ) : (
        <button onClick={() => selector.signIn()}>Sign In</button>
      )}
    
  );
}

Conclusion

The "Cannot read properties of undefined (reading 'signer')" error can be a tricky one, but by systematically checking your initialization, Rsbuild configuration, state management, and wallet compatibility, you should be able to nail down the cause. Remember to handle asynchronous operations carefully and ensure that your state updates correctly reflect the wallet connection status.

By focusing on the asynchronous nature of wallet connections, the correctness of your Rsbuild configuration, and the proper management of component state, you can effectively tackle this error. Always ensure that asynchronous operations are correctly handled, that your state updates reflect the wallet connection status, and that your Rsbuild setup is correctly configured to support NEAR Wallet Selector. With these considerations, you'll be well-equipped to resolve this issue and ensure a smooth user experience in your NEAR-powered application.

Happy coding, and may your signers always be defined! 😉