Next Js build failing with Moralis

Technical Issue Reporting
#1

Hi team,

I am building a NextJs application using Moralis backend. The functionalities are working well and fine, but on building the code using npm run build command, the build fails with ReferenceError: localStorage is not defined and this is coming from one of the Moralis modules.

Stacktrace

error
error1894Ɨ558 230 KB

I googled a couple of places but couldnā€™t find a solution.
In one of the previous post on this forum, I found that NextJs support was added for Moralis, but I am unable to build the app. For now I am running ā€œnpm run devā€ to deploy (dev-build) on prod, but it would be great if someone could point out a solution so that I can build and deploy the production build on the server.

Any help appreciated
Thanks!

1 Like
#2

found this in Moralis SDK source code:

but I donā€™t know if it is related to your problem

1 Like
#3

Exactly, the build error is due to this ā€˜localStorageā€™.
localStorage is only available in the browser environments.
As NextJs renderer serves using a Node server which does not know what localStorage is so it is throwing this error.
Is there any workaround for this?

#4

Hi @Leon

You can disable SSR by wrapping up default export of _app.js in a special custom component that disables SSR in NextJS:

const NoSSR = ({ children }) => (
  <>
    <div className="w-full h-full overflow-hidden" suppressHydrationWarning>
      {typeof window === "undefined" ? null : children}
    </div>
  </>
)

export const Application = props => {
  /*
    ======================================
      This component is the entry point of
      the application. So if you have any global
      styles or anything else that you want to
      have applied globally, you can modify this
      component to achieve them.
    ======================================
  */
  const { Component, pageProps } = props
  return (
    <Theme>
      <NoSSR>
        <Systems>
          <Component {...pageProps} />
        </Systems>
      </NoSSR>
    </Theme>
  )
}

export default Application
1 Like
#5

As NextJs renderer serves using a Node server which does not know what localStorage is so it is throwing this error.

#6

Hi @Leon I found an even better solution that allows SSR so you can use all the awesome Next.js functionality :partying_face:

  1. You have to import ā€˜moralis/nodeā€™:
    const Moralis = require('moralis/node')

  2. Initialize Moralis:

export async function getServerSideProps(context) {

  const appId = process.env.NEXT_PUBLIC_REACT_APP_MORALIS_APP_ID

  const serverUrl = process.env.NEXT_PUBLIC_REACT_APP_MORALIS_SERVER_URL

  Moralis.initialize(appId);

  Moralis.serverURL = serverUrl;

  const Story = Moralis.Object.extend('Object')

  const query = new Moralis.Query(Story)

  const res = await query.find()

  const prop = JSON.stringify(res)

  return {

    props: { prop },

  }

}

Thereā€™s a message in the console, that actually tells you what to do:
It looks like you're using the browser version of the SDK in a node.js environment. You should require('parse/node') instead.

Moralis uses Parse under the hood so you can swap ā€˜parseā€™ for ā€˜moralisā€™.
Took a couple of hours to notice.

1 Like
#7

Hi,

Iā€™ve tried this solution but I am unable to call functions like getNFTs because the application does not recognize that Moralis has started.

I used the idea you suggested to use getServerSideProps to set the appId, serverUrl, and subsequently start the Moralis server but I am unable to get this to work. Do you have any ideas why this would be the case? I have my getServerSideProps function in my _app.tsx file, which includes a loader component that calls the moralis API to getNFTs.

Thanks