WalletConnect authentication not working (no QR code)

Moralis General
#1

Wallet connect option for authenticate is not working anymore after i migrate to moralis-v1. The QR code is not showing.
What i have tried:

  • downgrade the react-moralis dependencies to 1.4.0.
  • clear all local storage.
  • empty cache.
  • delete node module and yarn.lock and reinstall all dependencies.
  • metamask authentication works.
  • delete all sessions & users from moralis db
  • tried on another moralis server.
  • set authentication provider to “walletconnect” and “walletConnect”.
  • the function returns “undefined”.
    -Node version: 18.12.
    Screenshot 2022-11-15 at 10.53.22
    In the past I have connect with the Zerion application and worked. (QR appeared)
    Screenshot 2022-11-15 at 10.47.42
    Screenshot 2022-11-15 at 10.48.00
    Is there something that I’m missing?
    I also have this warning after I updated the node version from 16 to 18.12 but does not seems to affect the application.
    Failed to parse source map from:
    -@metamask/…
    -/@solana/…
    -/@toruslabs/…
    -/@walletconnect/…
    -/eth-json-rpc-filters/…
    -/eth-rpc-errors/…
    -/ethereumjs-abi/…
    -/xhr2-cookies/…
    like 110 Warnings.

The authenticate function comes from useMoralis.
If I try to call the authenticate function with Moralis from moralis-v1 i get this error.
Screenshot 2022-11-15 at 11.09.23
But i have the @walletconnect dependency
Screenshot 2022-11-15 at 11.09.58

#2

maybe try again with node 16?

#3

so the moralis-v1 is not working on node 18.12? Because I actually need to have this node version.
Update: Not working on 16. Same problem

#4

try with an empty folder maybe, in case that there are some dependencies issues

#5

What were the previous versions of moralis / moralis-v1 and react-moralis that you were using when it worked?

Try a different walletconnect version like @walletconnect/[email protected].

Don’t worry about these warnings for now.

#6

I tried but last time worked on @walletconnect/web3-provider": “^1.8.0”, i didn’t changed the version here and is still not working.
The previous versions:
“@web3auth/web3auth”: “^0.9.3”,
“@walletconnect/web3-provider”: “^1.8.0”,
“moralis”: “^1.8.1”,
“react-moralis”: “^1.4.0”,

#7

this means that it uses that specific version or it can use a greater version too?

#8

it can use a greater one but i tried on specific 1.8.0, 1.7.1 still not working.

#9

Maybe some other issue with your project or environment. You can try in a new one to see if you can just get the modal to show. These dependencies work fine on my end in a new project:

"@walletconnect/web3-provider": "^1.8.0",
"moralis-v1": "^1.12.0",
"react-moralis": "^1.4.2",

And using await authenticate({ provider: 'walletconnect' });

#10

I have tried with a new react app and i have the same problem.
This is my package.json file.
{
“name”: “test”,
“version”: “0.1.0”,
“private”: true,
“dependencies”: {
“@craco/craco”: “^7.0.0”,
“@testing-library/jest-dom”: “^5.14.1”,
“@testing-library/react”: “^13.0.0”,
“@testing-library/user-event”: “^13.2.1”,
“@walletconnect/web3-provider”: “^1.8.0”,
“moralis-v1”: “^1.12.0”,
“react”: “^18.2.0”,
“react-dom”: “^18.2.0”,
“react-moralis”: “^1.4.2”,
“react-scripts”: “5.0.1”,
“web-vitals”: “^2.1.0”
},
“scripts”: {
“start”: “craco start”,
“build”: “craco build”,
“test”: “craco test”,
“eject”: “craco eject”
},
“eslintConfig”: {
“extends”: [
“react-app”,
“react-app/jest”
]
},
“browserslist”: {
“production”: [
“>0.2%”,
“not dead”,
“not op_mini all”
],
“development”: [
“last 1 chrome version”,
“last 1 firefox version”,
“last 1 safari version”
]
}
}

And this is my App file:

import Moralis from ‘moralis-v1’;

function App() {
const test = async()=>{
await Moralis.authenticate({ provider: ‘walletconnect’ });
}

return (


Click

);
}

export default App;

Index file:
import React from ‘react’;
import ReactDOM from ‘react-dom/client’;
import App from ‘./App’;
import reportWebVitals from ‘./reportWebVitals’;
import { MoralisProvider } from ‘react-moralis’;

const root = ReactDOM.createRoot(document.getElementById(‘root’));
root.render(
<React.StrictMode>
{process.env.REACT_APP_MORALIS_SERVER_URL &&
process.env.REACT_APP_MORALIS_APP_ID && (



)}
</React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Same error:

Screenshot 2022-11-17 at 10.27.17
Screenshot 2022-11-17 at 10.27.171109×223 79.8 KB

On Metamask still works.

#11

What were your setup steps for this new React project? As you’re using craco.

Where is your MoralisProvider here? Also please read this on how to post code.

#12

Craco was just for including polyfills for webpack v5. Anyway, I tried without craco on a new project. Still not working. Are you sure are you tested with "react-scripts": "5.0.1",? because react-scripts v5 is using webpack v5 and I think there is the problem.

#13

It was a new Next.js project (webpack v5).