[SOLVED] NextJs Moralis Integration Error

Moralis General
#1

Hi Guys,
I am new to Web3/ Moralis and in this group. I was wondering if anyone can please help me with something.
I am trying to integrate moralis with nextjs. Below is my code but I keep getting error. ReactMoralisError: Provide a “appId” provided to

I have researched on Stackoverflow and google, tried various suggestions but couldn’t figure out. I would appreicate if someone can kindly guide me. Thanks a ton in advance.


import '../styles/globals.css'
import { MoralisProvider } from 'react-moralis'
import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return (
  <MoralisProvider 
    appId={process.env.REACT_APP_MORALIS_APPLICATION_ID} 
    serverUrl={process.env.REACT_APP_MORALIS_SERVER_URL}
  >
    <Component {...pageProps} />
  </MoralisProvider>
  )
}

export default MyApp
#2

If I change my code to below code. I get another error see snapshot attached.

image
image970×547 56.6 KB

import '../styles/globals.css'

import { MoralisProvider } from 'react-moralis'

import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {

  return (

  <MoralisProvider

    appId={process.env.REACT_APP_MORALIS_APPLICATION_ID ?? "AppId Undefined Fallback"}

    serverUrl={process.env.REACT_APP_MORALIS_SERVER_URL ?? "ServerUrl Undefined Fallback"}

  >

    <Component {...pageProps} />

  </MoralisProvider>

  )

}

export default MyApp
#3

can you try with hardcoded values here to see if it works?

1 Like
#4

Thanks for responding.
Yes, I tried hardcoded values and they work perfectly fine.
How to I code it so that I don’t have to hardcode the keys.

1 Like
#5

For anyone looking for this in future. I thought to answer my own question.
AppId and ServerUrl needs to be public so browser can access. Youtube video I watched did do this, so I am not sure how much they didn’t get this error. Anyway, all i had to do was add “NEXT_PUBLIC_” before the env variable to make it available to browser.

@cryptokid thank for your help. I should have tried that in first place, but was too fixated with what the guy on Youtube was showing.

2 Likes
#6

Sorry please can you state you put the NEXT_PUBLIC_?

#7

NEXT_PUBLIC_ environment variables go into the .env.local file in your Next.js project’s root directory.