Getting errors when adding the MoralisProvider component

Moralis General
#1

Hello all,

I am following the react-moralis guide on github and once I wrapped my entire app with the moralis provider I am getting this error on my front end. Here is my code:

import React from ‘react’;

import ReactDOM from ‘react-dom’;

import App from ‘./App’;

import { MoralisProvider } from ‘react-moralis’;

const serverUrl = ‘https://styd6ambdc2h.usemoralis.com:2053/server’;

const appId = ‘1DcehXxpQYgDwaVtkoQTNTGbbxhRpBmVXuS8ctPB’;

ReactDOM.render(

<MoralisProvider

appId='1DcehXxpQYgDwaVtkoQTNTGbbxhRpBmVXuS8ctPB'

serverUrl='https://styd6ambdc2h.usemoralis.com:2053/server'

<App />

,

document.getElementById(‘root’)

);

Here is the error:

Uncaught TypeError: Super expression must either be null or a function
at _inherits (inherits.js:9:11)
at AbstractWeb3Connector.js:84:18
at node_modules/moralis/lib/browser/Web3Connector/AbstractWeb3Connector.js (AbstractWeb3Connector.js:217:10)
at __require2 (chunk-4WNHIZTT.js?v=402dac9b:48:44)
at node_modules/moralis/lib/browser/Web3Connector/WalletConnectWeb3Connector.js (WalletConnectWeb3Connector.js:39:53)
at __require2 (chunk-4WNHIZTT.js?v=402dac9b:48:44)
at node_modules/moralis/lib/browser/MoralisWeb3.js (MoralisWeb3.js:83:58)
at __require2 (chunk-4WNHIZTT.js?v=402dac9b:48:44)
at node_modules/moralis/lib/browser/ParseUser.js (ParseUser.js:51:42)
at __require2 (chunk-4WNHIZTT.js?v=402dac9b:48:44)

Thank you

Started getting weird errors in production
#2

Hi, you can see here how to post code on forum: READ BEFORE POSTING - How to post code in the forum

#3

Sorry about that, thanks for the heads up.

Code:



import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { MoralisProvider } from 'react-moralis';

const serverUrl = 'https://styd6ambdc2h.usemoralis.com:2053/server';
const appId = '1DcehXxpQYgDwaVtkoQTNTGbbxhRpBmVXuS8ctPB';

ReactDOM.render(
  <React.StrictMode>
    <MoralisProvider appId={appId} serverUrl={serverUrl}>
      <App />
    </MoralisProvider>
  </React.StrictMode>,
  document.getElementById('root')
);
#4

I’m not expert in react, at a first look it seems, fine, can you also try to run it in codesandbox?

maybe it depends on something else, like the version of moralis and react-moralis, or what is in App

#5

In the react-moralis docs, it does not have a step where I update the index.html to add a moralis script, is that normal ?

#6

Yes, since you will be installing moralis with npm/yarn you dont need to import it. Infact, by using the Provider component to wrap your application, it will handle the moralis initialisation as well.

1 Like
#7

So I figured out that I needed to npm install the @walletconnect/web3-provider and it worked after doing so

2 Likes
#8

Great ! :raised_hands:

#9

here’s how to solve this issue with moralis

  <React.StrictMode>
  <MoralisProvider appId="9YZvXc9CTxxxxxxxN4XjbtcDDfIq98"
 serverUrl="https://cxxxxxx5oshv.usemoralis.com:2053/server" >
       </MoralisProvider>
2 Likes