Moralis Provider not working in nextjs13, layout.tsx #5751

vivekup3424 · 2023-06-26T14:01:05Z

vivekup3424
Jun 26, 2023

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:

```bash
./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:

```javascript
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 want 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.

Answered by vivekup3424

Jun 27, 2023

According to NextJS 13 docs, I can do this by wrapping MoralisProvider in "use client" declaration like this ```"use client";
import { MoralisProvider } from "react-moralis";
export default MoralisProvider;

View full answer

alfaqi · 2023-06-26T14:35:57Z

alfaqi
Jun 26, 2023

MoralisProvider is used in _app.js file
like this:

import Header from "@/components/Header";
import "@/styles/globals.css";
import { MoralisProvider } from "react-moralis";

export default function App({ Component, pageProps }) {
  return (
    <div>
      <MoralisProvider initializeOnMount={false}>
        <Header />
        <Component {...pageProps} />
      </MoralisProvider>
    </div>
  );
}

if not works fine, please share your repo

1 reply

GYaanii09 Jun 27, 2023

I am facing similar issue. Since i am using next app router , there is no _app.js file

vivekup3424 · 2023-06-27T08:20:50Z

vivekup3424
Jun 27, 2023
Author

According to NextJS 13 docs, I can do this by wrapping MoralisProvider in "use client" declaration like this ```"use client";
import { MoralisProvider } from "react-moralis";
export default MoralisProvider;

2 replies

Nlferu Nov 8, 2023

Hi @vivekup3424

Is it working for you? I have managed to wrap my components in page.tsx but it is not working in layout.tsx.

Nlferu Nov 8, 2023

Seems like it is still not compatible with new NextJS and there is MoralisProvider error anyway yelling that you should be using context within provider even if whole {children} is wrapped into it...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Moralis Provider not working in nextjs13, layout.tsx #5751

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Moralis Provider not working in nextjs13, layout.tsx #5751

Uh oh!

vivekup3424 Jun 26, 2023

Replies: 2 comments · 3 replies

Uh oh!

alfaqi Jun 26, 2023

Uh oh!

GYaanii09 Jun 27, 2023

Uh oh!

vivekup3424 Jun 27, 2023 Author

Uh oh!

Nlferu Nov 8, 2023

Uh oh!

Nlferu Nov 8, 2023

vivekup3424
Jun 26, 2023

Replies: 2 comments 3 replies

alfaqi
Jun 26, 2023

vivekup3424
Jun 27, 2023
Author