Does not detect provider in Metamask browser with Nuxt

[ItsNickBarry]

Provider is not detected in Metamask browser.

My application is built with Nuxt, but the problem persists even when using the CDN version of detect-provider, rather than the NPM package. I believe this approach should bypass any Nuxt-specific build issues.

I have tried increasing the timeout to 15 seconds.

Sometimes the provider is detected after refreshing the page, but this behavior is not consistent.

[MrPeanutz]

Same here, sometimes it works on the first page load, but after reloading it doesn't work anymore.

Also using Nuxt

[AdiTorner]

I'm using svelte/sapper, and if I have Trust Wallet on Ethereum and then switch to BSC, it sometimes works. With Metamask Mobile, it generally works on the first load, yet only then. Seems to be a frequent conflict with all mobile wallets injection for some reason, despite no issue with the desktop version.

[rsisson]

Same here, sometimes it works on the first page load, but after reloading it doesn't work anymore.

Also using Nuxt

I'm having this same issue with a Vue 3 dApp - did anyone ever find a resolution? I think it might have something to do with Vite as I can replicate the issue with something as simple as: setTimeout(() => {if (!!window.ethereum) alert('found')}, 1000) in index.html, outside of my Vue app

[milaabl]

@rsisson, have you found any work-around for that? Please help 🙏

[rsisson]

@milaabl I have not touched it in a while, but I was never able to find a resolution. I think it may be related to Vite somehow as the simple index.html test I posted worked fine in a Webpack/React project but failed in my Vite/Vue project. I would start messing with Vite config settings and see if that gets you anywhere or else consider switching to React/Next if you're not already too deep into development. Wish I had a better answer for you :/

[milaabl]

@rsisson, hmm, Vite really might be the culprit! Thank you so much for replying to me! If I manage to figure out the solution, I'll make sure to update it here for future reference

[milaabl]

From my research, it looks like the problem happens with JS and HTML pages too (in TrustWallet mobile IOS app).

But it only happens if you open the dApp with a deep link (like this ⬇️):

const connectTrustWallet = () => {
    // alert(`is window.trustwallet.ethereum ${window.trustwallet?.ethereum}`);
    // alert(`is window.ethereum ${window.ethereum}`);
    if (isOnMobile() && linkRef.current && (!window.ethereum || !window.trustwallet.ethereum)) {
      linkRef.current.href = `https://link.trustwallet.com/open_url?url=${document.URL}`;
      linkRef.current.click();
      return;
    }
    connect('trust');
  }

Take this Codesandbox project fo reference: https://codesandbox.io/s/falling-sea-qnq46l?file=/src/index.html

Nor window.ethereum or window.trustwallet.ethereum are injected the window.

Maybe I'll contact the TW team and try to figure out why that bug is happening.

[rsisson]

@milaabl iirc I was seeing the issue in Metamask mobile browser (Android) when I would directly enter the site URL into the MM browser (no deep links). I seem to recall that it would work on the first load but any subsequent refreshes or page navigations would break it. Glad you seem to have a way forward though - godspeed!