Wallet Integration

1.Getting this error


NoMoralisContextProviderError: Make sure to only call useMoralis within a  <MoralisProvider>

I think I know what it is just need conformation I have an App.JS which stores the component MyApp

APP JS

`import React from "react";
import ReactDOM from "react-dom";
import { MoralisProvider } from "react-moralis";
import {MyApp} from "./_app"
ReactDOM.render(
  <MoralisProvider appId="xxxxxxxx" serverUrl="xxxxxxxx">
    <MyApp />
  </MoralisProvider>,
  document.getElementById("root"),
);

MYAPP COMPONENT

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />

  
}
export default MyApp`

This goes into an index.js file which is where I am integrating moralis however is it to far down for moralis to work as the App JS wraps the MyApp component in the MoralisProvider but I am implementing the useMoralis() function inside index.js which is wrapped in the myApp component

this is a small section of the index.js but it is connected to the MyApp component

 `export default function App( ) {
  const { authenticate, isAuthenticated } = useMoralis();`
1 Like

Hi @Just_T3

Try to move MoralisProvider to the index.js

Why does your App.js looks like index.js?

I am using NextJS and it was set up as the index JS and app JS the other way around so I just rolled with it

Could you share your repo :raised_hands:

Hey its here

1 Like

Ohh, Iā€™m not a big pro building on Nextjs. So it took some time to figure out.
If I remember correctly if you use any providers you need to wrap each Component.

So the solution:
You need to import React and MoralisProvider in ./pages/_app.js

import React from 'react';
import { MoralisProvider } from 'react-moralis';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
    return (
        <MoralisProvider
            appId="appId"
            serverUrl="serverUrl"
        >
            <Component {...pageProps} />
        </MoralisProvider>
    );
}

export default MyApp;