フロントエンド: Remixでのi18nの調査と検証

[yu23ki14]

i18n

Description

• 海外プロジェクトとの連携や、導入も早めに進めたいので、言語対応を日本語・英語の両方にしたい
• Remixでのi18nについて調べて、ミニマムでセットアップしてみる

Notes

Screenshots

If applicable, add screenshots to help explain your problem.

[mashharuki]

参考になりそうなブログ記事を発見！！

https://note.com/lizefield/n/naa3fb014a8c9

[mashharuki]

https://remix.run/blog/remix-i18n

https://zenn.dev/mktu/articles/7f924edd8125a4

[mashharuki]

https://github.com/sergiodxa/remix-i18next
↑ GitHub 基本的にこの内容通りに設定を進めれば良さそう！

[mashharuki]

↑ ビルドは通った！！

[mashharuki]

[mashharuki]

↑ と思ったらエラーになった・・・。

[mashharuki]

エラー内容

(node:20938) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 end listeners added to [ReadStream]. Use emitter.setMaxListeners() to increase limit
(Use `node --trace-warnings ...` to show where the warning was created)
9:44:01 PM [vite] server restarted.
9:44:08 PM [vite] Internal server error: Cannot read properties of undefined (reading 'status')
      at Object.toNodeRequest (/Users/harukikondo/git/toban/node_modules/@remix-run/dev/dist/vite/node-adapter.js:69:28)
      at nodeHandler (/Users/harukikondo/git/toban/node_modules/@remix-run/dev/dist/vite/plugin.js:869:35)
      at /Users/harukikondo/git/toban/node_modules/@remix-run/dev/dist/vite/plugin.js:871:15
✘ [ERROR] Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)

    ../../node_modules/i18next-fs-backend/esm/readFile.js:8:20:
      8 │ var fs = !isDeno ? (await import('node:fs')).default : undefined;
        ╵                     ~~~~~

✘ [ERROR] Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)

    ../../node_modules/i18next-fs-backend/esm/writeFile.js:7:20:
      7 │ var fs = !isDeno ? (await import('node:fs')).default : undefined;
        ╵                     ~~~~~

9:44:08 PM [vite] error while updating dependencies:
Error: Build failed with 2 errors:
../../node_modules/i18next-fs-backend/esm/readFile.js:8:20: ERROR: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)
../../node_modules/i18next-fs-backend/esm/writeFile.js:7:20: ERROR: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)
    at failureErrorWithLog (/Users/harukikondo/git/toban/node_modules/vite/node_modules/esbuild/lib/main.js:1472:15)
    at /Users/harukikondo/git/toban/node_modules/vite/node_modules/esbuild/lib/main.js:945:25
    at /Users/harukikondo/git/toban/node_modules/vite/node_modules/esbuild/lib/main.js:1353:9
    at processTicksAndRejections (node:internal/process/task_queues:95:5)

[mashharuki]

デモサイト見つけた！
これを参考にする。

https://remix-i18n.fly.dev/?lng=ja

コードは以下の通り
https://github.com/dev-xo/remix-i18n-example?tab=readme-ov-file

[mashharuki]

https://sergiodxa.com/tutorials/add-i18n-to-a-remix-vite-app
↑ とりあえずこれで検証してみる。

[mashharuki]

https://github.com/mashharuki/remix-vite-i18next
↑ これで最小構成の検証が完了。

これが移植できれば良さそう。