[bug] Don't show login pop-up on MM Mobile

[LeoClairet05]

Is there an existing issue for this?

• I have searched the existing issues

RainbowKit Version

0.5.2

wagmi Version

0.6.0

Current Behavior

RPReplay_Final1663060831.MP4

I try to connect MetaMask on mobile from Safari like on your website where it works fine. But when I try with my React app or with your react example, it doesn't work as you can see on the video (where I'm using your react example).

Expected Behavior

Open MM mobile connect popup

Steps To Reproduce

Clone with-create-react-app

Start and try to connect using Safari on IOS

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

[LeoClairet05]

Solution found thanks to : #420

Why it's not working with React (without NextJS)?

It's not working since Webpack 5.0, Buffer is not installed by default anymore so it creates an issue with WalletConnect (Used when you try to connect with MetaMask from another browser than the integrated one in MetaMask mobile app).
⚠️ Make sure your react app use https & not http, or it'll not work.

I've created a public repository that you can clone to have a working react app that integrates Rainbowkit, Wagmi without NextJS -> https://github.com/LeoClairet05/wagmi-rainbowkit-react-template

On my template Wagmi is configured to connect on custom chains Fuji & Avalanche.

To make it works on your own project you can follow these steps:

Install "react-app-rewired" -> https://www.npmjs.com/package/react-app-rewired

Change your package.json scripts as following:

"scripts": { "start": "HTTPS=true react-app-rewired start", "build": "GENERATE_SOURCEMAP=false react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject" }

and add the following devDependencies in your package.json:
"devDependencies": { "assert": "^2.0.0", "buffer": "^6.0.3", "crypto-browserify": "^3.12.0", "https-browserify": "^1.0.0", "os-browserify": "^0.3.0", "process": "^0.11.10", "react-app-rewired": "^2.2.1", "stream-browserify": "^3.0.0", "stream-http": "^3.2.0", "url": "^0.11.0" }

create a new file in your directory named "config-overrides.js" with the following content:

`
const webpack = require('webpack');

module.exports = function override(config) {
const fallback = config.resolve.fallback || {};
Object.assign(fallback, {
"crypto": require.resolve("crypto-browserify"),
"stream": require.resolve("stream-browserify"),
"assert": require.resolve("assert"),
"http": require.resolve("stream-http"),
"https": require.resolve("https-browserify"),
"os": require.resolve("os-browserify"),
"url": require.resolve("url")
})
config.ignoreWarnings = [/Failed to parse source map/];
config.resolve.fallback = fallback;
config.plugins = (config.plugins || []).concat([
new webpack.ProvidePlugin({
process: 'process/browser',
Buffer: ['buffer', 'Buffer']
})
])
return config;
}
`

[tuminzee]

@LeoClairet05 will there be support for vite as well?

[tuminzee]

Solution found thanks to : #420

Why it's not working with React (without NextJS)?

It's not working since Webpack 5.0, Buffer is not installed by default anymore so it creates an issue with WalletConnect (Used when you try to connect with MetaMask from another browser than the integrated one in MetaMask mobile app). ⚠️ Make sure your react app use https & not http, or it'll not work.

I've created a public repository that you can clone to have a working react app that integrates Rainbowkit, Wagmi without NextJS -> https://github.com/LeoClairet05/wagmi-rainbowkit-react-template

On my template Wagmi is configured to connect on custom chains Fuji & Avalanche.

To make it works on your own project you can follow these steps:

Install "react-app-rewired" -> https://www.npmjs.com/package/react-app-rewired

Change your package.json scripts as following:

"scripts": { "start": "HTTPS=true react-app-rewired start", "build": "GENERATE_SOURCEMAP=false react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject" }

and add the following devDependencies in your package.json: "devDependencies": { "assert": "^2.0.0", "buffer": "^6.0.3", "crypto-browserify": "^3.12.0", "https-browserify": "^1.0.0", "os-browserify": "^0.3.0", "process": "^0.11.10", "react-app-rewired": "^2.2.1", "stream-browserify": "^3.0.0", "stream-http": "^3.2.0", "url": "^0.11.0" }

create a new file in your directory named "config-overrides.js" with the following content:

` const webpack = require('webpack');

module.exports = function override(config) { const fallback = config.resolve.fallback || {}; Object.assign(fallback, { "crypto": require.resolve("crypto-browserify"), "stream": require.resolve("stream-browserify"), "assert": require.resolve("assert"), "http": require.resolve("stream-http"), "https": require.resolve("https-browserify"), "os": require.resolve("os-browserify"), "url": require.resolve("url") }) config.ignoreWarnings = [/Failed to parse source map/]; config.resolve.fallback = fallback; config.plugins = (config.plugins || []).concat([ new webpack.ProvidePlugin({ process: 'process/browser', Buffer: ['buffer', 'Buffer'] }) ]) return config; } `

Is there a way to undo this process, I added this code and I was able to run it on https,
But even after deleting all the dependencies, removing the node_modules, and reinstalling the packages,
It still goes back to pointing to https

[LeoClairet05]

Yes, just remove the HTTPS=true from the package.json in "scripts":{"starts"

[LeoClairet05]

I don't know ^^

[tuminzee]

It was weird to see this unexpected behaviour because even with react-scripts start it was pointing to https
😆 😭 I will try different approaches @LeoClairet05
thank you for your help

[graphicstone]

Is this issue fixed in the latest update or do I need to do the above work around, because when I followed the above steps above by @LeoClairet05, I got connection not secure on my localhost.

[tuminzee]

Is this issue fixed in the latest update or do I need to do the above work around, because when I followed the above steps above by @LeoClairet05, I got connection not secure on my localhost.

Local host will not allow you to connect to unsecured connection by default
If you are using Chrome, you'd have to explicitly visit the page by bypass the warning page.

Hope this helps

[graphicstone]

Yeah that issue is resolved. Thanks for the help. Now it's working as expected.

[sshmaxime]

After struggling for a bit, I finally found the solution for Vite.
I was having another error along the line of: Unhandled Promise Rejection: ReferenceError: Cannot access uninitialized variable.
For anyone having this issue with Vite you need to populate the window with something called Buffer. I have no idea why it works but it works for me.

Just go in your index.html add a script in your like so:

 <script type="module">
      import { Buffer } from "buffer";
      window.Buffer = Buffer;
</script>

Hope that helps :) @tuminzee

[eddielthomas]

How to fix this for NextJS?

[abdullah-txfusion]

@sshmaxime This isn't working now, still getting the Uncaught ReferenceError: Buffer is not defined

[issa-me-sush]

if yall are still facing problems in 2024 , w rainbowkit v 1.0> , I struggled quite a bit and found a config that magically fixes teh mobile connect issue lol :

next.config.js file :

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: config => {
    config.resolve.fallback = { fs: false, net: false, tls: false };
    return config;
  },
};

module.exports = nextConfig;

[vishalguptax]

Can anyone tell me how to fix it for React Vite + TS app?