create-tamagui with App Router throws error NextRouter was not mounted

[gloredo]

I started this issue in the tamagui repo, but decided to open it here after finding that removing the calls to Solito solved the problem.

• Changes to the original next-expo-solito-monorepo:
  • Run cd packages/app && yarn add solito@canary to install Solito v4
  • Run cd packages/app && yarn add next@latest && yarn add -D eslint-config-next@latest to update next.js
  • Delete folder apps/next/pages
  • In apps/next/next.config.js set experimental.appDir: true (optional: This option is no longer needed as of Next.js 13.4. The App Router is now stable)
  • Run cd packages/ui && yarn add @tamagui/config@latest to fix Cannot find module '@tamagui/config' or its corresponding type declarations. in apps/next/app/TamaguiProvider.tsx
  • In apps/next/app/TamaguiProvider.tsx change Tamagui.getCSS to Tamagui.getNewCSS
  • In packages/app/features/user/detail-screen.tsx change import { createParam } from 'solito' to import { useParams } from 'solito/navigation'

Throws error when cd apps/next && yarn build:

- info Creating an optimized production build  
- info Compiled successfully
- info Skipping validation of types
- info Linting  
- info Collecting page data  
[    ] - info Generating static pages (0/3)Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
    at useRouter (/project/sandbox/apps/next/.next/server/chunks/638.js:26250:15)
    at useRouter (/project/sandbox/apps/next/.next/server/chunks/638.js:47723:44)
    at useLink (/project/sandbox/apps/next/.next/server/chunks/638.js:47795:20)
    at HomeScreen (/project/sandbox/apps/next/.next/server/app/page.js:450:57)
    at Je (/project/sandbox/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:121:272)
    at Z (/project/sandbox/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:128:91)
    at Je (/project/sandbox/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:122:9)
    at Je (/project/sandbox/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:127:11)
    at Z (/project/sandbox/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:128:91)
    at Ke (/project/sandbox/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:131:155)

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
    at useRouter (/project/sandbox/apps/next/.next/server/chunks/638.js:26250:15)
    at useRouter (/project/sandbox/apps/next/.next/server/chunks/638.js:47723:44)
    at useLink (/project/sandbox/apps/next/.next/server/chunks/638.js:47795:20)
    at HomeScreen (/project/sandbox/apps/next/.next/server/app/page.js:450:57)
    at Je (/project/sandbox/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:121:272)
    at Z (/project/sandbox/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:128:91)
    at Je (/project/sandbox/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:122:9)
    at Je (/project/sandbox/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:127:11)
    at Z (/project/sandbox/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:128:91)
    at Ke (/project/sandbox/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:131:155)
- info Generating static pages (3/3)

> Export encountered errors on following paths:
        /page: /

Reproduction

https://codesandbox.io/p/sandbox/create-tamagui-appdir-build-error-65jk6z

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Memory: 12.88 GB / 23.93 GB
  Binaries:
    Node: 18.16.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.8.0 - C:\Program Files\nodejs\npm.CMD
    Watchman: 20210110.135312.0 - C:\ProgramData\chocolatey\bin\watchman.EXE
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (114.0.1823.67)
    Internet Explorer: 11.0.19041.1566

[nandorojo]

Thanks for the good reproduction. I wonder if some Next.js-related code is being imported by your app directly at the wrong time. Checking now.

[nandorojo]

So, the issue is, as far as the repro goes, it's using the tamagui starter rather than the solito one...so it has a lot of tamagui-related code that may be causing this, rather than solito's. Can you clarify which line getting removed fixes it? is it the homepage that's broken because of a solito import? Thanks!

[nandorojo]

Ahhh, I see the issue! You imported import { useLink } from 'solito/link'. However, as the docs state, to use this with app router, you need to import { useLink } from 'solito/navigation'. That should fix it!

[gloredo]

Thanks for the reply @nandorojo

I had try this but I get Module '"solito/navigation"' has no exported member 'useLink'.

[nandorojo]

please upgrade