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.
You can use it in layout too, you just need to add "use client" in all Home components and also in your layout. Althought it can lead to another errors like "NoMoralisContextProviderError: Make sure to only call useMoralis within a " as Moralis is not compatible with new NextJS.