Struggling with NextJS (app router)

[olliejames-xtz]

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]

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

[maerzhase]

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

[maerzhase]

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:

olliejames-xtz/beacon-nextjs#1

happy to hear any thoughts on this :-)