Can not use serverSideTranslations on Vercel

Question

In my index page i'm using serverSideTranslations function. getting error about finding file of translation. this error happens only on pages that used by serverSideTranslations.

I deployed to Vercel and Netlify. in both of them i'v got the same error.

in _app.js i'm using appWithTranslation.

Dependencies:

"dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@netlify/plugin-nextjs": "^3.9.2",
    "axios": "^0.21.1",
    "bootstrap": "^4.6.0",
    "dayjs": "^1.10.4",
    "dotenv": "^8.2.0",
    "fs-extra": "^10.0.0",
    "is-mobile": "^3.0.0",
    "next": "^11.1.2",
    "next-i18next": "^8.9.0",
    "next-seo": "^4.20.0",
    "node-fetch": "^2.6.1",
    "parse": "^3.1.0",
    "react": "17.0.1",
    "react-bootstrap": "^1.5.0",
    "react-dom": "17.0.1",
    "react-infinite-scroller": "^1.2.4",
    "recoil": "^0.1.2",
    "sass": "^1.43.2",
    "ts-node": "^9.1.1"
  }

next.config.js

const path = require('path');
const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')
const i18NextConfig = require('./next-i18next.config');

const prodConfig = {
    generateBuildId: () => 'build-id',
    compress: true,
    target: 'serverless',
    i18n: i18NextConfig.i18n,
    sassOptions: {
        includePaths: [path.join(__dirname, 'styles')],
    },
}
module.exports = (phase, { defaultConfig }) => {
    if (phase === PHASE_DEVELOPMENT_SERVER) {
        return {
            ...defaultConfig,
            ...prodConfig,
            compress: false,
        }
    }

    return prodConfig;
}

next-i18next.config.js

const path = require('path');

module.exports = {
  i18n: {
    defaultLocale: 'he',
    locales: ['he'],
    localePath: path.resolve('./locales'), // <<< i tried to put this line here
  },
  keySeparator: '>',
  nsSeparator: '|',
  reloadOnPrerender: false,
  localePath: path.resolve('./locales'), // <<< and also here
};

Error message from Vercel lambda function

ng request: Error: ENOENT: no such file or directory, scandir '/var/task/public/locales/he' at Object.readdirSync (fs.js:1043: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 () 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/he' }

score 12 · Accepted Answer · answered Oct 21 '21 at 12:00

12

You should modify next-i18next.config.js file in your project, and add path.resolve to locale path. You can see an example in this repo. Make sure that you know where your locale folder is located, and write the correct path. The answer to this issue was found in this github thread.

answered Oct 21 '21 at 12:00

HS1

608
2
10
28

1

There's usually no problem with getStaticProps as shown in the repo. What was (and still is) a problem is the behaviour with getServerSideProps - that was when things really go haywire. - The problem being locales are not included in the bundle. I am currently investigating on how to force Vercel to bundle those files... – Matěj Balga Nov 16 '21 at 00:21

Devendra · Answer 2 · 2023-02-21T08:48:15.803

Note(Vercel and Netlify)

Some serverless PaaS may not be able to locate the path of your translations and require additional configuration. If you have filesystem issues using serverSideTranslations, set config.localePath to use path.resolve.

Solution

You have to set config.locationPath into the next-i18next.config.js file.

For example,

// next-i18next.config.js

const path = require("path");

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'fr'],
  },
  // Path to the translation files
  // i.e., ./public/locales/en.json, ./public/locales/fr.json
  localePath: path.resolve("./public/locales"),
}

For more information please refer to the documentation.

Can not use serverSideTranslations on Vercel

Error message from Vercel lambda function

2 Answers2

Note(Vercel and Netlify)

Solution