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.

Sign up for GitHub

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

Jump to bottom

@nuxtjs/i18n does not extract from .js files (but .json works) #1258

Open
mrleblanc101 opened this issue Jan 6, 2025 · 3 comments
Open

@nuxtjs/i18n does not extract from .js files (but .json works) #1258

mrleblanc101 opened this issue Jan 6, 2025 · 3 comments
Labels
bug Something isn't working

Comments

@mrleblanc101
Copy link

mrleblanc101 commented Jan 6, 2025 •
edited
Loading

Describe the bug
@nuxtjs/i18n does not extract from .js files (but .json works)

Extension Version

2.13.1

Framework/i18n package you are using

@nuxtjs/i18n@^9.1.1

To Reproduce
My Nuxt config:

i18n: {
    strategy: 'prefix_except_default',
    defaultLocale: 'en',
    locales: [
        {
            code: 'fr',
            name: 'Français',
            language: 'fr-CA',
            file: 'fr.js',
        },
        {
            code: 'en',
            name: 'English',
            language: 'en-CA',
        },
    ],
},

My template:

<div>
    <div>Global message (layer): {{ $t('Welcome global') }}</div>
    <div>Layer message (app): {{ $t('Welcome playground') }}</div>
    <div>Local message (component): {{ t('Welcome local') }}</div>
</div>

Device Infomation

  • OS: macOS Sequoia
  • Version: 15.1
  • VS Code Version: 1.96.2

Extension Log
Go to View -> Output -> i18n Ally, and paste the content below. You should mask any sensitive information

🈶 Activated, v2.13.1

――――――

💼 Workspace root changed to "/Users/sleblanc/www/project_name"
🌞 Enabled
🧩 Enabled frameworks: Vue SFC, Vue
🧬 Enabled parsers: json, yaml, json5

📈 Telemetry id: c482acc1-c660-46b8-96aa-603a4b987666
🚀 Initializing loader "/Users/sleblanc/www/project_name"
📂 Directory structure: file
🗃 Path Matcher Regex: /^(?<locale>[\w-_]+)\.(?<ext>json|ya?ml|json5)$/

📂 Loading locales under /Users/sleblanc/www/project_name/i18n/locales

👀 Watching change on /Users/sleblanc/www/project_name/i18n/locales

📂 Loading locales under /Users/sleblanc/www/project_name/.playground/i18n/locales

👀 Watching change on /Users/sleblanc/www/project_name/.playground/i18n/locales
✅ Loading finished


――――――

📑 Loading sfc /Users/sleblanc/www/project_name/.playground/app/pages/index.vue
📑 Loading sfc /Users/sleblanc/www/project_name/.playground/app/pages/index.vue

Screenshots

With .js locales (and one translation from the .vue <i18n> block inside the SFC):
Screenshot 2025-01-06 at 12 14 26 AM

With .json files (and one translation from the .vue <i18n> block inside the SFC):
Screenshot 2025-01-06 at 12 15 29 AM
@mrleblanc101 mrleblanc101 added the bug Something isn't working label Jan 6, 2025
@mrleblanc101
Copy link
Author

mrleblanc101 commented Jan 6, 2025 •
edited
Loading

From the log, I see that js is not included in 🗃 Path Matcher Regex
Only json, yml, yaml, json5.

🗃 Path Matcher Regex : /^(?<locale>[\w-_]+)\.(?<ext>json|ya?ml|json5)$/

If I manually add js to i18n-ally.enabledParsers in the extension settings:

"i18n-ally.enabledParsers": ["js", "json", "yaml", "json5"],

I get this error:

🈶 Activated, v2.13.1

――――――

💼 Workspace root changed to "/Users/sleblanc/www/project_name"
🌞 Enabled
🧩 Enabled frameworks: Vue SFC, Vue
🧬 Enabled parsers: json, yaml, json5, js

📈 Telemetry id: c482acc1-c660-46b8-96aa-603a4b987666
🚀 Initializing loader "/Users/sleblanc/www/project_name"
📂 Directory structure: file
🗃 Path Matcher Regex: /^(?<locale>[\w-_]+)\.(?<ext>json|ya?ml|json5|m?js)$/

📂 Loading locales under /Users/sleblanc/www/project_name/i18n/locales
	📑 Loading (fr) fr.js [1736142632171.0168]
		🐛 Failed to load Error: Command failed: node "/Users/sleblanc/.vscode/extensions/lokalise.i18n-ally-2.13.1/node_modules/ts-node/dist/bin.js" --dir "/Users/sleblanc/www/project_name" --transpile-only --compiler-options "{\"importHelpers\":false,\"allowJs\":true,\"module\":\"commonjs\"}" "/Users/sleblanc/.vscode/extensions/lokalise.i18n-ally-2.13.1/assets/loader.js" "/Users/sleblanc/www/project_name/i18n/locales/fr.js"

/Users/sleblanc/.vscode/extensions/lokalise.i18n-ally-2.13.1/node_modules/ts-node/src/index.ts:513
    return new TSError(diagnosticText, diagnosticCodes)
           ^
TSError: ⨯ Unable to compile TypeScript:
error TS5095: Option 'bundler' can only be used when 'module' is set to 'preserve' or to 'es2015' or later.

    at createTSError (/Users/sleblanc/.vscode/extensions/lokalise.i18n-ally-2.13.1/node_modules/ts-node/src/index.ts:513:12)
    at reportTSError (/Users/sleblanc/.vscode/extensions/lokalise.i18n-ally-2.13.1/node_modules/ts-node/src/index.ts:517:19)
    at getOutput (/Users/sleblanc/.vscode/extensions/lokalise.i18n-ally-2.13.1/node_modules/ts-node/src/index.ts:955:34)
    at Object.compile (/Users/sleblanc/.vscode/extensions/lokalise.i18n-ally-2.13.1/node_modules/ts-node/src/index.ts:968:32)
    at Module.m._compile (/Users/sleblanc/.vscode/extensions/lokalise.i18n-ally-2.13.1/node_modules/ts-node/src/index.ts:1056:42)
    at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
    at Object.require.extensions.<computed> [as .js] (/Users/sleblanc/.vscode/extensions/lokalise.i18n-ally-2.13.1/node_modules/ts-node/src/index.ts:1059:12)
    at Module.load (node:internal/modules/cjs/loader:1288:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1104:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:174:12)

But the JS file seems formatted correctly:

export default {
    'Welcome playground': 'Bienvenue playground',
};

@mrleblanc101
Copy link
Author

Seems to be related to #994

But the proposed solution doesn't work for me.
If I add:

"i18n-ally.parsers.typescript.compilerOptions": {
    "moduleResolution": "node",
},

Now, I have this error:

🈶 Activated, v2.13.1

――――――

💼 Workspace root changed to "/Users/sleblanc/www/project_name"
🌞 Enabled
🧩 Enabled frameworks: Vue SFC, Vue
🧬 Enabled parsers: json, yaml, json5, js

📈 Telemetry id: c482acc1-c660-46b8-96aa-603a4b987666
🚀 Initializing loader "/Users/sleblanc/www/project_name"
📂 Directory structure: file
🗃 Path Matcher Regex: /^(?<locale>[\w-_]+)\.(?<ext>json|ya?ml|json5|m?js)$/

📂 Loading locales under /Users/sleblanc/www/project_name/i18n/locales
	📑 Loading (fr) fr.js [1736142632171.0168]
		🐛 Failed to load Error: Command failed: node "/Users/sleblanc/.vscode/extensions/lokalise.i18n-ally-2.13.1/node_modules/ts-node/dist/bin.js" --dir "/Users/sleblanc/www/project_name" --transpile-only --compiler-options "{\"importHelpers\":false,\"allowJs\":true,\"module\":\"commonjs\",\"moduleResolution\":\"node\"}" "/Users/sleblanc/.vscode/extensions/lokalise.i18n-ally-2.13.1/assets/loader.js" "/Users/sleblanc/www/project_name/i18n/locales/fr.js"

/Users/sleblanc/.vscode/extensions/lokalise.i18n-ally-2.13.1/node_modules/ts-node/dist/index.js:710
        return old(m, filename);
               ^
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/sleblanc/www/project_name/i18n/locales/fr.js from /Users/sleblanc/.vscode/extensions/lokalise.i18n-ally-2.13.1/assets/loader.js not supported.
Instead change the require of fr.js in /Users/sleblanc/.vscode/extensions/lokalise.i18n-ally-2.13.1/assets/loader.js to a dynamic import() which is available in all CommonJS modules.
    at require.extensions.<computed> [as .js] (/Users/sleblanc/.vscode/extensions/lokalise.i18n-ally-2.13.1/node_modules/ts-node/dist/index.js:710:16)
    at /Users/sleblanc/.vscode/extensions/lokalise.i18n-ally-2.13.1/assets/loader.js:7:13
    at Object.<anonymous> (/Users/sleblanc/.vscode/extensions/lokalise.i18n-ally-2.13.1/assets/loader.js:14:3)
    at m._compile (/Users/sleblanc/.vscode/extensions/lokalise.i18n-ally-2.13.1/node_modules/ts-node/dist/index.js:708:29)

@mrleblanc101
Copy link
Author

tsconfig.json generated by Nuxt:

// Generated by nuxi
{
  "compilerOptions": {
    "paths": {
      "nitropack/types": [
        "../node_modules/nitropack/types"
      ],
      "nitropack/runtime": [
        "../node_modules/nitropack/runtime"
      ],
      "nitropack": [
        "../node_modules/nitropack"
      ],
      "defu": [
        "../node_modules/defu"
      ],
      "h3": [
        "../node_modules/h3"
      ],
      "consola": [
        "../node_modules/consola"
      ],
      "ofetch": [
        "../node_modules/ofetch"
      ],
      "@unhead/vue": [
        "../node_modules/@unhead/vue"
      ],
      "@nuxt/devtools": [
        "../node_modules/@nuxt/devtools"
      ],
      "@vue/runtime-core": [
        "../node_modules/@vue/runtime-core"
      ],
      "@vue/compiler-sfc": [
        "../node_modules/@vue/compiler-sfc"
      ],
      "vue-router": [
        "../node_modules/vue-router"
      ],
      "vue-router/auto-routes": [
        "../node_modules/vue-router/vue-router-auto-routes"
      ],
      "unplugin-vue-router/client": [
        "../node_modules/unplugin-vue-router/client"
      ],
      "@nuxt/schema": [
        "../node_modules/@nuxt/schema"
      ],
      "nuxt": [
        "../node_modules/nuxt"
      ],
      "vite/client": [
        "../node_modules/vite/client"
      ],
      "~": [
        "../app"
      ],
      "~/*": [
        "../app/*"
      ],
      "@": [
        "../app"
      ],
      "@/*": [
        "../app/*"
      ],
      "~~": [
        ".."
      ],
      "~~/*": [
        "../*"
      ],
      "@@": [
        ".."
      ],
      "@@/*": [
        "../*"
      ],
      "#shared": [
        "../shared"
      ],
      "#shared/*": [
        "../shared/*"
      ],
      "assets": [
        "../app/assets"
      ],
      "assets/*": [
        "../app/assets/*"
      ],
      "public": [
        "../public"
      ],
      "#build": [
        "."
      ],
      "#build/*": [
        "./*"
      ],
      "#app": [
        "../node_modules/nuxt/dist/app"
      ],
      "#app/*": [
        "../node_modules/nuxt/dist/app/*"
      ],
      "vue-demi": [
        "../node_modules/nuxt/dist/app/compat/vue-demi"
      ],
      "#color-mode-options": [
        "./color-mode-options.mjs"
      ],
      "vue-i18n": [
        "../node_modules/vue-i18n/dist/vue-i18n"
      ],
      "@intlify/shared": [
        "../node_modules/@intlify/shared/dist/shared"
      ],
      "@intlify/message-compiler": [
        "../node_modules/@intlify/message-compiler/dist/message-compiler"
      ],
      "@intlify/core-base": [
        "../node_modules/@intlify/core-base/dist/core-base"
      ],
      "@intlify/core": [
        "../node_modules/@intlify/core/dist/core.node"
      ],
      "@intlify/utils/h3": [
        "../node_modules/@intlify/utils/dist/h3"
      ],
      "ufo": [
        "../node_modules/ufo/dist/index"
      ],
      "is-https": [
        "../node_modules/is-https/dist/index"
      ],
      "#i18n": [
        "../node_modules/@nuxtjs/i18n/dist/runtime/composables/index"
      ],
      "#vue-router": [
        "../node_modules/vue-router"
      ],
      "#imports": [
        "./imports"
      ],
      "#app-manifest": [
        "./manifest/meta/ae559e6c-0e02-473e-a989-6c9c0d6b5a89"
      ],
      "#components": [
        "./components"
      ]
    },
    "esModuleInterop": true,
    "skipLibCheck": true,
    "target": "ESNext",
    "allowJs": true,
    "resolveJsonModule": true,
    "moduleDetection": "force",
    "isolatedModules": true,
    "verbatimModuleSyntax": true,
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitOverride": true,
    "module": "preserve",
    "noEmit": true,
    "lib": [
      "ESNext",
      "dom",
      "dom.iterable",
      "webworker"
    ],
    "jsx": "preserve",
    "jsxImportSource": "vue",
    "types": [],
    "moduleResolution": "Bundler",
    "useDefineForClassFields": true,
    "noImplicitThis": true,
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "./nuxt.d.ts",
    "../.config/nuxt.*",
    "../**/*",
    "../app/**/*",
    "../node_modules/floating-vue/nuxt/runtime",
    "../node_modules/floating-vue/nuxt/dist/runtime",
    "../node_modules/@nuxtjs/color-mode/runtime",
    "../node_modules/@nuxtjs/color-mode/dist/runtime",
    "../node_modules/@vueuse/nuxt/runtime",
    "../node_modules/@vueuse/nuxt/dist/runtime",
    "../node_modules/@pinia/nuxt/runtime",
    "../node_modules/@pinia/nuxt/dist/runtime",
    "../node_modules/@nuxt/icon/runtime",
    "../node_modules/@nuxt/icon/dist/runtime",
    "../node_modules/@nuxt/fonts/runtime",
    "../node_modules/@nuxt/fonts/dist/runtime",
    "../node_modules/@nuxtjs/tailwindcss/runtime",
    "../node_modules/@nuxtjs/tailwindcss/dist/runtime",
    "../node_modules/@nuxtjs/i18n/runtime",
    "../node_modules/@nuxtjs/i18n/dist/runtime",
    "../node_modules/@nuxt/devtools/runtime",
    "../node_modules/@nuxt/devtools/dist/runtime",
    "../node_modules/@nuxt/telemetry/runtime",
    "../node_modules/@nuxt/telemetry/dist/runtime",
    ".."
  ],
  "exclude": [
    "../dist",
    "../node_modules",
    "../node_modules/nuxt/node_modules",
    "../node_modules/floating-vue/node_modules",
    "../node_modules/@nuxtjs/color-mode/node_modules",
    "../node_modules/@vueuse/nuxt/node_modules",
    "../node_modules/@pinia/nuxt/node_modules",
    "../node_modules/@nuxt/icon/node_modules",
    "../node_modules/@nuxt/fonts/node_modules",
    "../node_modules/@nuxtjs/tailwindcss/node_modules",
    "../node_modules/@nuxtjs/i18n/node_modules",
    "../node_modules/@nuxt/devtools/node_modules",
    "../node_modules/@nuxt/telemetry/node_modules",
    "../node_modules/floating-vue/nuxt/runtime/server",
    "../node_modules/floating-vue/nuxt/dist/runtime/server",
    "../node_modules/@nuxtjs/color-mode/runtime/server",
    "../node_modules/@nuxtjs/color-mode/dist/runtime/server",
    "../node_modules/@vueuse/nuxt/runtime/server",
    "../node_modules/@vueuse/nuxt/dist/runtime/server",
    "../node_modules/@pinia/nuxt/runtime/server",
    "../node_modules/@pinia/nuxt/dist/runtime/server",
    "../node_modules/@nuxt/icon/runtime/server",
    "../node_modules/@nuxt/icon/dist/runtime/server",
    "../node_modules/@nuxt/fonts/runtime/server",
    "../node_modules/@nuxt/fonts/dist/runtime/server",
    "../node_modules/@nuxtjs/tailwindcss/runtime/server",
    "../node_modules/@nuxtjs/tailwindcss/dist/runtime/server",
    "../node_modules/@nuxtjs/i18n/runtime/server",
    "../node_modules/@nuxtjs/i18n/dist/runtime/server",
    "../node_modules/@nuxt/devtools/runtime/server",
    "../node_modules/@nuxt/devtools/dist/runtime/server",
    "../node_modules/@nuxt/telemetry/runtime/server",
    "../node_modules/@nuxt/telemetry/dist/runtime/server",
    "../.output"
  ]
}

tsconfig.server.json generated by Nuxt

{
  "compilerOptions": {
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noEmit": true,
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "allowJs": true,
    "resolveJsonModule": true,
    "jsx": "preserve",
    "allowSyntheticDefaultImports": true,
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment",
    "paths": {
      "#imports": [
        "./types/nitro-imports"
      ],
      "~/*": [
        "../app/*",
        "../app/*"
      ],
      "@/*": [
        "../app/*",
        "../app/*"
      ],
      "~~/*": [
        "../*",
        "../*"
      ],
      "@@/*": [
        "../*",
        "../*"
      ],
      "nitropack/types": [
        "../node_modules/nitropack/types"
      ],
      "nitropack/runtime": [
        "../node_modules/nitropack/runtime"
      ],
      "nitropack": [
        "../node_modules/nitropack"
      ],
      "defu": [
        "../node_modules/defu"
      ],
      "h3": [
        "../node_modules/h3"
      ],
      "consola": [
        "../node_modules/consola"
      ],
      "ofetch": [
        "../node_modules/ofetch"
      ],
      "@unhead/vue": [
        "../node_modules/@unhead/vue"
      ],
      "@nuxt/devtools": [
        "../node_modules/@nuxt/devtools"
      ],
      "@vue/runtime-core": [
        "../node_modules/@vue/runtime-core"
      ],
      "@vue/compiler-sfc": [
        "../node_modules/@vue/compiler-sfc"
      ],
      "vue-router": [
        "../node_modules/vue-router"
      ],
      "vue-router/auto-routes": [
        "../node_modules/vue-router/vue-router-auto-routes"
      ],
      "unplugin-vue-router/client": [
        "../node_modules/unplugin-vue-router/client"
      ],
      "@nuxt/schema": [
        "../node_modules/@nuxt/schema"
      ],
      "nuxt": [
        "../node_modules/nuxt"
      ],
      "vite/client": [
        "../node_modules/vite/client"
      ],
      "~": [
        "../app"
      ],
      "@": [
        "../app"
      ],
      "~~": [
        "./.."
      ],
      "@@": [
        "./.."
      ],
      "#shared": [
        "../shared"
      ],
      "#shared/*": [
        "../shared/*"
      ],
      "assets": [
        "../app/assets"
      ],
      "assets/*": [
        "../app/assets/*"
      ],
      "public": [
        "../public"
      ],
      "#build": [
        "./"
      ],
      "#build/*": [
        "./*"
      ],
      "#internal/nuxt/paths": [
        "../node_modules/nuxt/dist/core/runtime/nitro/paths"
      ],
      "#color-mode-options": [
        "./color-mode-options"
      ],
      "vue-i18n": [
        "../node_modules/vue-i18n/dist/vue-i18n"
      ],
      "@intlify/shared": [
        "../node_modules/@intlify/shared/dist/shared"
      ],
      "@intlify/message-compiler": [
        "../node_modules/@intlify/message-compiler/dist/message-compiler"
      ],
      "@intlify/core-base": [
        "../node_modules/@intlify/core-base/dist/core-base"
      ],
      "@intlify/core": [
        "../node_modules/@intlify/core/dist/core.node"
      ],
      "@intlify/utils/h3": [
        "../node_modules/@intlify/utils/dist/h3"
      ],
      "ufo": [
        "../node_modules/ufo/dist/index"
      ],
      "is-https": [
        "../node_modules/is-https/dist/index"
      ],
      "#i18n": [
        "../node_modules/@nuxtjs/i18n/dist/runtime/composables/index"
      ],
      "#vue-router": [
        "./vue-router"
      ],
      "#nuxt-icon-server-bundle": [
        "./nuxt-icon-server-bundle"
      ]
    },
    "lib": [
      "esnext",
      "webworker",
      "dom.iterable"
    ]
  },
  "include": [
    "./types/nitro-nuxt.d.ts",
    "../node_modules/floating-vue/nuxt/runtime/server",
    "../node_modules/@nuxtjs/color-mode/runtime/server",
    "../node_modules/@vueuse/nuxt/runtime/server",
    "../node_modules/@pinia/nuxt/runtime/server",
    "../node_modules/@nuxt/icon/runtime/server",
    "../node_modules/@nuxt/fonts/runtime/server",
    "../node_modules/@nuxtjs/tailwindcss/runtime/server",
    "../node_modules/@nuxtjs/i18n/runtime/server",
    "../node_modules/@nuxt/devtools/runtime/server",
    "../node_modules/@nuxt/telemetry/runtime/server",
    "./types/nitro.d.ts",
    "../**/*",
    "../server/**/*"
  ],
  "exclude": [
    "../node_modules",
    "../node_modules/nuxt/node_modules",
    "../node_modules/floating-vue/node_modules",
    "../node_modules/@nuxtjs/color-mode/node_modules",
    "../node_modules/@vueuse/nuxt/node_modules",
    "../node_modules/@pinia/nuxt/node_modules",
    "../node_modules/@nuxt/icon/node_modules",
    "../node_modules/@nuxt/fonts/node_modules",
    "../node_modules/@nuxtjs/tailwindcss/node_modules",
    "../node_modules/@nuxtjs/i18n/node_modules",
    "../node_modules/@nuxt/devtools/node_modules",
    "../node_modules/@nuxt/telemetry/node_modules",
    "../dist"
  ]
}

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

No branches or pull requests
1 participant
@mrleblanc101