search

airgap-it / beacon-sdk

The beacon sdk allows developers of dApps and wallets on Tezos to implement the wallet interaction standard tzip-10.
https://walletbeacon.io
MIT License
103 stars 65 forks source link

Struggling with NextJS (app router) #783

Open olliejames-xtz opened 6 months ago

olliejames-xtz commented 6 months ago

Hey all 👋

In our kanvas projects and newer nextjs projects across the board we are often running into issues with beacon, the latest of which can be seen in this bare minimum project here:

https://github.com/olliejames-xtz/beacon-nextjs

When running yarn dev my server console is flooded with errors such as:

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./node_modules/@taquito/beacon-wallet/dist/taquito-beacon-wallet.es6.js
./app/providers/ConnectionProvider/beacon.ts
./app/providers/ConnectionProvider/index.tsx

./node_modules/@airgap/beacon-ui/dist/esm/index.js
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template').

Import trace for requested module:
./node_modules/@airgap/beacon-ui/dist/esm/index.js
./node_modules/@airgap/beacon-dapp/dist/esm/index.js
./node_modules/@taquito/beacon-wallet/dist/taquito-beacon-wallet.es6.js
./app/providers/ConnectionProvider/beacon.ts
./app/providers/ConnectionProvider/index.tsx

The connection does still seem to work in dev mode However I've seen cases where such errors occur in production which has lead to my pages 500 erroring

Most of the time when running yarn build Its fails with this error:

   Generating static pages (0/5)  [    ]GOT MOCK POST MESSAGE { target: 'toExtension', payload: 'ping' }
GOT MOCK POST MESSAGE { target: 'toExtension', payload: 'ping' }
TypeError: (0 , T.template) is not a function
    at 33651 (/Users/olliejames/src/beacon-nextjs/.next/server/chunks/619.js:39:335745)
    at t (/Users/olliejames/src/beacon-nextjs/.next/server/webpack-runtime.js:1:143)
    at 54065 (/Users/olliejames/src/beacon-nextjs/.next/server/app/_not-found/page.js:1:3301)
    at Object.t [as require] (/Users/olliejames/src/beacon-nextjs/.next/server/webpack-runtime.js:1:143)
    at require (/Users/olliejames/src/beacon-nextjs/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:16:18365)
    at I (/Users/olliejames/src/beacon-nextjs/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:94362)
    at C (/Users/olliejames/src/beacon-nextjs/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:92913)
    at rP (/Users/olliejames/src/beacon-nextjs/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:33974)
    at nN (/Users/olliejames/src/beacon-nextjs/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:62304)
    at nB (/Users/olliejames/src/beacon-nextjs/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538) {
  digest: '4242103062'
}

Error occurred prerendering page "/_not-found". Read more: https://nextjs.org/docs/messages/prerender-error

TypeError: (0 , T.template) is not a function
    at 33651 (/Users/olliejames/src/beacon-nextjs/.next/server/chunks/619.js:39:335745)
    at t (/Users/olliejames/src/beacon-nextjs/.next/server/webpack-runtime.js:1:143)
    at 54065 (/Users/olliejames/src/beacon-nextjs/.next/server/app/_not-found/page.js:1:3301)
    at Object.t [as require] (/Users/olliejames/src/beacon-nextjs/.next/server/webpack-runtime.js:1:143)
    at require (/Users/olliejames/src/beacon-nextjs/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:16:18365)
    at I (/Users/olliejames/src/beacon-nextjs/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:94362)
    at C (/Users/olliejames/src/beacon-nextjs/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:92913)
    at rP (/Users/olliejames/src/beacon-nextjs/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:33974)
    at nN (/Users/olliejames/src/beacon-nextjs/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:62304)
    at nB (/Users/olliejames/src/beacon-nextjs/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:67538)
TypeError: (0 , T.template) is not a function
    at 33651 (/Users/olliejames/src/beacon-nextjs/.next/server/chunks/619.js:39:335745)
    at t (/Users/olliejames/src/beacon-nextjs/.next/server/webpack-runtime.js:1:143)
    at 54065 (/Users/olliejames/src/beacon-nextjs/.next/server/app/page.js:1:3958)
    at t (/Users/olliejames/src/beacon-nextjs/.next/server/webpack-runtime.js:1:143)
    at 88743 (/Users/olliejames/src/beacon-nextjs/.next/server/app/page.js:1:3595)
    at Object.t [as require] (/Users/olliejames/src/beacon-nextjs/.next/server/webpack-runtime.js:1:143)
    at require (/Users/olliejames/src/beacon-nextjs/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:16:18365)
    at I (/Users/olliejames/src/beacon-nextjs/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:94362)
    at /Users/olliejames/src/beacon-nextjs/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:96668
    at F._fromJSON (/Users/olliejames/src/beacon-nextjs/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:97106) {
  digest: '341694990'
}
   Generating static pages (4/5)  [=   ]
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error

TypeError: (0 , T.template) is not a function
    at 33651 (/Users/olliejames/src/beacon-nextjs/.next/server/chunks/619.js:39:335745)
    at t (/Users/olliejames/src/beacon-nextjs/.next/server/webpack-runtime.js:1:143)
    at 54065 (/Users/olliejames/src/beacon-nextjs/.next/server/app/page.js:1:3958)
    at t (/Users/olliejames/src/beacon-nextjs/.next/server/webpack-runtime.js:1:143)
    at 88743 (/Users/olliejames/src/beacon-nextjs/.next/server/app/page.js:1:3595)
    at Object.t [as require] (/Users/olliejames/src/beacon-nextjs/.next/server/webpack-runtime.js:1:143)
    at require (/Users/olliejames/src/beacon-nextjs/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:16:18365)
    at I (/Users/olliejames/src/beacon-nextjs/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:94362)
    at /Users/olliejames/src/beacon-nextjs/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:96668
    at F._fromJSON (/Users/olliejames/src/beacon-nextjs/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:97106)
 ✓ Generating static pages (5/5)

> Export encountered errors on following paths:
        /_not-found/page: /_not-found
        /page: /
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Historically we've had a fair few issues with beacon, it would be great to have a working NextJS example on a new version of NextJS, I think it would help a lot of people seeing as its the most popular web framework Feel free to fork my project above or I'd be happy to add anyone as a collaborator if you know how we can resolve this!

IsaccoSordo commented 5 months ago

Hi @olliejames-xtz, we opened the following issue to the Soild team: #2175

maerzhase commented 5 months ago

we are struggling with exactly the same problem 😭 its pretty intense

maerzhase commented 4 months ago

we might have found a "workaround". we will further test this next week. for now i created a PR that shows what changes we've done to work around all the errors:

https://github.com/olliejames-xtz/beacon-nextjs/pull/1

happy to hear any thoughts on this :-)