Vercel: Unable to load translations using getServerSideProps/loadTranslations about ni18n HOT 10 OPEN

This worked for me.

import type { NamespacesNeeded, Ni18nOptions } from 'ni18n';
import { loadTranslations as ni18nLoadTranslations } from 'ni18n';
import path from 'path';

import { i18n } from '../../next.config';

export const namespaces = [
  'common',
  'register',
  'dashboard',
  'sidebar',
] as const;

export const ni18nConfig: Ni18nOptions = {
  supportedLngs: i18n?.locales,
  ns: namespaces,
};

export const loadTranslations = async (
  initialLocale?: string | undefined,
  namespacesNeeded?: NamespacesNeeded | undefined
) => {
  const locales = path.resolve('./', './public/locales');

  return await ni18nLoadTranslations(
    ni18nConfig,
    initialLocale,
    namespacesNeeded
  );
};

from ni18n.

Has anyone found a solution to this?

This solved my problem #49 (comment)

const locales = path.resolve('./', './public/locales');

from ni18n.

Hi @zaniluca, the main issue is on how the nft package decides which file to bundle or not. A discussion regarding that can be found here: vercel/nft#77

I haven't had the time to look at that more in depth and propose a solution, but in the meantime, the solution provided by @RodriguesCosta should work.

from ni18n.

Hi @atanaskanchev, if the prebuilt JSON is empty it probably means the issue is on the build step.

I would start looking at the path's configuration after the isRunningOnLocalhost conditional.
It is possible you don't need the conditional at all, can you try one of the following solutions?

1. use undefined
2. use { loadPath: `apps/ui-web-app/public/locales/${localePath}` }
3. use { loadPath: `locales/${localePath}` }

If none of these work, would you mind creating a repository where with the reproducible behaviour where I can try to find a solution?

from ni18n.

Hi @JCQuintas thanks for the quick response.

I've recreated the issue here https://github.com/atanaskanchev/ni18n-nx-issue and it's deployed to https://ni18n-nx-issue-9y6puo3xe-atanaskanchev.vercel.app/dashboard

localhost

vercel

vercel workspace

In the config, if !isRunningOnLocalhost I am setting the locales path { loadPath: locales/${localePath} } and it seems it matches the vercel workspace

 backend: isBrowser
    ? {
        backends: [LocalStorageBackend, HttpBackend],
        backendOptions: [
          { expirationTime: 24 * 60 * 60 * 1000 },
          { loadPath: `locales/${localePath}` },
        ],
      }
    : isRunningOnLocalhost
    ? { loadPath: `apps/ni18n-nx-issue/public/locales/${localePath}` }
    : { loadPath: `locales/${localePath}` },

from ni18n.

So it seems when deploying to vercel, we don't have access to the public folder from the getServerSideProps. :(

The current behaviour work if you are deploying using a docker container though... I've opened a bug issue on nextjs repo and will keep you posted.

A quick solution for your case right now would be to use getStaticProps instead for the time being, or use clientNamespaces to have the translations loaded on the client only.

from ni18n.

Hi @JCQuintas I've had a try with v1.0.4-rc.3 but it seems the issue with Vercel still persist.

from ni18n.

Indeed, it didn't work. Looking at it deeper, it seems that the issue is on the https://github.com/vercel/nft packager that doesn't allow a "third party module" to flag a file as "necessary" out of its scope. So at the moment we can't really fix that automatically without creating a patch to the nft package and then waiting for vercel to update it.

In the meantime, one workaround would be to create a function on your repository to do that for us

// force-locales-packing.js
import path from 'path'

export const forceLocalesPacking = () => path.join('./public/locales')

Then you should be able to run that inside your getServerSideProps and it will "tag" the files to be bundled. I intend on creating a documentation for this as well as soon as I have time. Then I try to work on a fix on the nft package itself.

Let me know if it works for you, else I can update the repo you linked above with the steps necessary to make it work.

from ni18n.

Has anyone found a solution to this?

from ni18n.

Any solution on that?

from ni18n.