NextRouter was not mounted

[TheMikeyRoss]

/pages directory

What version of this package are you using?
2.6.2

What operating system, Node.js, and npm version?
Windows 10
Node: 18.20.3
Npm: 10.7.0

What happened?
When i try to build my next.js app I get the following error (for each and every page)

Error: NextRouter was not mounted. https://nextjs.org/docs/messages/next-router-not-mounted
    at useRouter (X:\development\Sikka\node_modules\.pnpm\next@14.2.3_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\next\dist\client\router.js:146:15)
    at I18nProvider (X:\development\Sikka\node_modules\.pnpm\next-translate@2.6.2_next@14.2.3_react-dom@18.3.1_react@18.3.1__react@18.3.1__react@18.3.1\node_modules\next-translate\lib\cjs\I18nProvider.js:50:37)
    at Wc (X:\development\Sikka\node_modules\.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:68:44)
    at Zc (X:\development\Sikka\node_modules\.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:253)
    at Z (X:\development\Sikka\node_modules\.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at Zc (X:\development\Sikka\node_modules\.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:70:481)
    at Z (X:\development\Sikka\node_modules\.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:89)
    at $c (X:\development\Sikka\node_modules\.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:78:98)
    at bd (X:\development\Sikka\node_modules\.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:77:404)
    at Z (X:\development\Sikka\node_modules\.pnpm\react-dom@18.3.1_react@18.3.1\node_modules\react-dom\cjs\react-dom-server.browser.production.min.js:76:217)

What did you expect to happen?

It used to build the app with no issues

Are you willing to submit a pull request to fix this bug?
Definitely if I know the cause of the issue

[TheMikeyRoss]

Im not using the i18nProvider btw

[TheMikeyRoss]

This is my i18n.js config:

const { ALL_LOCALES, DEFAULT_LOCALE } = require("@shared/constants");

module.exports = {
  locales: ALL_LOCALES,
  defaultLocale: DEFAULT_LOCALE,
  pages: {
    "*": [
      "common",
      "pages",
      "auth",
      "errors",
      "permissions",
      "settings",
      "toast",
      "themes",
      "billing",
      "fields",
      "models",
      "validation",
    ],
  },
  loadLocaleFrom: async (locale, namespace) =>
    import(`../../shared/translations/locales/${locale}/${namespace}`).then(
      (r) => r.default,
    ),
};

[TheMikeyRoss]

And this is my next.config.js

/** @type {import('next').NextConfig} */

const nextTranslate = require("next-translate-plugin");
const { version } = require("./package.json");

const {
  ALL_LOCALES,
  DEFAULT_LOCALE,
  ASSETS_BUCKET_1,
} = require("@shared/constants");

const nextConfig = {
  i18n: {
    locales: ALL_LOCALES,
    defaultLocale: DEFAULT_LOCALE,
    localeDetection: false,
  },
  publicRuntimeConfig: { version },
  images: {
    remotePatterns: [
      { protocol: "https", hostname: "res.cloudinary.com" },
      { protocol: "https", hostname: ASSETS_BUCKET_1 },
    ],
  },
};

module.exports = (phase, { defaultConfig }) => {
  const configWithTranslate = nextTranslate(nextConfig);
  return configWithTranslate;
};

[TheMikeyRoss]

For some reason it says the source is I18nProvider even though im not using it. (it's supposedly used within next-translate)

[TheMikeyRoss]

I went all the way inside the file ..../node_modules/.pnpm/next-translate@2.6.2_next@14.2.3 ......... and commented out this line:

And now the error is gone and it works fine

[TheMikeyRoss]

When I add use client to the top of my _app.tsx the error is gone but the translations are gone

[zaaakher]

Try pnpm add encoding -D within the next.js app with the build issue.

[TheMikeyRoss]

Try pnpm add encoding -D within the next.js app with the build issue.

Oh wow that actually solved it! Thank you very much @zaaakher !

[TheMikeyRoss]

That worked locally but the problem still exist in my github action workflow

[TheMikeyRoss]

Actuallly now it's happening in other workspaces that I haven't touched in a while but they have next-translate in them

[TheMikeyRoss]

Im getting the error NextRouter was not mounted when I run next dev or next build

And I can only fix the issue by commenting the line mentioned here #1217 (comment)

@aralroca Could we possibily add a check if NextRouter is mounted or not?

[TheMikeyRoss]

[zaaakher]

@TheMikeyRoss What's your react and react-dom versions?

[TheMikeyRoss]

They were 18.3.1 and I tried lowering the versions of react and react-dom to 18.2.0 in order to match the ones in next-translate but I still get the same error during build

[TheMikeyRoss]

Ok so I created an entirly new next.js app within my mono repo with the following next.config:

/** @type {import('next').NextConfig} */
import nextTranslate from "next-translate-plugin";

import {
  ALL_LOCALES,
  DEFAULT_LOCALE,
  ASSETS_BUCKET_1,
} from "@shared/constants";

import { version } from "./package.json";

const nextConfig = {
  i18n: {
    locales: ALL_LOCALES,
    defaultLocale: DEFAULT_LOCALE,
    localeDetection: false,
  },
  publicRuntimeConfig: { version },
  images: {
    remotePatterns: [
      { protocol: "https", hostname: "res.cloudinary.com" },
      { protocol: "https", hostname: ASSETS_BUCKET_1 },
    ],
  },
};

export default nextTranslate(nextConfig);

And I got the same error.

When I remove nextTranslate HOC The error disappear and the build succeeds

[TheMikeyRoss]

This works:

const nextConfig = {
  i18n: {
    locales: ["ar", "en"],
    defaultLocale: "ar",
  },
};

export default nextConfig;

This fails

import nextTranslate from "next-translate-plugin";

const nextConfig = {
  i18n: {
    locales: ["ar", "en"],
    defaultLocale: "ar",
  },
};


export default nextTranslate(nextConfig);

[TheMikeyRoss]

I downgraded next.js from 14.2.3 to 14.2.2 and still the same issue

[TheMikeyRoss]

I've deleted the entire repo and cloned it again and still get the same error

[TheMikeyRoss]

@aralroca I tried using next-translate v 3.0.0-canary.4 and now building next.js throws this error:

[TheMikeyRoss]

I downgraded to 3.0.0-canary.2 for both next-translate and next-translate-plugin and now the NextRouter was not mounted error is back

[TheMikeyRoss]

I'm absolutely losing my mind

[zaaakher]

I went all the way inside the file ..../node_modules/.pnpm/next-translate@2.6.2_next@14.2.3 ......... and commented out this line:

And now the error is gone and it works fine

You can use always put a band-aid with patch-package to make that change permanent. Or if you're using pnpm you can use the built-in patch command pnpm patch (read more)