search

nuxt-modules / i18n

I18n module for Nuxt
https://i18n.nuxtjs.org
MIT License
1.75k stars 483 forks source link

Use usei18n() in middleware , SyntaxError: Must be called at the top of a `setup` function #2754

Closed ZIFEIYU2023 closed 9 months ago

ZIFEIYU2023 commented 9 months ago

Environment

  "devDependencies": {
    "nuxt": "^3.10.0",
    "vue": "^3.4.15",
    "vue-router": "^4.2.5"
  },
  "dependencies": {
    "@nuxtjs/i18n": "8.0.1"
  }

Reproduction

https://codesandbox.io/p/devbox/example-i18n-wsc2q9?file=%2Fmiddleware%2F01.example.global.ts%3A6%2C1

Describe the bug

Use usei18n() in middleware , SyntaxError: Must be called at the top of a setup function

Additional context

No response

Logs

No error handlers registered to handle middleware errors. You can register an error handler with `router.onError()` SyntaxError: Must be called at the top of a `setup` function
    at Module.createCompileError (/workspaces/sandbox/node_modules/.pnpm/@intlify+message-compiler@9.9.1/node_modules/@intlify/message-compiler/dist/message-compiler.mjs:73:17)
    at createI18nError (/workspaces/sandbox/node_modules/.pnpm/vue-i18n@9.9.1_vue@3.4.15/node_modules/vue-i18n/dist/vue-i18n.mjs:92:32)
    at Module.useI18n (/workspaces/sandbox/node_modules/.pnpm/vue-i18n@9.9.1_vue@3.4.15/node_modules/vue-i18n/dist/vue-i18n.mjs:1870:11)
    at /workspaces/sandbox/middleware/01.test.global.ts:8:49
    at /workspaces/sandbox/node_modules/.pnpm/nuxt@3.10.0_rollup@4.9.6_vite@5.0.12/node_modules/nuxt/dist/app/plugins/router.js:169:63
    at fn (/workspaces/sandbox/node_modules/.pnpm/nuxt@3.10.0_rollup@4.9.6_vite@5.0.12/node_modules/nuxt/dist/app/nuxt.js:192:44)
    at Object.callAsync (file:///workspaces/sandbox/node_modules/.pnpm/unctx@2.3.1/node_modules/unctx/dist/index.mjs:68:55)
    at /workspaces/sandbox/node_modules/.pnpm/nuxt@3.10.0_rollup@4.9.6_vite@5.0.12/node_modules/nuxt/dist/app/nuxt.js:194:56
    at Object.runWithContext (/workspaces/sandbox/node_modules/.pnpm/@vue+runtime-core@3.4.15/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3963:18)
    at callWithNuxt (/workspaces/sandbox/node_modules/.pnpm/nuxt@3.10.0_rollup@4.9.6_vite@5.0.12/node_modules/nuxt/dist/app/nuxt.js:194:24) {
  code: 26,
  domain: undefined
}
[nuxt] Calling `useRoute` within middleware may lead to misleading results. Instead, use the (to, from) arguments passed to the middleware to access the new and old routes.
No error handlers registered to handle middleware errors. You can register an error handler with `router.onError()` SyntaxError: Must be called at the top of a `setup` function
    at Module.createCompileError (/workspaces/sandbox/node_modules/.pnpm/@intlify+message-compiler@9.9.1/node_modules/@intlify/message-compiler/dist/message-compiler.mjs:73:17)
    at createI18nError (/workspaces/sandbox/node_modules/.pnpm/vue-i18n@9.9.1_vue@3.4.15/node_modules/vue-i18n/dist/vue-i18n.mjs:92:32)
    at Module.useI18n (/workspaces/sandbox/node_modules/.pnpm/vue-i18n@9.9.1_vue@3.4.15/node_modules/vue-i18n/dist/vue-i18n.mjs:1870:11)
    at /workspaces/sandbox/middleware/01.test.global.ts:8:49
    at /workspaces/sandbox/node_modules/.pnpm/nuxt@3.10.0_rollup@4.9.6_vite@5.0.12/node_modules/nuxt/dist/app/plugins/router.js:169:63
    at fn (/workspaces/sandbox/node_modules/.pnpm/nuxt@3.10.0_rollup@4.9.6_vite@5.0.12/node_modules/nuxt/dist/app/nuxt.js:192:44)
    at Object.callAsync (file:///workspaces/sandbox/node_modules/.pnpm/unctx@2.3.1/node_modules/unctx/dist/index.mjs:68:55)
    at /workspaces/sandbox/node_modules/.pnpm/nuxt@3.10.0_rollup@4.9.6_vite@5.0.12/node_modules/nuxt/dist/app/nuxt.js:194:56
    at Object.runWithContext (/workspaces/sandbox/node_modules/.pnpm/@vue+runtime-core@3.4.15/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3963:18)
    at callWithNuxt (/workspaces/sandbox/node_modules/.pnpm/nuxt@3.10.0_rollup@4.9.6_vite@5.0.12/node_modules/nuxt/dist/app/nuxt.js:194:24) {
  code: 26,
  domain: undefined
}
[nuxt] Calling `useRoute` within middleware may lead to misleading results. Instead, use the (to, from) arguments passed to the middleware to access the new and old routes.
No error handlers registered to handle middleware errors. You can register an error handler with `router.onError()` SyntaxError: Must be called at the top of a `setup` function
    at Module.createCompileError (/workspaces/sandbox/node_modules/.pnpm/@intlify+message-compiler@9.9.1/node_modules/@intlify/message-compiler/dist/message-compiler.mjs:73:17)
    at createI18nError (/workspaces/sandbox/node_modules/.pnpm/vue-i18n@9.9.1_vue@3.4.15/node_modules/vue-i18n/dist/vue-i18n.mjs:92:32)
    at Module.useI18n (/workspaces/sandbox/node_modules/.pnpm/vue-i18n@9.9.1_vue@3.4.15/node_modules/vue-i18n/dist/vue-i18n.mjs:1870:11)
    at /workspaces/sandbox/middleware/01.test.global.ts:8:49
    at /workspaces/sandbox/node_modules/.pnpm/nuxt@3.10.0_rollup@4.9.6_vite@5.0.12/node_modules/nuxt/dist/app/plugins/router.js:169:63
    at fn (/workspaces/sandbox/node_modules/.pnpm/nuxt@3.10.0_rollup@4.9.6_vite@5.0.12/node_modules/nuxt/dist/app/nuxt.js:192:44)
    at Object.callAsync (file:///workspaces/sandbox/node_modules/.pnpm/unctx@2.3.1/node_modules/unctx/dist/index.mjs:68:55)
    at /workspaces/sandbox/node_modules/.pnpm/nuxt@3.10.0_rollup@4.9.6_vite@5.0.12/node_modules/nuxt/dist/app/nuxt.js:194:56
    at Object.runWithContext (/workspaces/sandbox/node_modules/.pnpm/@vue+runtime-core@3.4.15/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3963:18)
    at callWithNuxt (/workspaces/sandbox/node_modules/.pnpm/nuxt@3.10.0_rollup@4.9.6_vite@5.0.12/node_modules/nuxt/dist/app/nuxt.js:194:24) {
  code: 26,
  domain: undefined
}
ZIFEIYU2023 commented 9 months ago

so sad

ZIFEIYU2023 commented 9 months ago

I tried useNuxtApp().$i18n.localeProperties.value can be used, but useI18n() cannot

BobbieGoede commented 9 months ago

I can't access your reproduction, maybe you need to change some permissions?

ZIFEIYU2023 commented 9 months ago

https://codesandbox.io/p/devbox/example-i18n-wsc2q9?file=%2Fmiddleware%2F01.example.global.ts%3A6%2C1 @BobbieGoede

BobbieGoede commented 9 months ago

Actually, this is expected behaviour and enforced in vue-i18n, the general convention is to only allow using composables in a setup function.

As you already found out, useNuxtApp().$i18n should allow you to access the same values (global scope).