Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[next-intl] Not parsing the namespace key correctly when using getTranslations #1170

Open
ellisio opened this issue Jun 20, 2024 · 1 comment
Labels
bug Something isn't working

Comments

@ellisio
Copy link

ellisio commented Jun 20, 2024

Describe the bug
When using getTranslations({ locale, namespace: "Metadata" }) inside of the generateMetadata() function, the parsing is incorrect. I would expect this to return only title, as that is the only item in that namespace in en.json.

Extension Version
v2.12.0

Framework/i18n package you are using
next-intl

To Reproduce

  1. Use the following .vscode/settings.json config:
"i18n-ally.localesPaths": ["./apps/app/messages"],
"i18n-ally.enabledFrameworks": ["next-intl"],
"i18n-ally.namespace": true,
"i18n-ally.keystyle": "nested",
"i18n-ally.sourceLanguage": "en",
  1. Use a basic Turborepo project with NextJS.
  2. View screenshot below for bad output.

Device Infomation

  • OS: Sonoma
  • Version: 14.5
  • VS Code Version: 1.90.2

Extension Log

🈶 Activated, v2.12.0

――――――

💼 Workspace root changed to "/Users/aellis/Developer/project"
🌞 Enabled
🧩 Enabled frameworks: next-intl
🧬 Enabled parsers: json, yaml, json5

📈 Telemetry id: 29ea9984-1ad8-4195-8059-25bb0c667d35
🚀 Initializing loader "/Users/aellis/Developer/project"
📂 Directory structure: file
🗃 Path Matcher Regex: /^(?<locale>[\w-_]+)\.(?<ext>json|ya?ml|json5)$/

📂 Loading locales under /Users/aellis/Developer/project/apps/app/messages
	📑 Loading (en) en.json [1718916883954.7827]
	📑 Loading (es) es.json [1718916458935.8823]

👀 Watching change on /Users/aellis/Developer/project/apps/app/messages
✅ Loading finished

Screenshots
image
image
image

@DarioLopes
Copy link

DarioLopes commented Aug 15, 2024

The fix is on another post but here is the solution :

  • Go on the .vscode folder (at the root of your project, create it if it doesn't exist)
  • Inside it create a settings.json (it will be the settings for this project only, overriding VScode global settings. You'll do the same for every project you do) and add this :
{
    "i18n-ally.enabledFrameworks": ["custom"], // * This is the fix for the getTranslations issue
    "i18n-ally.localesPaths": ["src/i18n/messages"], // Change it to match your folder with all the JSON messages
    "i18n-ally.sourceLanguage": "en", // Language that will replace the key on the file
    "i18n-ally.sortKeys": true // On key edit through the plugin, sort the JSON
}

note that only i18n-ally.enabledFrameworks is part of the fix, other settings are here just to show how it works / more options.

  • create another file inside the .vscode folder and name it i18n-ally-custom-framework.yml. Paste this content
languageIds:
    - javascript
    - typescript
    - javascriptreact
    - typescriptreact

usageMatchRegex:
    - "[^\\w\\d]t\\(['\"`]({key})['\"`]"

scopeRangeRegex: "(?:useTranslations\\(|getTranslations\\(|namespace:)\\s*['\"`](.*?)['\"`]"

monopoly: true
  • Reload / restart VScode to take effect.
  • getTranslations is now recognized as a string. (nested or not)

The repo where the solution is can be found here and I found this thanks to @ixartz answer

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Development

No branches or pull requests

2 participants