Next.js Discord

Discord Forum

MoralisProvider not working in layout.tsx

Answered
Philippine Crocodile posted this in #help-forum
Open in Discord
Philippine CrocodileOP
##Error Message:
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

##Code in layout.js:
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>
  );
}
Answered by Giant panda
https://nextjs.org/docs/getting-started/react-essentials#third-party-packages
View full answer

3 Replies

Philippine CrocodileOP
Request for Help:
I would appreciate any help in resolving this error and successfully using the MoralisProvider in my layout.js file. Thank you!

Successful Usage in Home Page:
I tried to use the MoralisProvider in my home page and it worked. Here's the 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>
  );
}


Usage in Layout File:
I want to use my Header component in all of my pages, so I think I need a way to implement the MoralisProvider in the layout file.
Answer
Philippine CrocodileOP
okay I got it thank you @Giant panda