i18n自体のエラーは出なかったけど、翻訳されず、定義名が表示されるようになりました。
Vitestも落ちるようになった。上記のi18nに対応した副作用と、happy-domのバージョンアップ影響？でした。
- 対象バージョン
- vueI18nのファイルが読めなくなる？
- messagesの中身が空になった
- [Vitest]ReferenceError: visualViewport is not defined
- [Vitest]messagesの中身が空になった
- 今回のコミット内容
対象バージョン
package.json
- "@nuxtjs/i18n": "^9.1.1",
+ "@nuxtjs/i18n": "^9.5.6",
- "happy-dom": "^16.3.0",
+ "happy-dom": "^18.0.1",
vueI18nのファイルが読めなくなる？
基準のパスが./から./i18n/に変更される為。
移動してもいいけど、遠くなるので、現在の場所を維持するようにしました。
WARN出てたけど、動いていたみたい。パス変更でWARNは消えました。
WARN Vue I18n configuration file ./i18n.config.ts not found in ./i18n. Skipping...
nuxt.config.ts
i18n: {
- vueI18n: './i18n.config.ts'
+ vueI18n: '../i18n.config.ts'
},
messagesの中身が空になった
i18n.config.tsでmessagesを直接入れるようにしていましたが、中身が空になっている事を確認。
localesのfileで指定する事はできる。以前は、jsonだけだった気がするけど、tsも渡せるようになったみたい。（ts使いたいのはコメント入れたいから）
デフォルトの設置場所は./i18n/locales/で、これも移動してもいいけど、遠くなるので、現在の場所を維持する為に、langDirを設定しています。
i18n.config.ts
- import { en } from './locales/en'
- import { ja } from './locales/ja'
export const locales = [
- { code: 'en', iso: 'en_US', name: 'English' },
+ { code: 'en', iso: 'en_US', name: 'English', file: 'en.ts' },
- { code: 'ja', iso: 'ja_JP', name: '日本語' }
+ { code: 'ja', iso: 'ja_JP', name: '日本語', file: 'ja.ts' }
]
export default {
- messages: {
- en,
- ja
- }
}
nuxt.config.ts
- import { cookieKey, defaultLocale, locales } from './i18n.config'
+ import { cookieKey, defaultLocale, locales, langDir } from './i18n.config'
i18n: {
defaultLocale,
locales,
+ langDir,
- vueI18n: './i18n.config.ts'
+ vueI18n: '../i18n.config.ts'
},
locales/en.ts, ja.ts
- export const en = {
+ export default {
[Vitest]ReferenceError: visualViewport is not defined
% yarn test ⎯⎯⎯ Unhandled Rejection ⎯⎯⎯ ReferenceError: visualViewport is not defined ❯ fn node_modules/vuetify/src/components/VOverlay/locationStrategies.ts:95:7 TypeError: Cannot read properties of null (reading 'emitsOptions') ❯ shouldUpdateComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6676:27
happy-domのバージョンアップの影響か、window.visualViewportが見つからなくなりました。
自分で用意すればOK
vitest.config.ts
export default defineConfig({
test: {
globals: true,
environment: 'happy-dom',
setupFiles: './test/setup.ts',
test/setup.ts
+ // NOTE: happy-dom -> ReferenceError: visualViewport is not defined
+ Object.defineProperty(window, 'visualViewport', {
+ writable: true,
+ value: {
+ width: 1024,
+ height: 768,
+ scale: 1,
+ offsetLeft: 0,
+ offsetTop: 0,
+ pageLeft: 0,
+ pageTop: 0,
+ addEventListener: vi.fn(),
+ removeEventListener: vi.fn()
+ }
+ })
[Vitest]messagesの中身が空になった
% yarn test stderr | test/layouts/default.test.ts > default.vue > [ログイン中]表示される [intlify] Not found 'env_name.production' key in 'ja' locale messages. [intlify] Fall back to translate 'env_name.production' key with 'en' locale. [intlify] Not found 'env_name.production' key in 'en' locale messages. [intlify] Not found 'app_name' key in 'ja' locale messages. [intlify] Fall back to translate 'app_name' key with 'en' locale. [intlify] Not found 'app_name' key in 'en' locale messages.
Vitestでは、createI18nを使っているので、messagesを消した影響です。
i18n.config.ts
- messages: {
- en,
- ja
- }
戻すと、無駄な処理が走るようになるので、createI18nで明示的に渡すように変更しました。
test/setup.ts
+ import en from '~/locales/en'
+ import ja from '~/locales/ja'
// Mock Config/i18n
- const i18n: any = createI18n({ ...i18nConfig, locale: helper.locale })
+ const i18n: any = createI18n({
+ ...i18nConfig,
+ locale: helper.locale,
+ messages: {
+ en,
+ ja
+ }
+ } as any)
今回のコミット内容
origin バージョンアップ: Package
https://task.nightonly.com/-/nightonly?tab=detail&code=2a0dn515zx919so0fd5xmgpq9
