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.

i started getting NoMoralisContextProviderError all of a sudden when my application is running on localhost. Same code seems have no issue when deployed on Vercel server. My page is not loading anything due to this error. See errors on image. same code running on vercel as shown on second image. any idea how to fix the error? really appreciate the help!!
This is the error code.
Uncaught NoMoralisContextProviderError: Make sure to only call useMoralis within a
at NoMoralisContextProviderError.ReactMoralisError [as constructor] (Errors.ts:4:1)
at new NoMoralisContextProviderError (Errors.ts:12:1)
at useMoralis (useMoralis.ts:9:1)
at ConnectButton (web3uikit.esm.js:19540:1)
at renderWithHooks (react-dom.development.js:14985:1)
at mountIndeterminateComponent (react-dom.development.js:17811:1)
at beginWork (react-dom.development.js:19049:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)
at beginWork$1 (react-dom.development.js:23964:1)
at performUnitOfWork (react-dom.development.js:22776:1)
at workLoopSync (react-dom.development.js:22707:1)
at renderRootSync (react-dom.development.js:22670:1)
at performSyncWorkOnRoot (react-dom.development.js:22293:1)
at scheduleUpdateOnFiber (react-dom.development.js:21881:1)
at updateContainer (react-dom.development.js:25482:1)
at react-dom.development.js:26021:1
at unbatchedUpdates (react-dom.development.js:22431:1)
at legacyRenderSubtreeIntoContainer (react-dom.development.js:26020:1)
at Object.render (react-dom.development.js:26103:1)
at Module. (index.js:11:1)
at Module…/src/index.js (index.js:28:1)
at webpack_require (bootstrap:856:1)
at fn (bootstrap:150:1)
at Object.1 (reportWebVitals.js:14:1)
at webpack_require (bootstrap:856:1)
at checkDeferredModules (bootstrap:45:1)
at Array.webpackJsonpCallback [as push] (bootstrap:32:1)
at main.chunk.js:1:77
ReactMoralisError @ Errors.ts:4
NoMoralisContextProviderError @ Errors.ts:12
useMoralis @ useMoralis.ts:9
ConnectButton @ web3uikit.esm.js:19540
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
(anonymous) @ index.js:11
./src/index.js @ index.js:28
webpack_require @ bootstrap:856
fn @ bootstrap:150
1 @ reportWebVitals.js:14
webpack_require @ bootstrap:856
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1 The above error occurred in the component:

at ConnectButton (http://localhost:3000/static/js/4.chunk.js:260616:22)
at div
at div
at Home (http://localhost:3000/static/js/main.chunk.js:1634:95)
at Routes (http://localhost:3000/static/js/4.chunk.js:218750:5)
at App
at Router (http://localhost:3000/static/js/4.chunk.js:218683:15)
at BrowserRouter (http://localhost:3000/static/js/4.chunk.js:218163:5)
at NotificationProvider (http://localhost:3000/static/js/4.chunk.js:263926:77)
at MoralisProvider (http://localhost:3000/static/js/4.chunk.js:215627:21)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
console. @ index.js:1
logCapturedError @ react-dom.development.js:20085
update.callback @ react-dom.development.js:20118
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20736
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
(anonymous) @ index.js:11
./src/index.js @ index.js:28
webpack_require @ bootstrap:856
… (37 lines left)

Blockquote

run on localhost|602x500

This is my index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom";
import { MoralisProvider } from "react-moralis";
import { NotificationProvider } from 'web3uikit';


ReactDOM.render(
  <React.StrictMode>
    <MoralisProvider appId="Rn5WRcHfbVJEQTYtmJhFCQgBkcfLCnmrdqcIFFCx" serverUrl="https://oh8m4pctz0zk.usemoralis.com:2053/server">
      <NotificationProvider>
      <BrowserRouter>
        <App />
      </BrowserRouter>
      </NotificationProvider>
    </MoralisProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals(console.log);

i started getting NoMoralisContextProviderError

Solved on Discord.