Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Buildng project using only app router #1171

Open
BjoernRave opened this issue Nov 7, 2023 · 9 comments
Open

Buildng project using only app router #1171

BjoernRave opened this issue Nov 7, 2023 · 9 comments

Comments

@BjoernRave
Copy link
Contributor

BjoernRave commented Nov 7, 2023 •
edited

What version of this package are you using?

2.6.2

What operating system, Node.js, and npm version?

node 20.2, npm: 9.6.6

What happened?

I have

When trying to build my application I got an error. It seems when trying to build the /404 and /505 pages next-translate tries to inject in there or sth and that causes an issue, because NextRouter was not mounted. which could be a sign, that it tries to use next/router import in an app router environment where it should use next/navigation

✓ Creating an optimized production build    
 ✓ Compiled successfully
   Skipping validation of types
   Skipping linting
 ✓ Collecting page data    
   Generating static pages (0/16)  [=   ]Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
    at useRouter (/Users/bjoernrave/projects/valooba-mono/node_modules/next-translate/node_modules/next/dist/client/router.js:146:15)
    at I18nProvider (/Users/bjoernrave/projects/valooba-mono/node_modules/next-translate/lib/cjs/I18nProvider.js:50:37)
    at Wc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)

Error occurred prerendering page "/404". 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 (/Users/bjoernrave/projects/valooba-mono/node_modules/next-translate/node_modules/next/dist/client/router.js:146:15)
    at I18nProvider (/Users/bjoernrave/projects/valooba-mono/node_modules/next-translate/lib/cjs/I18nProvider.js:50:37)
    at Wc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
    at useRouter (/Users/bjoernrave/projects/valooba-mono/node_modules/next-translate/node_modules/next/dist/client/router.js:146:15)
    at I18nProvider (/Users/bjoernrave/projects/valooba-mono/node_modules/next-translate/lib/cjs/I18nProvider.js:50:37)
    at Wc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)

Error occurred prerendering page "/500". 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 (/Users/bjoernrave/projects/valooba-mono/node_modules/next-translate/node_modules/next/dist/client/router.js:146:15)
    at I18nProvider (/Users/bjoernrave/projects/valooba-mono/node_modules/next-translate/lib/cjs/I18nProvider.js:50:37)
    at Wc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
 ⚠ Entire page / deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /
 ⚠ Entire page /[lang]/dashboard/time-tracking deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /[lang]/dashboard/time-tracking
 ⚠ Entire page /[lang]/dashboard/time-tracking deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /[lang]/dashboard/time-tracking
 ⚠ Entire page /[lang]/dashboard/table-plan deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /[lang]/dashboard/table-plan
 ⚠ Entire page /[lang]/dashboard/table-plan deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /[lang]/dashboard/table-plan
 ⚠ Entire page /[lang]/dashboard/order-history deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /[lang]/dashboard/order-history
 ⚠ Entire page /[lang]/dashboard/order-history deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /[lang]/dashboard/order-history
   Generating static pages (4/16)  [==  ] 
 ⚠ Entire page /[lang]/dashboard/products deopted into client-side rendering. https://nextjs.org/docs/messages/deopted
   Generating static pages (13/16) [=== ] 
 ⚠ Entire page /[lang]/dashboard/service-calls deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /[lang]/dashboard/service-calls
 ⚠ Entire page /[lang]/dashboard/products deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /[lang]/dashboard/products
 ⚠ Entire page /[lang]/dashboard/service-calls deopted into client-side rendering. https://nextjs.org/docs/messages/de
 ✓ Generating static pages (16/16) 

> Export encountered errors on following paths:
        /_error: /404
        /_error: /500
 ELIFECYCLE  Command failed with exit code 1.

This is what my next.config.js looks like.

Screenshot 2023-11-07 at 14 35 27

This is what the /[lang]/layout.tsx looks like:

import { redirect } from "next/navigation"
import ThemeRegistry from "@/components/ThemeRegistry"
import useTranslation from "next-translate/useTranslation"

import i18n from "../../i18n"

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const { lang } = useTranslation()

  // Redirect to default locale if lang is not supported. /second-page -> /en/second-page
  if (!i18n.locales.includes(lang)) {
    redirect(`/${i18n.defaultLocale}/${lang}`)
  }

  return (
    <div className="flex min-h-screen w-full flex-col bg-primary-700 text-white">
      <ThemeRegistry lang={lang}>{children}</ThemeRegistry>
    </div>
  )
}

export function generateStaticParams() {
  return i18n.locales.map((locale) => ({
    lang: locale,
  }))
}

When I dont remove i18n from the config this is what I get for every route:

Error occurred prerendering page "/de". Read more: https://nextjs.org/docs/messages/prerender-error
Error: The provided export path '/' doesn't match the '/[lang]' page.
Read more: https://nextjs.org/docs/messages/export-path-mismatch
    at getParams (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/export/helpers/get-params.js:27:15)
    at exportPageImpl (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/export/worker.js:86:47)
    at /Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/export/worker.js:214:22
    at Span.traceAsyncFn (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/trace/trace.js:105:26)
    at Object.exportPage (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/export/worker.js:213:41)
    at execFunction (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/compiled/jest-worker/processChild.js:1:2764)
    at execHelper (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/compiled/jest-worker/processChild.js:1:2422)
    at execMethod (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/compiled/jest-worker/processChild.js:1:2510)
    at process.messageListener (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/compiled/jest-worker/processChild.js:1:1228)
    at process.emit (node:events:511:28)

Error occurred prerendering page "/en/dashboard/table-plan". Read more: https://nextjs.org/docs/messages/prerender-error
Error: The provided export path '/dashboard/table-plan' doesn't match the '/[lang]/dashboard/table-plan' page.
Read more: https://nextjs.org/docs/messages/export-path-mismatch
    at getParams (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/export/helpers/get-params.js:27:15)
    at exportPageImpl (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/export/worker.js:86:47)
    at /Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/export/worker.js:214:22
    at Span.traceAsyncFn (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/trace/trace.js:105:26)
    at Object.exportPage (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/export/worker.js:213:41)
    at execFunction (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/compiled/jest-worker/processChild.js:1:2764)
    at execHelper (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/compiled/jest-worker/processChild.js:1:2422)
    at execMethod (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/compiled/jest-worker/processChild.js:1:2510)
    at process.messageListener (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/compiled/jest-worker/processChild.js:1:1228)
    at process.emit (node:events:511:28)

Error occurred prerendering page "/en/dashboard/time-tracking". Read more: https://nextjs.org/docs/messages/prerender-error
Error: The provided export path '/dashboard/time-tracking' doesn't match the '/[lang]/dashboard/time-tracking' page.
Read more: https://nextjs.org/docs/messages/export-path-mismatch
    at getParams (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/export/helpers/get-params.js:27:15)
    at exportPageImpl (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/export/worker.js:86:47)
    at /Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/export/worker.js:214:22
    at Span.traceAsyncFn (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/trace/trace.js:105:26)
    at Object.exportPage (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/export/worker.js:213:41)
    at execFunction (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/compiled/jest-worker/processChild.js:1:2764)
    at execHelper (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/compiled/jest-worker/processChild.js:1:2422)
    at execMethod (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/compiled/jest-worker/processChild.js:1:2510)
    at process.messageListener (/Users/bjoernrave/projects/valooba-mono/apps/pds/node_modules/next/dist/compiled/jest-worker/processChild.js:1:1228)
    at process.emit (node:events:511:28)
@aralroca
Copy link
Owner

aralroca commented Nov 7, 2023

Probably is related to #1144 about generateStaticParams

@BjoernRave
Copy link
Contributor Author

Possible, but as far as I can tell in the linked issue the problem is due to the i18n object being present in the config. since I am only on app router I removed it from my next.config.js file as you can see above, but the NextRouter was not mounted error persists. If I remove generateStaticParams and dont remove the i18n object I still get this error:

Error occurred prerendering page "/de/404". 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 (/Users/bjoernrave/projects/valooba-mono/node_modules/next-translate/node_modules/next/dist/client/router.js:146:15)
    at I18nProvider (/Users/bjoernrave/projects/valooba-mono/node_modules/next-translate/lib/cjs/I18nProvider.js:50:37)
    at Wc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:68:44)
    at Zc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:253)
    at Z (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at Zc (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:70:481)
    at Z (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:76:89)
    at $c (/Users/bjoernrave/projects/valooba-mono/node_modules/react-dom/cjs/react-dom-server.browser.production.min.js:78:98)
 ✓ Generating static pages (8/8) 

> Export encountered errors on following paths:
        /_error: /404
        /_error: /500
        /_error: /de/404
        /_error: /de/500
        /_error: /en/404
        /_error: /en/500

@andre-lergier
Copy link

andre-lergier commented Nov 16, 2023 •
edited

I can confirm this issue, I also get the following error:

> Export encountered errors on following paths:
        /_error: /404
        /_error: /500

It only appears since I deleted the pages directory.

@hoffination
Copy link

I'm also getting a similar issue when upgrading to Next 14 in my team's application. I see the errors on paths. Our application is still using page routes for every URL.

@cglacet
Copy link

cglacet commented Dec 5, 2023 •
edited

I'm no expert of this project, but I doubt the example is functional, look at this redirect:

redirect(`/${i18n.defaultLocale}/${lang}`)

I guess here should be a redirect to the requested path and not to the root, also this /en/non-supported-lang redirect doesn't make any sense to me, unless lang is not a language identifier but a page subpath (which would be even stranger).

EDIT

I checked, lang is what I thought so this would make more sense:

redirect(`/${i18n.defaultLocale}`)

I also checked and the example project doesn't work properly under next@13.5.5-canary.19.

@cglacet
Copy link

cglacet commented Dec 5, 2023

I found a solution here that works for me. It requires a few tweaks but overall, all the ingredients are here.

@X7Becka
Copy link

X7Becka commented Dec 12, 2023

I found a solution here that works for me. It requires a few tweaks but overall, all the ingredients are here.

I see no solution in link you provided.
Still no idea how to avoid using next/router instead of next/navigate

@cglacet
Copy link

cglacet commented Dec 19, 2023

In the end I switched to another package because I think this one is not ready yet. I've tried quite hard but without success. I've used next international which worked flawlessly With the new app directory (even with the latest versions of next).

@tresorama
Copy link

tresorama commented Feb 1, 2024 •
edited

Tested today (next@14.1.0) but cannot make this package working.

Problems encountered

  • The official example with app dir is not working.

  • In layout.tsx is not possible to get the current request pathname, because a layout "wraps" more than one request. A better place to handle "HTTP redirection" (/about to /en/about) is Next.js middleware, where pathname is available. Said so:

  • The middleware never runs, in order to make it "run" it had to remove nextTranslate(nextConfig) from next.config.js, but doing so the entire library is disabled.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@hoffination @andre-lergier @aralroca @cglacet @BjoernRave @tresorama @X7Becka