Error when using MoralisProvider in layout.js file (Next.js)

Question

I'm trying to use the MoralisProvider in my layout.js file, but it throws an error when I import it. Here's the error message I receive:

./node_modules/@toruslabs/openlogin/node_modules/@toruslabs/eccrypto/index.js
Error: 
  x Return statement is not allowed here
    ,-[team_project/nextjs-nft-marketplace/node_modules/@toruslabs/openlogin/node_modules/@toruslabs/eccrypto/index.js:21:1]
 21 |     throw e;
 22 |   } else {
 23 |     console.info('secp256k1 unavailable, reverting to browser version');
 24 |     return (module.exports = require("./browser"));
    :     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 25 |   }
 26 | }
    `----

Caused by:
    Syntax Error

Here's my code in layout.js:

import Header from "@/components/Header";
import { Inter } from "next/font/google";
import { MoralisProvider } from "react-moralis";
const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function Mylayout({ children }) {
  return (
    <html lang="en">
      <Header />
      <body className={inter.className}>
        <MoralisProvider initializeOnMount={false}>{children}</MoralisProvider>
      </body>
    </html>
  );
}

I would appreciate any help in resolving this error and successfully using the MoralisProvider in my layout.js file. Thank you!

I tried to use the MoralisProvider in my home page and it worked, code:

"use client";

import Header from "@/components/Header";
import { MoralisProvider } from "react-moralis";
// import MoralisProviderConfig from "@/components/MoralisProviderConfig";
export default function Home() {
  return (
    <MoralisProvider initializeOnMount={false}>
      <Header />
    </MoralisProvider>
  );
}

but I wnat to use my Header components in all of my pages so i think i need a way to implement the provider in the layout file.

Error when using MoralisProvider in layout.js file (Next.js)

0 Answers0