Vercel Functions : No routes tree defined. about next-translate-routes

[dperetti]

Having the same issue of empty NEXT_PUBLIC_ROUTES environment variable.
So I tried to manually set it in Vercel's interface and got this.

Then I tried to manually set it in next.config.js but using a fake, smaller one and it worked.
So it definitely appears that we've got a size limit issue.
The problem is that with route definitions, it can happen easily.
Any suggestion welcome!

[cvolant]

In order to get the translations client side, the withTranslateRoutes plugin sets a public env var containing your routes tree. The next-translate-routes/link reads from this env var to translate the route.
You get the > next-translate-routes - No routes tree defined. next-translate-routes plugin is probably missing from next.config.js error if this env var is not found.

Do you have any idea why this env var is not set on the Vercel Function?

[dperetti]

I'm afraid passing the stringified json routes via the NEXT_PUBLIC_ROUTES env is a dead end.
It probably has to be revamped so routes are loaded globally like next-translate does with i18nConfig.

[dperetti]

Actually it would even make sense to inject the routes into a property of i18nConfig and modify getRoutesTree() so it makes use of it.

[cvolant]

Very interesting.
You are probably right about the env var being a dead end...

The problem with config injection by an app hoc is that it should be imported from a file. If I understand correctly, next-translate uses this method to make user-made config available client side, but in next-translate-routes case, it is some computed data.

• We could try to edit the config file and add computed values...
• Or maybe something is possible with some webpack magic...
• Or, we could keep the env var trick and split the stringified values in as many env vars as needed, with a dynamic name, NEXT_PUBLIC_ROUTES_1, NEXT_PUBLIC_ROUTES_2, etc., then concat them back in getRoutesTree().

[dperetti]

Unfortunately it's not 4KB per variable, it's 4KB in total!

Anyway, I had to find a quick and dirty workaround for the website I'm working on and here is what I did.

I forked your project and just changed getRouteTree() like this:

declare global {
  var i18nConfig: any & { routesTree: TRouteBranch }

  interface Window {
    i18nConfig: Object & { routesTree: TRouteBranch };
  }
}

export const getRoutesTree = () => {
  if (typeof window === 'undefined') {
    return global.i18nConfig?.routesTree || {}
  }
  return window.i18nConfig?.routesTree || {}
}

Now, in my project I have a command line script that generates a routesTree.json file.

And routesTree is injected into i18n.js.

And it does the trick!

[cvolant]

Unfortunately it's not 4KB per variable, it's 4KB in total!

Ok, so env var id definitely a dead end.
I think webpack DefinePlugin could do the job. I will try it, and if it does not, I will try something close to your solution.

[cvolant]

@antoninbeaufort, @dperetti, @wangwailok, could you try with next-translate-routes@next and tell me if it works for you?

[antoninbeaufort]

I was just trying it out, the first mistake is gone, but the second one remains:

2021-12-29T18:58:54.091Z	143f8f3a-631a-4859-8048-9251ab38b006	ERROR	Error: ENOENT: no such file or directory, scandir '/var/task/public/locales/fr'
    at Object.readdirSync (fs.js:1047:3)
    at getLocaleNamespaces (/var/task/node_modules/next-i18next/dist/commonjs/config/createConfig.js:175:23)
    at /var/task/node_modules/next-i18next/dist/commonjs/config/createConfig.js:181:20
    at Array.map (<anonymous>)
    at getNamespaces (/var/task/node_modules/next-i18next/dist/commonjs/config/createConfig.js:180:44)
    at createConfig (/var/task/node_modules/next-i18next/dist/commonjs/config/createConfig.js:221:29)
    at _callee$ (/var/task/node_modules/next-i18next/dist/commonjs/serverSideTranslations.js:199:53)
    at tryCatch (/var/task/node_modules/regenerator-runtime/runtime.js:63:40)
    at Generator.invoke [as _invoke] (/var/task/node_modules/regenerator-runtime/runtime.js:294:22)
    at Generator.next (/var/task/node_modules/regenerator-runtime/runtime.js:119:21) {
  errno: -2,
  syscall: 'scandir',
  path: '/var/task/public/locales/fr',
  page: '/mes-commandes'
}
RequestId: 143f8f3a-631a-4859-8048-9251ab38b006 Error: Runtime exited with error: exit status 1
Runtime.ExitError

But it looks like it's related to the next-i18next package now. (See i18next/next-i18next#1552)

[wangwailok]

I was trying the 1.7.0-1

error - ./pages/_app.tsx Error: [next-translate-routes] - No withTranslateRoutes high order component found in _app.

[cvolant]

I was just trying it out, the first mistake is gone, but the second one remains:

2021-12-29T18:58:54.091Z	143f8f3a-631a-4859-8048-9251ab38b006	ERROR	Error: ENOENT: no such file or directory, scandir '/var/task/public/locales/fr'
    at Object.readdirSync (fs.js:1047:3)
    at getLocaleNamespaces (/var/task/node_modules/next-i18next/dist/commonjs/config/createConfig.js:175:23)
    at /var/task/node_modules/next-i18next/dist/commonjs/config/createConfig.js:181:20
    at Array.map (<anonymous>)
    at getNamespaces (/var/task/node_modules/next-i18next/dist/commonjs/config/createConfig.js:180:44)
    at createConfig (/var/task/node_modules/next-i18next/dist/com
   [...]
   Error: Runtime exited with error: exit status 1
Runtime.ExitError

But it looks like it's related to the next-i18next package now. (See i18next/next-i18next#1552)

Yes, it comes from next-i18next. If you remove next-translate-routes, do you still have the error?
Did you see this one: i18next/next-i18next#1553

[cvolant]

I was trying the 1.7.0-1

error - ./pages/_app.tsx Error: [next-translate-routes] - No withTranslateRoutes high order component found in _app.

Ops, I see. I will fix it soon. For now you can try importing 'next-translate-routes' with single quotes.

[antoninbeaufort]

Yes, it comes from next-i18next. If you remove next-translate-routes, do you still have the error? Did you see this one: isaachinman/next-i18next#1553

I don't know because I didn't need it, I've just added localePath in my next.config.js and it's fully working now.
Like this :

module.exports = {
    i18n: {
      defaultLocale: 'fr',
      locales: ['fr', 'en'],
      localePath: path.resolve('./public/locales')
    },
  };