Would this plugin allow me to colocate my translation files with components?

[npearson72]

I've posted the following discussion here: https://github.com/i18next/i18next/discussions/2034

I'll just duplicate it to avoid having to click away from here:

Similar to css modules, tests, ect... I'd like to add my locale files next to my React components.

Imagine some deeply nested directory:

Foo.locale.json <-- Here my translation file is near my component
Foo.module.scss
Foo.text.tsx 
Foo.tsx 

Would your plugin help with this?

[rowellx68]

We were able to co-locate the translations but not as flat as your example. It seems to be working well for us so far.

Our folder structure looks like this:

src
├─ locales
│   └─ en-GB
│       └─ translations.json
└─ components
    └─ Greeter
        ├─ Greeter.tsx
        └─ locales
            └─ en-GB
                └─ namespace.json

Here's what the JSON looks like:

{
  "Greeter": {
    "greeting": "Hello, {{name}}"
  }
}

And the usage in the TSX would look something like this:

<h1>{t('namespace:Greeter.message', { name: 'John' })}</h1>

Here's a snippet of our vite.config.ts

import { defineConfig } from 'vite'
import { globSync } from 'glob'
import i18nextLoader from 'vite-plugin-i18next-loader'

export default defineConfig({
  plugins: [
    i18nextLoader({
      namespaceResolution: 'basename',
      paths: [
        './src/locales',
        ...globSync('./src/{components,pages}/**/locales'),
      ]
    })
  ]
})

[rosskevin]

@npearson72 I don't see why not. If it's not working for you, I suggest you check out the source and create a new test scenario (similar to the others) to reproduce the intended output.