search

aptos-labs / aptos-wallet-adapter

A monorepo modular wallet adapter for Aptos applications
https://aptos-labs.github.io/aptos-wallet-adapter/
Apache License 2.0
91 stars 98 forks source link

Next.js 13 App Router Issue #106

Open skilldeliver opened 1 year ago

skilldeliver commented 1 year ago

Hello, I am working on a project with Next.js 13 and it seems that there is this error when I am using useWallet in any file of the app dir.

error - node_modules/@aptos-labs/wallet-adapter-react/dist/index.js (37:2) @ DEFAULT_COUNTEXT
error - TypeError: (0 , import_react.createContext) is not a function
    at eval (webpack-internal:///(sc_server)/./node_modules/@aptos-labs/wallet-adapter-react/dist/index.js:39:52)
    at Object.(sc_server)/./node_modules/@aptos-labs/wallet-adapter-react/dist/index.js (/home/homefolder/dev/project/web_app/frontend/.next/server/app/home/page.js:579:1)
    at __webpack_require__ (/home/homefolder/dev/project/web_app/frontend/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(sc_server)/./src/app/components/AppContext.tsx:30:91)
    at Module.(sc_server)/./src/app/components/AppContext.tsx (/home/homefolder/dev/project/web_app/frontend/.next/server/app/home/page.js:1820:1)
    at __webpack_require__ (/home/homefolder/dev/project/web_app/frontend/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(sc_server)/./src/app/layout.tsx:12:80)
    at Module.(sc_server)/./src/app/layout.tsx (/home/homefolder/dev/project/web_app/frontend/.next/server/app/home/page.js:1923:1)
    at Function.__webpack_require__ (/home/homefolder/dev/project/web_app/frontend/.next/server/webpack-runtime.js:33:43)
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  type: 'TypeError',
  page: '/home'
}

Implementing the old way with pages and _app.tsx has no problems.

0xmaayan commented 1 year ago

looks like our demo app uses Next version 13.0.0 https://github.com/aptos-labs/aptos-wallet-adapter/blob/main/apps/nextjs-example/package.json#L30 , what is the exact Next version you are trying to use?

skilldeliver commented 1 year ago

looks like our demo app uses Next version 13.0.0 https://github.com/aptos-labs/aptos-wallet-adapter/blob/main/apps/nextjs-example/package.json#L30 , what is the exact Next version you are trying to use?

yes, I am trying to use the wallet adapter with Next 13.0.0 and the new app directory that I am talking about is this one: https://beta.nextjs.org/docs/routing/fundamentals, looks like your demo app is developed in the old way with pages/

cylim commented 9 months ago

looks like our demo app uses Next version 13.0.0 https://github.com/aptos-labs/aptos-wallet-adapter/blob/main/apps/nextjs-example/package.json#L30 , what is the exact Next version you are trying to use?

yes, I am trying to use the wallet adapter with Next 13.0.0 and the new app directory that I am talking about is this one: https://beta.nextjs.org/docs/routing/fundamentals, looks like your demo app is developed in the old way with pages/

For any pages that involving the wallets, should be done in browser side. The simple solution is add 'use client' on top of the file imported AptosWalletAdapterProvider.