"No translate routes data found. next-translate-routes plugin is probably missing from next.config.js"

[yzmp]

I keep getting this error although I followed all the basic steps. I can even see the debug log in the terminal with all the redirects and rewrites created by the plugin, but somehow I'm still getting this error.

What I did:

1. Wrap you next config with the next-translate-routes plugin

// next.config.js
const { i18n } = require("./next-i18next.config");
const withTranslateRoutes = require("next-translate-routes/plugin")

module.exports = withTranslateRoutes({
  pageExtensions: ["page.tsx", "page.ts", "page.jsx", "page.js"],
  reactStrictMode: true,
  eslint: {
    ignoreDuringBuilds: true,
  },
  esModule: true,
  images: {
    domains: [
      //...
    ],
  },
  i18n,
  translateRoutes: {
    debug: true,
  },
});

2. Define your routes

// _routes.json
{
  "/": {
    "en": "hi",
    "es": "hola",
    "pt-BR": "oi"
  }
}

3. Wrap you _app component with the withTranslateRoutes hoc

import { appWithTranslation } from "next-i18next";
import { wrapper } from "../redux";
import { withTranslateRoutes } from "next-translate-routes";

function MyApp({ Component, pageProps }: AppProps) {
  /**/
  return (
    <>
      <Component {...pageProps} />
    </>
  );
}

export default withTranslateRoutes(
  appWithTranslation(wrapper.withRedux(MyApp))
);

What I get in terminal:

[next-translate-routes] - Redirects: [
  {
    source: '/pt-BR/(hi|hola)/downloads/',
    destination: '/oi/downloads/',
    locale: false,
    permanent: false
  },
  {
    source: '/en/(oi|hola)/downloads/',
    destination: '/en/hi/downloads/',
    locale: false,
    permanent: false
  },
...
]
[next-translate-routes] - Rewrites: [
  {
    source: '/(oi|hi|hola)/downloads/',
    destination: '/downloads/'
  },
  {
    source: '/(oi|hi|hola)/about/',
    destination: '/about/'
  },
...
]

And eventually:

Error: [next-translate-routes] - No translate routes data found. next-translate-routes plugin is probably 
missing from next.config.js
    at withTranslateRoutes (\node_modules\next-translate-routes\react\withTranslateRoutes.js:63:15)
    at eval (webpack-internal:///./src/pages/_app.page.tsx:71:140)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

I have searched for other issues here and in Google, but haven't find anything similar. What am I missing?

[simonhenke]

I had the same issue. After many unsuccessful tries to fix this, I installed v.1.7.2 instead of the latest release and now it's working fine. I'm on Nextjs version 11.1.2 with Preact 10.5.14.

[simonhenke]

Just upped the version incrementally and it seems like v. 1.8.0-1 is the latest version that still works for me.
So 1.8.0-2 seems to be the issue in my case, or the following commit:
8bfee0f

any idea @cvolant ?

[cvolant]

Thank you both for reporting the issue. Having identified the precise version that introduced the bug is a great help. I will look at it as soon as I can.

[krystianjj]

Hi, I have the same issue, but my problem is little difference, because I use NX monorepo, and if I want to work next-translate in this monorepo I must add env variable NEXT_TRANSLATE_PATH=apps/projectName I think there is similar problem for me. Is there any variable where I can set up this? My error is Error: [next-translate-routes] - No pages folder found.

[cvolant]

Currently working on this issue...
@yzmp, @simonhenke, ...

1. Are you on Windows?
2. Could you give me the path to you _app file? Something like /pages/_app.js...

[cvolant]

@krystianjj your problem is different: what you are looking for is probably the pageDirectory config.
In next.config.js:

translateRoutes: {
  pageDirectory: 'apps/projetName',
}

See the configuration section in the docs.

[yzmp]

Currently working on this issue... @yzmp, @simonhenke, ...

1. Are you on Windows?
2. Could you give me the path to you _app file? Something like /pages/_app.js...

@cvolant:

1. Yes
2. src/pages/_app.page.tsx

[krystianjj]

@krystianjj your problem is different: what you are looking for is probably the pageDirectory config. In next.config.js:

translateRoutes: {
  pageDirectory: 'apps/projetName',
}

See the configuration section in the docs.

@cvolant
Unfortunately this did not solve the problem.
I want to use your packege with this framework -> https://nx.dev/

[cvolant]

@yzmp I suspect that it comes from slashes in paths: \ on Window and / on Linux.
I released next-translate-routes@1.9.0-3 yesterday, and it includes a fix for this issue: could you try it and tell me if it works?

[cvolant]

@krystianjj I never used Nx yet: I tried to create a workspace to check the filetree, but it is standard Next.js file tree.
Do you have this filetree too ?

root/
├─ ...
├─ apps/
│     ├─ next-app/
│     │     ├─ ...
│     │     ├─ next.config.js
│     │     ├─ pages/
│     │     │     ├─ _app.js // or app.tsx or else
│     │     │     ├─ ...

If you are on Windows, then it is probably the problem describe in my previous comment: could you try next-translate-routes@1.9.0-3 too?

[simonhenke]

@cvolant I'm also on Windows and the path is /pages/_app.page.tsx.
I'm excited to try out the new version (probably tomorrow), I'll let you know if it helped :) Thanks!

[simonhenke]

@cvolant On 1.9.0-3, when I start the app, I now get the following error:

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string or an instance of Buffer or URL. Received undefined
    at Object.readdirSync (fs.js:1038:10)
    at getAllRoutesFiles (C:\Users\...\node_modules\next-translate-routes\plugin\routesFiles.js:46:39)

[cvolant]

@simonhenke could you try the latest version? next-translate-routes@1.9.1

[simonhenke]

@cvolant I'm still getting the same error (ERR_INVALID_ARG_TYPE). In our project we currently have a branch on which we updated to Next12. I'll test the latest version of this lib there as well, maybe that works.

[simonhenke]

@cvolant Seems to work on Next12, nice! :)