serverSideTranslations crashes when called inside getServerSideProps on Vercel

[jakubHynek]

Describe the bug

When deployed to Vercel the serverSideTranslations function crashes when called inside getServerSideProps. When called in getStaticProps it works as expected. Locally everything runs fine.

The deployed Vercel serverless function in which it runs gives me error:

2021-11-28T16:16:28.536Z	1d6d712f-02d3-4029-8277-7bf418949555	ERROR	Error: ENOENT: no such file or directory, scandir '/var/task/public/locales/cs'
    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/cs',
  page: '/ssr'
}
RequestId: 1d6d712f-02d3-4029-8277-7bf418949555 Error: Runtime exited with error: exit status 1
Runtime.ExitError

Occurs in next-i18next version

^9.2.0

Steps to reproduce

Reproduction repository:

https://github.com/jakubHynek/vercel-next-18next

Running example

https://translations-wo-monorepo-kubhynek.vercel.app/

I initialized app using yarn create next-app --typescript and added simple translation using next-i18next.

• There is index page (/) -- with serverSideTranslations called inside getStaticProps, there is a button that takes you to /ssr page
• There is ssr page (/ssr) -- with serverSideTranslations called inside getServerSideProps -- this page crashes

Steps

yarn install

npx vercel

• follow the steps of Vercel initialization
• open the deployment and click the pink button to go to page with getServerSideProps -> crash

[CameronCT]

If you use path.resolve inside of your config it should resolve this problem.
https://raw.githubusercontent.com/jakubHynek/vercel-next-18next/main/next-i18next.config.js

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

[isaachinman]

@CameronCT That's correct.

[jakubHynek]

Thank you very much, It helped. I still bumped into other similar issue with monorepo and i'm helpless. I created a separate issue. #1553

[KevinArangu]

Thanks, it worked for me!

[stophecom]

I ran into the same issue. While this answer is correct #1552 (comment) I would add that you should not import the config on the client side in such case. Just pointing this out b/c there are some use cases where it's suggested to pass the config within _app.js (See https://github.com/isaachinman/next-i18next#unserialisable-configs)

If you'd do so you'll get TypeError: path.resolve is not a function

One workaround could be the following (although I'm not sure that is such a good idea):

const path = require('path')

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'de'],
  },
  ...(typeof window === undefined
    ? { localePath: path.resolve('./public/locales') }
    : {}),
}

Example code: https://github.com/stophecom/next-i18n-vercel-issue
Live demo on Vercel: https://next-i18n-vercel-issue-l76iojhty-kingchiller.vercel.app/

Maybe it helps somebody :)

[aleehedl]

For anyone wondering how to get this working in Netlify for dynamic routes, you need to make next-i18next.config.js and the locale files available in the Netlify functions. I got it working by manually listing them in netlify.toml.

# netlify.toml

[functions]
  included_files = ["next-i18next.config.js", "public/locales/**"]

My use case was a monorepo, and I did not need to make the localePath change as suggested by the docs for Vercel and Netlify.

Explained here:
https://www.netlify.com/blog/2021/08/12/how-to-include-files-in-netlify-serverless-functions/

[nico-i]

I tried @aleehedl's solution but it did not fix the issue I was having when deploying to netlify. It took me two full work days to find this solution which fixes both building locale pages and automatic locale redirects.

So I thought I'd leave this comment here for people having the problem in the future.

Hope it helps! ❤️

[rexwangcc]

For anyone else who comes to this, @aleehedl 's solution worked for me, except since we are using a monorepo setup, (similar to https://github.com/belgattitude/nextjs-monorepo-example), instead of directly using the paths, we had to prefix them; something like below results in our toml file:

# netlify.toml
...

[functions]
included_files = ["apps/foo-app/next-i18next.config.js", "apps/foo-app/public/locales/**"]

[yanickrochon]

None of this worked for me.

[costelinivictor]

An update for anyone with the same problem (specifically for Vercel):

The solution by @CameronCT works, but I think it's outdated. The JSON structure should be as following:

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

Basically, the localePath should be in the object root, not inside i18n -- otherwise you'll get a Typescript error while building.

[leoselig]

An update for anyone with the same problem (specifically for Vercel):

The solution by @CameronCT works, but I think it's outdated. The JSON structure should be as following:

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

Basically, the localePath should be in the object root, not inside i18n -- otherwise you'll get a Typescript error while building.

I can confirm that this is also mandatory for AWS Amplify to obtain the translations.

[BADMalik]

@isaachinman @leoselig Hi guys, I am trying to deploy Next 13 to vercel and facing
Error: The edge runtime does not support Node.js 'path' module error when I import path in my ts config file

`const path = require('path');
export const i18n = {
defaultLocale: "en",
locales: ["en", "ch", "ko", "jp"],
} as const;

export const nextI18NextConfig = {
i18n,
// Path to the translation files
// i.e., ./public/locales/en.json, ./public/locales/ch.json, etc.
localePath: path.resolve('./public/dictionaries'),
outputFileTracing:true
} as const;

export type Locale = (typeof i18n)["locales"][number];`

It works completly fine in local but and I dont need the localePath key but as I have researched, it needs that key for vercel deployments

This is what i followed https://github.com/vercel/next.js/tree/canary/examples/app-dir-i18n-routing
mentioned at the bottom of the Next js docs