Amplify UIのログイン画面

Amplify UIを使えば画像のようなログイン画面が簡単につくれます。

この画面の作り方は公式にも、いろんなサイトにも載っているので今回は割愛します。

公式はこちら

Amplify UIを日本語にしようとしたら一部だけ英語のまま

このUIに対して、I18nというモジュールを使えば日本語化することができます。
しかし、ユーザー名のプレースホルダだけ「Enter your Username」で英語のままになります。

英語と日本語のマッピングファイルは下記に置いてあり、日本語化するときにこのファイルを使っています。

しかし、「Enter your Username」とすべきところを「Enter your username」としてしまっており、参照できずに英語のままになってます。（usernameの"u"が小文字になってます）

これについては既に見つけている方がおり、プルリクを出していました。

プルリクが出されているのでいずれ修正されると思いますが、対応方法としてはモジュールの中身のマッピングファイルを直接直すか、下記の記述を追加することで回避できます。

I18n.putVocabularies(translations);
I18n.setLanguage('ja');

// 下記を追加
I18n.putVocabularies({
  ja: {
    'Enter your Username': 'ユーザー名を入力',
  },
});