NEXTJS-Moralis Issue

Moralis General
#1

Hello, first of all thanks for your attention,
Im trying to setup react-moralis with nextjs.

well, I wrap the entire app with MoralisProvider as docs says

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

function MyApp({ Component, pageProps }) {
  return (
    <MoralisProvider appId={process.env.MORALIS_APP_ID} serverUrl={process.env.MORALIS_SERVER_URL}>
      <Component {...pageProps} />
    </MoralisProvider>
  )
}

export default MyApp

when I start the development server the console throw this error:

error - ./node_modules/@elrondnetwork/bls-wasm/bls_c.js:9:1108
Module not found: Can't resolve 'fs'
null

that is my package.json:

  "name": "imaginft",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "browser": {
    "fs": false
  },
  "dependencies": {
    "moralis": "^0.0.16",
    "next": "10.1.3",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-moralis": "^0.1.1"
  }
}

I added the entry browser for fs but seems not to work.

Thanks a million

1 Like
#2

Hi,

The error comes from the fact that a dependency of our moralis SDK is using fs (a node-only dependency). I have seen the same issue when working with react-native. But I have not seen this issue when working with vanilla javascript, or with create-react-app.

I have only tested the react-moralis library with create-react-app (https://create-react-app.dev). I have not tested it with other React frameworks as NextJs or Gatsby. They use a different approach when it comes to building the javascript files. So it might be that the packages are not compatible yet.

We have to take a look at it why it works with create-react-app and not with NextJs.

What happens if you change in the package.json

  "browser": {
    "fs": true
  },

Otherwise, for now, I can suggest:

  • Check if you can configure NextJs in a way to resolve this. I noticed multiple Github issues with similar problems (but with other projects, not Moralis). For example https://github.com/vercel/next.js/issues/7755 , maybe one of those solutions can help you out
  • Create the project with create-react-app. I have used and tested multiple Moralis projects with this framework and can confirm that this works correctly.

Sorry for the inconvenience, we have this problem on the radar. I hope this helps a bit.

#3

Can you try updating moralis to version 0.0.17 and try again?

We have just published a fix, and confirmed it works with NextJs

#4

i will try thanks a million

IT WORKS! idk why not taking the keys from .env but this is other thing, thankyou so much!! you are great

1 Like
#5

your provider and env vars code looks fine

Where are you deploying your next.js app? If you’re using vercel, you can find the environment vars in the project dashboard (production vars) and add them in, then run ‘vercel env pull’ in the terminal at root dir and you will download those env vars into a .env file. Add that to gitignore if its not already.

i dug through this: https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser

edit:
Add “NEXT_PUBLIC_” before any env vars that you plan on exposing to the client (browser). This includes all markup like the moralis provider in this case

im not totally sure if this unsecures your moralis creds.

so, if you’re deploying on Vercel:

.env:

NEXT_PUBLIC_MORALIS_SERVER_URL="your-serverurl"
NEXT_PUBLIC_MORALIS_APP_ID="your-appid"

your next.config.js, where env vars can flow to your app for usage in api routes as well.:

module.exports = {
  env: {
    NEXT_PUBLIC_MORALIS_APP_ID: process.env.NEXT_PUBLIC_MORALIS_APP_ID,
    NEXT_PUBLIC_MORALIS_SERVER_URL: process.env.NEXT_PUBLIC_MORALIS_SERVER_URL
  }
}

your _app.js

import { MoralisProvider } from "react-moralis";
import '../styles/globals.css'
const moralisAppID = process.env.NEXT_PUBLIC_MORALIS_APP_ID
const moralisServerUrl = process.env.NEXT_PUBLIC_MORALIS_SERVER_URL

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

export default MyApp
2 Likes
Moralis React Native, Crypto Dep Error