XMLHttpRequest is not defined, NextJS

[nelwincatalogo]

What went wrong?

What have you tried so far to fix?

I did try to installing xmlhttprequest but no luck.

npm install xmlhttprequest --save

[jessgusclark]

Hello @nelwincatalogo , thanks for the raising the issue. XMLHttpRequest comes with the browser via the DOM so if you are using rLogin in a browser it should be provided. If you are not using rLogin in the browser, then how are you using rLogin?

[nelwincatalogo]

Hello @nelwincatalogo , thanks for the raising the issue. XMLHttpRequest comes with the browser via the DOM so if you are using rLogin in a browser it should be provided. If you are not using rLogin in the browser, then how are you using rLogin?

I'm using it in a nextjs project and my browser is up to date also

[jessgusclark]

We haven't had anyone use rLogin with NextJS so this is interesting. I was able to reproduce the error and it looks like it is coming from the NextJS compiler and not the browser. Following the advice in this StackOverflow post I added this:

• Installed xhr2 with yarn add xhr2 --dev
• added global.XMLHttpRequest = require("xhr2") to the next.config.js file.

This resulted in a new error that window was not defined. I found this StackOverflow post and it seems that Nextjs might be blocking requests to window?

[nelwincatalogo]

I was able to solve the problem by importing it only on the client side. Following nextjs dynamic imports

• import dynamic from 'next/dynamic';
• const rLogin = dynamic(() => import('./rLoginProvider').then((provider) => provider.rLogin), { ssr: false });
• console.log(rLogin);
• const _provider = await rLogin.connect();

However, I got the following new error

[nelwincatalogo]

I already solved the problem, thanks a lot for the assistance cheers 🍻

Here's how I resolved the problem:

// rLoginProvider.js
const rLogin = new RLogin({
    providerOptions: {
        // ...
    },
});
export default rLogin;

// create a state to hold the rLogin instance
const [rLogin, setRLogin] = useState(null);

    // on page load
    useEffect(() => {
        (async () => { 
            // import using ES2020 dynamic import(), nothing can stop us because Next.js supports it.
            const rLoginProvider = (await import('@/app/wallet/rLoginProvider')).default;
            setRLogin(rLoginProvider);

            // ...
        })();
    }, []);
    
// then you can use it now however you like
const _rLogin = await rLogin.connect();
const web3 = new Web3(_rLogin.provider);

[nelwincatalogo]

I wonder why Nifty and Liquality Wallet Connect Button is disabled? At first I thought it was disabled because I don't have wallet installed on my browser. I did install but still disabled

[jessgusclark]

Great, I'm glad you got it to work! I don't know a lot about NextJS so sorry I wasn't able to assist more.

If I get some time, I might borrow your implementation to use in our sample apps to show others how to use rLogin with NextJS.

Regarding the other wallets, a browser can only have one wallet 'enabled' at a time since they all attempt to overwrite the window.ethereum variable. We have a research issue, #230, but I don't think there is a solution to this.