aralroca / next-translate-plugin

Next-translate plugin for i18n in Next.js 🌍 - Load page translations and use them in an easy way!

Next-translate-plugin

Webpack plugin

(Maybe TurboPack in the future)

---

Two of the goals of next-translate is to be a tiny library (~2kb) and to have no external dependencies.

Since this plugin uses TypeScript compiler dependency, and we don't want you to have to bring extra kb into the pipeline, we have chosen to separate next-translate and next-translate-plugin with two distinct packages.

This way you can save this as devDependencies instead of dependencies.

yarn add next-translate-plugin -D

or

npm install next-translate-plugin --save-dev

Documentation

All the documentation is in Next-translate repository:

• Next-translate GitHub repository

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Josef Hes 💻

• Contributors list is in Next-translate GitHub repository

next-translate-plugin's Issues

Code is injected before directives

Version 2.0.2
I use "use client" directive to support NextJs app directory.
Seems like next-translate-plugin does not have tests for such case.

There is my build logs as an example.

21:51:29] │ Import path:
[2023-03-11 21:51:29] │ ./pages/warehouse/product-returns.tsx
[2023-03-11 21:51:29] │ ReactServerComponentsError:
[2023-03-11 21:51:29] │
[2023-03-11 21:51:29] │ The "use client" directive must be placed before other expressions. Move it to the top of the file to resolve this issue.
[2023-03-11 21:51:29] │
[2023-03-11 21:51:29] │ ,-[/workspace/packages/[..].tsx:1:1]
[2023-03-11 21:51:29] │ 1 |
[2023-03-11 21:51:29] │ 2 | import __i18nConfig from '@next-translate-root/i18n'
[2023-03-11 21:51:29] │ 3 | import __loadNamespaces from 'next-translate/loadNamespaces'
[2023-03-11 21:51:29] │ 4 | 'use client';
[2023-03-11 21:51:29] │ : ^^^^^^^^^^^^^
[2023-03-11 21:51:29] │ 5 | import { Box, Paper, Typography } from '@m

Non-hook version of useTranslation which works with vanilla JS

What version of this package are you using?
2.0.5

What problem do you want to solve?
I want to use a non-hook version of useTranslation inside a vanilla JS helper function which works outside a component. I have looked at getT function but that only seems to work inside components.

What do you think is the correct solution to this problem?

It would be great if I could do the following:

The validation function formErrorText.required is called within Formik here

<Formik
  onSubmit={onSubmit}
  initialValues={{
    email: '',
  }}
  validationSchema={Yup.object().shape({
    email: Yup.string()
      .trim()
      .required(formErrorText.required("Email"))
      .email(formErrorText.email()),
  })}
>

formErrorText is vanilla JS and currently gets imported from helpers.js:

export const formErrorText = {
  required: (field) => `${field} Required`,
  max: (field) => `${field} too long`,
  min: (field) => `${field} too short`,
  maxNumber: (field) => `${field} too high`,
  minNumber: (field) => `${field} too low`,
  email: () => 'Invalid Email Format',
  minWithPrompt: (field, minLength) =>
    `${field} too short. Minimum of ${minLength} characters required`,
  length: (field, length) => `${field} must be ${length} characters long`,
  emoji: () => 'Emojis are not allowed',
};

I want to change the required function inside formErrorText to this

required: (field) => translatedErrorText.required[field],

So that the non-hook version of useTranslation gets used like this (let's call the non-hook function getTranslation)

const translatedErrorText = {
  required: {
    Email: getTranslation('formValidation:emailRequired'),
    Password: getTranslation('formValidation:passwordRequired'),
  },
};

The formValidation.json namespace files in locales would look like this:

en-gb (English)

{
  "emailRequired": "Email Required",
  "passwordRequired": "Password Required"
}

hu (Hungarian)

{
  "emailRequired": "E-mail szükséges",
  "passwordRequired": "Jelszó szükséges"
}

Are you willing to submit a pull request to implement this change?
Yes, I can give it a try

TypeError: Cannot read properties of undefined (reading 'slice')

What version of this package are you using?
2.0.5
What operating system, Node.js, and npm version?
18.15.0
What happened?
if I use edge runtime in getServerSideProps I get error on page TypeError: Cannot read properties of undefined (reading 'slice').
What did you expect to happen?
It should of work.
Are you willing to submit a pull request to fix this bug?
No

I am using next version 13.1.1 in a nx monorepo.
I have this function below in a dynamic page (which does nothing)

export async function getServerSideProps(ctx) {
  return {
    props: { metrics: '' }
  }
}
 export const config = {
   runtime: 'experimental-edge'
 }

stack trace
error - ../node_modules/next-translate-plugin/lib/cjs/node_modules/readable-stream/lib/_stream_writable.js (57:0) @
error - Cannot read properties of undefined (reading 'slice')
null

`next-translate` doesn't work without `src/pages` directory despite running `next build`.

What version of this package are you using?

Latest.

What operating system, Node.js, and npm version?

Not an operating-system, NodeJS or NPM-dependent issue.

What happened?

If you were to do yarn build, and then remove src/pages/ (or pages/), and then try to run yarn start then the application fails to start, producing this error message:

yarn run v1.22.18
$ next start
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /my-project/.env
error - Failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error
Error: ENOENT: no such file or directory, scandir '/my-project/pages'
    at Object.readdirSync (node:fs:1405:3)
    at nextTranslate (/my-project/node_modules/next-translate/lib/cjs/plugin/index.js:49:10)
    at Object.<anonymous> (/my-project/next.config.js:63:18)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:170:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0) {
  errno: -2,
  syscall: 'scandir',
  code: 'ENOENT',
  path: '/my-project/pages'
}

This should be possible (and is possible without next-translate) because the application should be entirely encapsulated within ./next/standalone by the time you've completed a build. This behaviour enables Docker deployment as per Vercel's boilerplate Dockerfile.

What did you expect to happen?

I expect that next-translate should only do source-code traversal at build-time and not at runtime, where the source-code may no longer be available.

Are you willing to submit a pull request to fix this bug?

No.

Custom HOC breaks auto-static-optimization in build

What version of this package are you using?

• 2.5.3

What operating system, Node.js, and npm version?

• macOs Ventura (13.5.2)
• Node: 18.x

What happened?
Using pages

The plugin checks if the app has a HOC. If you add a custom HOC without getInitialProps, the plugin assumes it's a HOC with getInitialProps. This makes you opt out of the https://nextjs.org/docs/messages/opt-out-auto-static-optimization because the logic of the Next.js build checks if there is a getInitialProps or not.
The hasHoc util must check if the app actually has getInitialProps and only return the HOC template if that's the case.

I have this issue with TRPC, you need to have:
export default trpcHoc.withTRPC(App)

When SSR: false, it doesn't do getInitialProps

What did you expect to happen?

• the plugin must not return getInitialProps when there isn't one provided in a HOC.

Are you willing to submit a pull request to fix this bug?
No

Config option to force using getStaticProps

What version of this package are you using?

2.02

What problem do you want to solve?

We work on a website template for clients in North America and Brazil. Their websites (which are built off of this template) are in their native language (English and Portuguese respectively).

We know the locale/language of each website at build time; our clients don't want or need a language switcher.

SEO and fast page loads is a primary concern. Therefore, we want to build and ship the website with only one language as a static website using next export.

We don't want the plugin to decide for us. We accept the risk of HOC collisions, dynamic paths, etc. and will deal with that on our own.

What do you think is the correct solution to this problem?

We want a simple config option in i18n.js to force the loader to use getStaticProps for loading the language files so that we can export a static website. Something like:

module.exports = {
  ...,
  forceStatic: true
}

Otherwise, we have to add getStaticProps to EVERY page of our template and all client pages which is ugly and costly.

Are you willing to submit a pull request to implement this change?

Yes, if @aralroca approves.

PR at #18

Regression: Broken `nx serve` but working production build

Hi all, I am reviewing the changes between 2.0.6 (last known working for me) and latest v2, and cannot pinpoint my failure.

I am using an nx (monorepo) project structure.

What version of this package are you using?

• 2.6.2 is breaks my configuration
• 2.3.0 is breaks my configuration
• 2.0.6 works

What operating system, Node.js, and npm version?
MacOS/node v20.10.0/npm 10.2.3

What happened?

My configuration breaks and the keys are shown, rather than translated text:

2.0.6: nx serve:

2.3.0: nx serve:

2.0.6: NEXT_TRANSLATE_PATH=../../ nx build + node ./server/main.js in appropriate directory (production build):

2.3.0: NEXT_TRANSLATE_PATH=../../ nx build + node ./server/main.js in appropriate directory (production build):

2.6.2 also breaks nx serve.

In short, only nx serve (i.e. development build) fails, from 2.3.0 onward. I didn't test any versions between 2.0.6 and 2.3.0.

What did you expect to happen?

Configuration is identical in both cases and follows configuration

• apps/appname/src/pages is where my pages are;
• apps/appname/locales;
• apps/appname/i18n.js is simple with no "loadLocalesFrom" set;

Therefore, I would expect the properly configured app in 2.0.6 to still load text properly in 2.3+.

Are you willing to submit a pull request to fix this bug?
Unsure; depends on complexity and whether my use case is still supported ("legacy" pages - not app router).

Translations do not work on the first render of Client component when used in Layout

What version of this package are you using?
2.6.1

What operating system, Node.js, and npm version?
latest

I have created a code sandbox
link
just go there and type /test to the end of url of the app and hit Enter

as a temporary solution I am using this workaround:
const label = globalThis.__NEXT_TRANSLATE__ ? t(href) : fallbackImportedJSON[href];

because NEXT_TRANSLATE is missing on the first render

I tried to look at the code, but could not find a solution.

Are you willing to submit a pull request to fix this bug?
yes

Label are not rendered after page reload

"next": "^13.4.8"
"next-translate": "^2.4.4"
"next-translate-plugin": "^2.4.4"

node v18.15.0
macOS Ventura

It seems useTranslations after page reload does't work for server components.

I've created this repro.zip where you can reproduce the issue.

• Navigate to page-1, and refresh the page. You should be able to see the label correctly.

• Navigate to page-2, and refresh the page. At this point the label is not rendered anymore.

Translations inside pages/.../app/... folders stopped working

1.4.4, linux, node 20.0.0, npm 9.6.4

In our project we happen to have an pages/app folder, which has nothing to do with next.js's new app folder (which, if I understand correctly, should be outside pages).
Upgrading from 2.0.5 to 2.4.4 caused all translations inside the pages/app folder to stop working.
It happens for any page with the following path structure: pages/**/app/**

Misunderstanding devDependency documentation.

Hey, I'm sorry - this isn't a bug but I don't have a twitter account to ask a question.

In the documentation it says to list this plugin as a devDependency. But because it's required in the next.config.js and we're self-hosting the next server, then it can't really be a devDependency as the next.config.js is read by the next server at runtime if I'm understanding correctly.

The reason I ask is because it installs typescript as a dependency which is coming in at 64MB. It would be great to not have to install that. For sure we need this package as part of our build step, but without it at runtime, next.js throws:

throw new Error(`Specified i18n.locales should be an Array received ${typeof i18n.locales}.\nSee more info here: https://nextjs.org/docs/messages/invalid-i18n-config`);

as it doesn't know to look for the i18n.js when running next start.

Please help correct my misunderstanding if there's a way for me to not have it as a runtime dependency! Thanks so much for the package, it's working great.

Componet can't read translation context if use before children in layout.tsx - Next 13 app directory

What version of this package are you using?
2.0.2 also next-translate-plugin

What operating system, Node.js, and npm version?
OS: W11 with WSL1
Node: 16.17.1
NPM: 8.15.0

What happened?
If I use a component in the layout file before render the children they aren't able to read lang from useTranslation.

Showing the error.
https://app.birdeatsbug.com/sessions/7-srlQL9vr0fdUIJFU8ajxGiIymHBT-A4CEI3W3o-EYh

There is an error in console about that: Warning: Prop `href` did not match. Server: "/en/second-page" Client: "//second-page"

When I click on the first he send me to http://second-page/ and the second works fine

CODES:
src/components/ShowTheError.tsx

'use client'

import useTranslation from "next-translate/useTranslation";
import Link from "next/link";

export function ShowTheError() {
  const { lang } = useTranslation()

  return (
    <Link href={`/second-page?lang=${lang}`} as={`/${lang}/second-page`}>
      second page
    </Link>
  )
}

src/app/layout.tsx

import { ShowTheError } from "../components/ShowTheError"

...
  return (
    <html lang={lang}>
      <head />
      <body>
        <ShowTheError />

        {children}

        <ShowTheError />
...

What did you expect to happen?
The componente can read the translation context.

Are you willing to submit a pull request to fix this bug?
Yes.

next-translate-plugin swaps the imports in the bundle

Ventura 13.3.1 (a) 
Node: 18.15.0

next: 13.4.5
next-translate: 2.3.0-canary.3
next-translate-plugin: 2.3.0-canary.3

next-translate-plugin causes error when used with react-hot-toaster in new next.js app folder.
It looks like next-translate-plugin swaps the imports in the bundle.

I've created a fresh new repository (npx create-next-app@latest) in which you can replicate the issue.
I'm attaching it here: bug-repro.zip.
Follow these steps:

1. Download the archive, unzip, cwd into it
2. npm i
3. npm run dev
4. Visit localhost:3000
5. Notice the error in the shell where you executed npm run dev:

- error node_modules/react-hot-toast/dist/index.mjs (244:19) @ eval
- error TypeError: next_translate_withTranslationClientComponent__WEBPACK_IMPORTED_MODULE_2__ is not a function
    at __webpack_require__ (/Users/bruno/Desktop/bug-repro/.next/server/webpack-runtime.js:33:43)
    at eval (./src/components/button-toast/index.tsx:11:73)
    at Module.(sc_client)/./src/components/button-toast/index.tsx (/Users/bruno/Desktop/bug-repro/.next/server/app/page.js:1703:1)
    at __webpack_require__ (/Users/bruno/Desktop/bug-repro/.next/server/webpack-runtime.js:33:43)

Despite the error, the page is loading fine. In fact, now, you should see something like:

6. Click the "Test toast" button in the sample web app.
7. Click the "Close" button, and look at DevTools console. You should see logged something like this:

It looks like next-translate is swapping the import in the bundle... and what should have been the default export of the react-hot-toaster library is something completely different.

The expression is not callable

What version of this package are you using?
2.6.0

What operating system, Node.js, and npm version?
MacOS, Node 19.16, PNPM 8.7.4

What happened?
I use // @ts-check in all my .js files to have a better DX but it seems like the import is not considered as a function:

What did you expect to happen?
No errors, since in the source code, the function takes a NextConfig and returns a NextConfig

Are you willing to submit a pull request to fix this bug?
Yes, but I don't have a clue what's happening

Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".

"next": "^13.4.7"
"next-translate": "^2.4.2"
"next-translate-plugin": "^2.4.2"

node v18.15.0
macOS Ventura

I use next.js app folder.
This is my configuration file:

// i18n.js
module.exports = {
  locales: ["it", "en"],
  defaultLocale: "it",
  loadLocaleFrom: (lang, namespace) =>
    import(`./locales/${lang}/${namespace}.json`).then((m) => m.default),
  localeDetection: false,
  pages: {
    "*": ["common"],
    "/": ["common"],
    "/account": ["account", "common", "errors"],
    // others
  },
};

I get the error:

Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".

If I just remove the loadLocaleFrom function from the configuration, translation are loaded fine, but, when on backend code I use getT (for example to translate page title, or validation errors) the label key is rendered instead of the actual translation.

Can imported config data from i18n.js be awaited?

What version of this package are you using?
2.0.5

What problem do you want to solve?

In the i18n.js config file I want to make the locales array dynamic by getting the array from an API call to a Postgres db table. So when I use module.exports instead of exporting an object, I want to await a function which includes that API call.

I don't know how i18n.js is imported but is awaiting the config data from i18n.js already possible? If not, could it be added?

I have attempted the code below but get this error: "Error: Specified i18n.defaultLocale should be included in i18n.locales."

// contents of i18n.js
const i18nNextTranslateConfig = async () => {
  try {
    const allDomains = await getLocalesForDomains(); // API call to get domain data
    const allLocales = allDomains.map((item) => item.defaultLocale);
    const locales = [...new Set(allLocales)];
    const defaultLocale = 'en-gb';
    if (!locales.includes(defaultLocale)) {
      locales.push(defaultLocale);
    }
    return {
      locales,
      defaultLocale,
      extensionsRgx: /\.(tsx|ts|js|mjs|jsx)$/,
      keySeparator: '.',
      pages: {
        // Namespaces to import for each page
        '*': ['common', 'app'],
        '/': ['home'],
        'rgx:^/search.*': ['search'],
        '/basket': ['basket'],
        '/account/overview': ['accountMenu'],
        '/shop/[[...Shop]]': ['shopCategory', 'shopProduct', 'shopFamily'],
        '/brands/[brandLetter]': ['brands'],
      },
    };
  } catch (err) {
    return err;
  }
};

module.exports = (async () => {
  const result = await i18nNextTranslateConfig();
  return result;
})();

What do you think is the correct solution to this problem?
Can the imported config data from i18n.js be awaited?

Are you willing to submit a pull request to implement this change?
I don't know enough about the package to implement any changes but I am willing to help in any way I can. Thank you

Using a src/ dir for the next codebase doesn't seem supported

What version of this package are you using?
v2.0.4

What operating system, Node.js, and npm version?
macOS Ventura 13.2, node 18.x, yarn 3.5.0

What happened?
Using the new next app directory nested under a src/ directory displays the following error:

Unhandled Runtime Error
Error: Cannot read properties of undefined (reading '_context')

Moving the directory to the root of the project works as expected.
Seems related to how next-translate-plugin is looking for the source code.

What did you expect to happen?
No error

Are you willing to submit a pull request to fix this bug?
Yes if pointed to the right direction 🤷

Are you sure next-translate-plugin should be a dev dependency?

What version of this package are you using?

next: 13.4.11
next-translate: 2.5.2
next-translate-plugin: 2.5.2

What operating system, Node.js, and npm version?

Docker image

node:18.15.0-alpine3.17

What happened?

After building next.js project I delete the dev dependencies, and start the project.
When I start the project i get this error:

Error: Cannot find module 'next-translate-plugin'
Require stack:
- /app/next.config.js
at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
at /app/node_modules/next/dist/server/require-hook.js:113:36
at Module._load (node:internal/modules/cjs/loader:920:27)
at Module.require (node:internal/modules/cjs/loader:1141:19)
at require (node:internal/modules/cjs/helpers:110:18)
at Object.<anonymous> (/app/next.config.js:1:23)
at Module._compile (node:internal/modules/cjs/loader:1254:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
at Module.load (node:internal/modules/cjs/loader:1117:32)
at Module._load (node:internal/modules/cjs/loader:958:12) {
code: 'MODULE_NOT_FOUND',
requireStack: [ '/app/next.config.js' ]
}
Node.js v18.15.0
Container called exit(1).

I fixed the problem, installing next-translate-plugin as a normal dependency, but this surprised me a bit cause in the readme it is stated that next-translate-plugin is a dev dependency.

What did you expect to happen?

I didn't expect to have to keep next-translate-plugin around after building the project.

About tradeoff between 2.3.0 and 2.4.x

Our current application is based on Next.js 13.4 (app directory), I found next-translate&next-translate-plugin is the best choice(thanks for your brilliant article), with next-translate 2.3.0, it works very well and helps us a lot. But as 2.3.x seems to have some issues with client components(like this, and this).

So I tried to migrate to next-translate 2.4.x, and the client component issues are solved perfectly. But a new issue is triggered: for some historical reason, besides Next.js's current solution based on the path, our application is required to define the lang with search params(e.g. https://xxx.com?lang=ja), but that didn't work as expected(just like what 2.3.0 did), seems the lang in search params is not detected correctly (I'm not very sure about if it caused by next-translate or next-translate-plugin, sorry).

I'd like to get your advice(or if the lang params detection will recover in the future?)

btw, I used current middleware:

export function middleware(request: NextRequest): NextResponse {
  const locale = request.nextUrl.searchParams.get('lang');

  if (locale && i18n.locales.includes(locale)) {
    return NextResponse.next();
  }

  request.nextUrl.searchParams.set('lang', i18n.defaultLocale);
  return NextResponse.redirect(request.nextUrl);
}

Unhandled Runtime Error

What version of this package are you using?
2.5.2

What operating system, Node.js, and npm version?
Windows 10, Node 18.16.1, npm 9.5.1
Using Next.Js 13.4.10 and pages dir

What happened?
First of all thanks for the recent updates, really enjoying them.
I have a custom Image Component, which is bundled inside a Ui-Library. Basically just next/image with a Wrapper.

import { d } from './chunk-RMTW775S.mjs';
import { b } from './chunk-AMKT3Q7W.mjs';
import { z } from './chunk-MT42QZJP.mjs';
import { a } from './chunk-D3UIQNGP.mjs';
import p from 'classnames';
import k from 'next/image';
import { useState } from 'react';
import { jsx, jsxs } from 'react/jsx-runtime';

var T=({src:t,alt:r,quality:u,className:f,containerClassName:d,dynamicRatio:o,containerProps:g,...b})=>{let[x,h]=useState(!1),[s,v]=useState(),[i,w]=useState();return jsx("div",{...g,className:p("relative w-full flex items-center justify-center object-cover overflow-hidden",!o&&"h-full",d),children:!x&&t?jsx(k,{className:p("object-cover object-center",f),src:t,...!s&&!i&&{fill:!0},sizes:"(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw",quality:u||"75",alt:r,width:s,height:i,onError:()=>h(!0),onLoadingComplete:({naturalWidth:N,naturalHeight:I,width:P,height:y})=>{o&&(v(o==="natural"?N:P),w(o==="natural"?I:y));},...b}):jsx(j,{src:String(t),alt:r})})},q=a(T),j=({src:t,alt:r})=>jsx("div",{"aria-describedby":t,"aria-label":r,className:"w-full h-full flex items-center justify-center bg-accent-100 dark:bg-accent-800",children:jsxs("div",{className:"p-2 truncate",children:[jsx(d,{size:"sm",className:"mx-auto",icon:z}),jsx(b,{size:"xs",className:"mx-auto",children:"Bild konnte nicht geladen werden."})]})});

export { T as a, q as b };

In a application which does not use next-translate-plugin inside next.config.js everything works fine.
But as soon as i add Next Translate i get a weird Error:

Unhandled Runtime Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `T`.

Call Stack
createFiberFromTypeAndProps
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (28439:0)
createFiberFromElement
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (28465:0)
reconcileSingleElement
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (15750:0)
reconcileChildFibers
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (15808:0)
reconcileChildren
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (19167:0)
updateHostComponent
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (19924:0)
beginWork
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (21618:0)
HTMLUnknownElement.callCallback
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (4164:0)
Object.invokeGuardedCallbackDev
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (4213:0)
invokeGuardedCallback
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (4277:0)
beginWork$1
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (27451:0)
performUnitOfWork
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (26557:0)
workLoopSync
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (26466:0)
renderRootSync
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (26434:0)
performSyncWorkOnRoot
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (26085:0)
flushSyncCallbacks
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (12042:0)
eval
..\node_modules\next-translate-plugin\lib\cjs\node_modules\react-dom\cjs\react-dom.development.js (25651:0)

What did you expect to happen?
To render the image component.

Are you willing to submit a pull request to fix this bug?
Sadly i dont have experience in writing plugins for Next.Js

use-translate-plugin cause notFound error when use dynamic routes with optional catch-all

next-translate-plugin v2.6.2

node 20.09 windows 11 latest updates

Code for reproduce https://github.com/salos1982/next-translate-app
I have following structure of app folder
[lang]/(content)/[[...path]]/page.tsx
When there was no [lang] part, everything worked fine. But when I added [lang] folder at the top all my requests generate 404 error.

You could download project start it and try to open http://localhost:3000/es
You will see 404 erorr

I expect that I see content of [lang]/(content)/[[...path]]/page.tsx (some text)

Are you willing to submit a pull request to fix this bug?
No

Configuration option to customize the pkgDir

What version of this package are you using?

• [email protected] (includes next-translate-plugin)

What problem do you want to solve?

We use Nx to run our monorepo. Nx has made an adjustment in version 16.3.2 that causes the current working directory to dynamically adjust depending on the project. We are therefore forced to adjust thepkgDir (used to create the basePath) to '.' respectively the current working directory (process.cwd()).

What do you think is the correct solution to this problem?

Add a configuration option to NextConfig, such as nextTranslate. such as:

interface NextConfigWithNextTranslate extends NextConfig {
    nextTranslate?: {
        pkgDir?: string | (() => string);
    }
}

Are you willing to submit a pull request to implement this change?

Yes

example with /app got error 404 using dynamic segment

What version of this package are you using?

{ 
  "dependencies": { 
    "next": "^13.2.1",
    "next-translate": "^2.0.2", 
  },
  "devDependencies": {  
    "next-translate-plugin": "2.0.0", 
  }
}

What operating system, Node.js, and npm version?

Mac M1, Node: v16.19.0, npm: 8.19.3

What happened?

I create dynamic url [userId], and cannot access neither /use123 or /user123/profile. It redirect to error 404 page.

Checkout the repo I extracted from with-app-directory example

https://github.com/chhornponleu/next-translate-app-dir-demo

Critical dependency: the request of a dependency is an expression

What version of this package are you using?
2.0.2
What operating system, Node.js, and npm version?

• Node: v18.14.2

What happened?

When I use nextTranslate in the next.config.js then I see the message Critical dependency: the request of a dependency is an expression in the console when I try to run the app, then the translations are not working at all.

I'm using the newest nextjs 13.2.4 version with the appDir functionality instead of pages.

I don't know if I'm doing something wrong or maybe it's something new in the newest version because in other apps with older nextjs version I'm using next-translation instead of next-translation-plugin and the other ones are working good.

You may need an additional loader to handle the result of these loaders.

What version of this package are you using?
^2.0.5

What operating system, Node.js, and npm version?
v18.16.0

What happened?
I reproduced the whole error here https://codesandbox.io/p/sandbox/trusting-babycat-pfn545

I'm using nextjs 13 with app directory when i trying to add ReactQueryDevtools i get this error:

./node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@tanstack/react-query-devtools/build/lib/Explorer.mjs
Module parse failed: Unexpected token (263:13)
File was processed with these loaders:
 * ./node_modules/.pnpm/[email protected][email protected]/node_modules/next-translate-plugin/lib/cjs/loader.js
You may need an additional loader to handle the result of these loaders.
|       }
| 
>       return <Explorer {...props} />
|     }
|

its working without ReactQueryDevtools

"@tanstack/react-query": "^4.29.12",
"@tanstack/react-query-devtools": "^4.29.12",

ReactQueryProvider.tsx

"use client"

import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
import { useState } from "react"

type Props = {
  children: React.ReactNode
}

export default function ReactQueryProvider({ children }: Props) {
  const [queryClient] = useState(() => new QueryClient())

  return (
    <QueryClientProvider client={queryClient}>
      {children}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  )
}

Unexpected injection of __Next_Translate__Page

next-translate-plugin 2.0.5

yarn v1.22.19

NextJs version 13.4.3

When I put "use client" directive into some "utility" (not component), for example:
path: src/utils/hooks/useRouterObject

"use client"
import {useCallback, useMemo} from 'react'

import useRouterString from './useRouterString'

const useRouterObject = <T extends Record<string, unknown>>(
	param: string,
	defaultValue: T
): [T, (object: T) => void] => {
    //Code does not matter here
}
export default useRouterObject

I get a weird runtime error caused by injecting return <__Next_Translate__Page__188429434c9__ {...props} /> into my function.
Is this behaviour expected?

Fix checking `/_app` in the plugin

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem which was that plugin is not working with Next.js custom page extensions:

diff --git a/node_modules/next-translate-plugin/lib/cjs/loader.js b/node_modules/next-translate-plugin/lib/cjs/loader.js
index 686d7b1..f87ebb7 100644
--- a/node_modules/next-translate-plugin/lib/cjs/loader.js
+++ b/node_modules/next-translate-plugin/lib/cjs/loader.js
@@ -31,11 +31,11 @@ function loader(rawCode) {
         return rawCode;
     }
     if (hasGetInitialPropsOnAppJs) {
-        return pageNoExt === '/_app'
+        return pageNoExt.startsWith('/_app')
             ? (0, templateWithHoc_1.default)(pagePkg, { hasLoadLocaleFrom: hasLoadLocaleFrom })
             : rawCode;
     }
-    if (pageNoExt === '/_app') {
+    if (pageNoExt.startsWith('/_app')) {
         return (0, templateWithHoc_1.default)(pagePkg, {
             skipInitialProps: true,
             hasLoadLocaleFrom: hasLoadLocaleFrom,
diff --git a/node_modules/next-translate-plugin/lib/esm/loader.js b/node_modules/next-translate-plugin/lib/esm/loader.js
index 4950f3a..6137ff7 100644
--- a/node_modules/next-translate-plugin/lib/esm/loader.js
+++ b/node_modules/next-translate-plugin/lib/esm/loader.js
@@ -26,11 +26,11 @@ export default function loader(rawCode) {
         return rawCode;
     }
     if (hasGetInitialPropsOnAppJs) {
-        return pageNoExt === '/_app'
+        return pageNoExt.startsWith('/_app')
             ? templateWithHoc(pagePkg, { hasLoadLocaleFrom: hasLoadLocaleFrom })
             : rawCode;
     }
-    if (pageNoExt === '/_app') {
+    if (pageNoExt.startsWith('/_app')) {
         return templateWithHoc(pagePkg, {
             skipInitialProps: true,
             hasLoadLocaleFrom: hasLoadLocaleFrom,

This issue body was partially generated by patch-package.

Can't render proper title in next.js generateMetadata

"next": "^13.4.7"
"next-translate": "^2.4.2"
"next-translate-plugin": "^2.4.2"

node v18.15.0
macOS Ventura

I'm attaching a repro, repro.zip.
Download it, install dependencies, and visit /demo.
In browser's title bar you should read something like "common:page_title" instead of the label.

export const generateMetadata = async ({ searchParams }: any) => {
  const t = await getT(searchParams.lang, ["common"]);
  return {
    title: t("common:page_title"),
  };
};

not-found.tsx is not translated

What version of this package are you using?

next: 13.4.12
next-translate: 2.5.2
next-translate-plugin: 2.5.2

Node.js v20.5.0

What happened?

In the not-found.tsx page we see the label key, instead of the actual label content.
Attaching a repro:

repro.zip

What did you expect to happen?

See the translated label.

Translation is broken when using client component in root layout

What version of this package are you using?

2.5.3

What operating system, Node.js, and npm version?

1. MacOS 13.2.1
2. Node.js v20.0.0
3. npm 9.6.4

What happened?

It's similar to the previous bug: Componet can't read translation context if use before children in layout.tsx - Next 13 app directory #7 but in the latest version of next-translate and next-translate-plugin

When I render a client component in the root layout(app/layout.tsx), the component is render without any language.

Here is the demo which I modified from the official example: https://github.com/aszx87410/next-translate-bug-demo
You can see what's changed from this commit: aszx87410/next-translate-bug-demo@491580f

Here is to video showing the error: https://www.youtube.com/watch?v=8oLWZTkCRZs&ab_channel=LiHu
I am not sure why but it can only be reproduced when the DevTools is opened

I can reproduce in another private project without DevTools open, so I guess it shouldn't matter. Btw, my private project is using query string instead of Next.js built-in locale.

Reproduce steps:

1. clone the project above
2. npm i
3. npm run dev
4. open http://localhost:3001/en
5. Hard refresh
6. Open devtool
7. Hard refresh again

The root cause is probably because some server component quirks which makes the component tree weird, here is the screenshot:

Somehow there is no <AppDirI18nProvider> above <Heading> component, so the component can't get correct language and namespaces.

What did you expect to happen?

The page should render correct translation

Are you willing to submit a pull request to fix this bug?

Yes, if I know how to fix it

Next translate plugin crashes the `global-error` page in Nextjs with App router.

What version of this package are you using?
3.0.0-canary.4

What operating system, Node.js, and npm version?
Mac OS, NodeJs, Yarn 3.6.4

What happened?
Using next-translate crashes global-error.tsx in the root of app router. The decorated component uses useParams which for some reason have null value in global-error.tsx (with use client directive) and when accessing lang property it crashes the page.

This line seems to be causing the issue https://github.com/aralroca/next-translate-plugin/blob/main/src/templateAppDir.ts#L162

    const searchParams = __useSearchParams()
    const params = __useParams()
    const detectedLang = params.lang ?? searchParams.get('lang')

What did you expect to happen?
Page not to crash.

Are you willing to submit a pull request to fix this bug?
I'm.

getInitialProps inside _app.js not being called

What version of this package are you using?
"next": "^13.2.3",
"next-translate": "^2.0.2",
"next-translate-plugin": "^2.0.2",
"react": "^18.2.0",
"react-dom": "^18.2.0"

What operating system, Node.js, and npm version?
MacOS, Node v16.18.0, npm 8.19.2.

What happened?
When using nextTranslate() inside next.config.js, getInitialProps from _app stops working.

What did you expect to happen?
getInitialProps from _app keeps working.

Are you willing to submit a pull request to fix this bug?
Not at the moment.

Reproducible repo
Based on the basic example from your repo. Just added a getInitialProps to _app.
https://github.com/aureliopita-au/next-translate-getInitialProps-bug

Failing `npm run build` during server page prerender at `useTranslation`

What version of this package are you using?
2.0.3 & 2.0.4
NextJS 13, app directory

What operating system, Node.js, and npm version?
MacOS/Github actions (debian), node v19.6.0

What happened?
npm run build is failing when meets useTranslation in server component.

info  - Linting and checking validity of types
info  - Collecting page data
info  - Creating an optimized production build ...TypeError: Cannot read properties of undefined (reading '_currentValue')
    at Object.Ca (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:1238:14)
    at exports.useContext (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:2251:22)
    at useTranslationInPages (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:430:38)
    at useTranslation (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:460:12)
    at Home (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/app/page.js:222:102)
    at X (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:1416:13)
    at Na (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:1584:21)
    at Array.toJSON (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:1344:20)
    at stringify (<anonymous>)
    at da (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:858:9)

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read properties of undefined (reading '_currentValue')
    at Object.Ca (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:1238:14)
    at exports.useContext (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:2251:22)
    at useTranslationInPages (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:430:38)
    at useTranslation (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:460:12)
    at Home (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/app/page.js:222:102)
    at X (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:1416:13)
    at Na (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:1584:21)
    at Array.toJSON (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:1344:20)
    at stringify (<anonymous>)
    at da (/Users/pannoire/Projects/utterHealth/packages/web/.next/server/chunks/42.js:858:9)
info  - Generating static pages (5/5)

My code is rather simply:

// src/app/layout.tsx
interface RootLayoutProps {
  children: React.ReactNode;
}

export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <html>
      <head>
        <link rel="manifest" href="/manifest.json" />
      </head>
      <body>{children}</body>
    </html>
  );
}

// src/app/page.tsx
import useTranslation from 'next-translate/useTranslation';

export default function Home() {
  const { t } = useTranslation('common');

  return <span>{t('test')}</span>;
}

// next.config.js
const nextTranslate = require('next-translate-plugin')

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    appDir: true,
  },
};

module.exports = nextTranslate(nextConfig);

What did you expect to happen?
Build processes successfully.

Are you willing to submit a pull request to fix this bug?
Yes, if I get to know what's failing

Improve detection of getInitialProps

What version of this package are you using?
2.0.5
What operating system, Node.js, and npm version?

What happened?
If I have a page like this

// src/pages/verify-email.ts
import { AccountVerifyEmailPage } from "features/account/components/AccountVerifyEmailPage"

export default AccountVerifyEmailPage

// src/features/account/components/AccountVerifyEmailPage
export const AccountVerifyEmailPage: NextPage = () => {
  ...
}

AccountVerifyEmailPage.getInitialProps = ctx => {
  ...
}

next-translate-plugin doesn't properly detect that this verify-email page is using getInitialProps and instead tries to load getServerSideProps, which then causes a conflict/error on the page. I currently have to do a workaround where I wrap it with a no-op HoC in order to force getInitialProps. Is there a way we can improve this detection?

What did you expect to happen?

Are you willing to submit a pull request to fix this bug?

Client-side routing requests incorrect path with `getServerSideProps` on Vercel

What version of this package are you using?
^2.6.2
What operating system, Node.js, and npm version?
node: v20
What happened?
When using client-side routing with getServerSideProps with the plugin enabled, the client-side requests are being sent to /example instead of the expected /_next/data/[build-id]/example.json. This results in every request hitting the server directly.
Because I want to defer getServerSideProps on client side navigation regarding to this issue and workaround, this behavior slows down routings.

If you remove next-translate-plugin from next.config.js it works as expected with or without other plugins like next-pwa and @sentry/nextjs.

The reproduction is here.
You can't see the problem when you yarn dev, yarn start or even vercel dev, but only deployed to Vercel.
I haven't tested it with Cloud Run or similar services, so I don't know if they exhibit the same behavior other than Vercel.

What did you expect to happen?
I expected the client-side routing to send requests to /_next/data/[build-id]/example.json

Are you willing to submit a pull request to fix this bug?
I want, since it is affecting our production, but I will need some expertise as I am not very familiar.

You may need an additional loader to handle the result of these loaders.

What version of this package are you using?
"next-translate-plugin": "^2.0.2"

What operating system, Node.js, and npm version?
v18.15.0

What happened?
after I upgraded next-translate and added next-translate-plugin my builds started to fail. Everything works correctly in development server but I am not able to build my app. I am using nx monorepo and all the stack trace and errors points to my lib folders interestingly. Everything was working before with next v12.1.5 and next-translate v1.4.0

What did you expect to happen?
It should of work.

Are you willing to submit a pull request to fix this bug?
No

---

**Stack Trace

File was processed with these loaders:
 * ../../node_modules/next-translate-plugin/lib/cjs/loader.js
You may need an additional loader to handle the result of these loaders.
| 
|   return (
>     <div className={cx([styles.embla, options.wrapperClass])}>
|       <div className={styles.embla__viewport} ref={viewportRef}>
|         <div className={styles.embla__container}>

Import trace for requested module:
../../libs/core/components/web/ImageSlider/index.js
../../libs/core/components/web/index.js

---

if I downgrade next version to 13.1.1 (from v13.2.4)then I get the below error

info  - Collecting page data .Error: You can not use getInitialProps with getStaticProps. To use SSG, please remove your getInitialProps
    at /Users/burakgunduz/Documents/development/work/fg-client/node_modules/next/dist/build/utils.js:913:19
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Span.traceAsyncFn (/Users/burakgunduz/Documents/development/work/fg-client/node_modules/next/dist/trace/trace.js:79:20)
info  - Collecting page data .
 >  NX   Failed to collect page data for /_error```

Nx Nextjs build crashes with error "Module not found: Can't resolve 'fs'" For ISR Pages

What version of this package are you using?
2.6.2

What operating system, Node.js, and npm version?
Mac, node - v18.17.1, npm - 9.6.7

What happened?

When i am using next-translate inside next.config.js it breaks my app with following error message -
Module not found: Can't resolve 'fs'
But when remove next-translate from next.config.js, it works fine and also builds the code. Interestingly when I use next-translate along with appWithI18n in _app it starts working again with no issues in the build (Please note even if i have used appWithI18n, loader prop is not set in i18n.js config file)

On digging further found out that this might be causing due to ISR pages, I have both getStaticProps and getServerSideProps to support ISR. When i build my app with next-translate it uses only getStaticProps as loader and does not include getServerSideProps for ISR as a part of the build. Due to which it causes server side code to be included inside client bundle and thus causing above error.

Is there a way to support ISR pages as well for i18n ?

What did you expect to happen?
Should build next app

Are you willing to submit a pull request to fix this bug?
No

next-translate-plugin with @module-federation/nextjs-mf, useTranslation not working!

What version of this package are you using?
when i used next-translate-plugin with @module-federation/nextjs-mf, useTranslation not working! help
What operating system, Node.js, and npm version?
node v18.16.1
What happened?
when module.exports = nextTranslate(); works fine!
when

module.exports = nextTranslate(webpack: (config, options) => {
    const location = options.isServer ? 'ssr' : 'chunks'
    config.plugins.push(
      new NextFederationPlugin({
        name: 'main',
        filename: 'static/chunks/main.js',
        exposes: {
        },
        remotes: {
          remoteHeader: `remoteHeader@http://localhost:9000/_next/static/${location}/remoteHeaderEntry.js`,
        },
        shared: {},
        extraOptions: {
          automaticAsyncBoundary: true
        }
      })
    )
    return config
  })

import useTranslation from 'next-translate/useTranslation'
t('mc_common_footer_about')

render： mc_common_footer_about
What did you expect to happen?
translation words~~
Are you willing to submit a pull request to fix this bug?

Support for Next 13 App Router & Pages Router

What version of this package are you using?
[email protected]

What problem do you want to solve?
Currently, next-translate-plugin webpack loader can only support either Pages Router or App Router based on experimental.appDir configuration in next.config.js. While most of production apps are still migrating from the old Pages Router, we need to support both of those types of routing.

What do you think is the correct solution to this problem?
The solution is to support multiple pages directories and add necessary helpers accordingly, heavily based on the directory pattern. If page is under a valid App Router directory, than it is a new Next 13 page. If page is under a valid Pages Router directory, than it is a legacy page. Other files are skipped.

Are you willing to submit a pull request to implement this change?
Yes!

App Directory pages giving 404

What version of this package are you using?

[email protected]
[email protected]

What operating system, Node.js, and npm version?

Linux
Node v20.5.1
Npm v9.8.0

What happened?

App Directory pages gives 404 when using next-translate-plugin in next.config.js

What did you expect to happen?

App Directory pages should load

Are you willing to submit a pull request to fix this bug?

No, sorry

https://codesandbox.io/p/sandbox/nifty-stallman-4y9z6y

Client component: Error: Cannot read properties of undefined (reading '_context')

What version of this package are you using?

2.3.0-canary.3

What operating system, Node.js, and npm version?

• MacOS
• Node.js: v18.14.0
• npm: 9.3.1

What happened?

I was checking #22 because I was getting hydration errors when using translations in client components. By coincidence @aralroca had just commented that it should be fixed in 2.3.0-canary.3, so I decided to try it out. Then I got this error:

Error: Cannot read properties of undefined (reading '_context')

I created a repository:

https://github.com/amosbastian/nx-next-translate

npm i
npx nx serve web

What did you expect to happen?

I expected it to run

Are you willing to submit a pull request to fix this bug?

I could if necessary

next-translate overrides next config when passed a config function

What version of this package are you using?

1.6.0

What operating system, Node.js, and npm version?

linux, node 16, npm 8

What happened?

the next config can either be an object:

const nextConfig = {
  /* config options here */
}

module.exports = nextConfig

or a (async) function:

module.exports = (phase, { defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    /* config options here */
  }
  return nextConfig
}

both examples are from the next documentation.

When passing a function to next-translate tho, it replaces that function with an object, discarding all the previous content.

I prepared a minimal reproduction here.

What did you expect to happen?

I expected the config to be extended either way.

Other config wrappers, like @sentry/nextjs, work like that.

Are you willing to submit a pull request to fix this bug?

If this is confirmed indeed a bug, I give it a try.

Support for nextjs 13.4 Turbopack

hey there, just been here to drop that i definitely love your plugin. it does an amazing work in Nextjs.

I was currently investigating the new turbopack feature that you can now try with next dev --turbo or next build --turbo (it's currently in beta as you can see here https://nextjs.org/blog/next-13-4#turbopack-beta) and then i realize that this might not be very compatible with the current next-translate plugin.

I tried to remove theses value to test, etc but i suspect the main issue to be the next-translate-plugin that is something made for webpack.

So i was wondering, do you guys plan to work on a future integration with turbopack? Do you think it will require a radical change of the plugin or is there a way to make it work both for webpack and turbopack?