WalletConnect authentication not working (no QR code)

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

maybe try again with node 16?

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

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

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.

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”,

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

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

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' });

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:

On Metamask still works.

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.

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.

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