Issue with Next.js 13 and Solana Wallet Adapter packages

Question

I am trying to implement the Solana wallet adapter to a nextjs 13 project using layout.tsx file. The Solana Wallet adapter was working with no problem on previous next.js versions. I tried to downgrade Solana packages' versions but that didn't work either

solana wallet adapter docs --> https://github.com/solana-labs/wallet-adapter/blob/master/APP.md

working demo with previous version of next.js --> https://github.com/solana-labs/wallet-adapter/tree/master/packages/starter/nextjs-starter

Error: 
  x Return statement is not allowed here
    ,-[/Users/alperozyurt/Work/TadaaLabs/dashboard/tadaa-dashboard/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:
    0: error was recoverable, but proceeding would result in wrong codegen
    1: Syntax Error

How do I solve this issue

Answer 1

Solved this by separating the WalletProvider component as a Client component. All components inside the app/ directory will be treated as Server components, unless you annotate the file with 'use client'

See Client components here