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;

Next js renders both in server and client, you must explicitly let it know you don’t want to render on server like these:

pages/_app.js

import dynamic from ‘next/dynamic’;
const MoralisContextProvider = dynamic(() => import(“context/MoralisContext”),{ssr:false})

function MyApp({ Component, pageProps }) {
return (

<Component {…pageProps} />

)
}

export default MyApp

context/MoralisContext.js

import { MoralisProvider } from “react-moralis”;

export default function MoralisContextProvider({children}) {
return (

{children}

)
}

1 Like

yeah Next.js is such a weird one for me i dont really like it from what ive tried with it. it seems to be getting popular lately and im seeing it more and more but i dont like the fact that its server side. It makes using things like localStorage more difficult than it needs to be.