react-i18nextのエラー：TypeError: Object(…) is not a function useTranslation

react-i18nextで多言語対応（言語切り替え）をしようと思ったら、エラーが出てできなかった。

動作環境

• “react”: “16.4.0”
• “redux”: “^3.6.0”
• “react-redux”: “^5.0.5”
• “react-dom”: “16.4.0”
• “webpack”: “4.28.3”
• “webpack-dev-server”: “3.1.14”
• “i18next”: “^19.0.1”
• “react-i18next”: “^11.2.5”
• “i18next-browser-languagedetector”: “^4.0.1”

エラー

コンパイル後のブラウザ画面にでたエラー

    TypeError: Object(...) is not a function
    useTranslation
    node_modules/react-i18next/dist/es/useTranslation.js:45
    42 | var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; // assert we have the needed i18nInstance
    43 | 
    44 | var i18nFromProps = props.i18n;
    > 45 | var ReactI18nContext = useContext(I18nContext);
        | ^  46 | 
    47 | var _ref = getHasUsedI18nextProvider() ? ReactI18nContext || {} : {},
    48 |     i18nFromContext = _ref.i18n,

原因

Reactのバーションとreact-i18nextのバージョンが合ってない。

react-i18nextをインストールした時のWARNに注目

npm install --save react-i18nextをした後のWARNを良くみてみると、reactのバージョンが違うと怒られています。

npm WARN react-i18next@10.13.1 requires a peer of react@>= 16.8.0 but none is installed. You must install peer dependencies yourself.

本来は、reactのバージョンを16.8.0以上に変更するのがいいと思いますが、
すでにそこそこの規模のサービスが動いているので、reactのバージョンをあげるのは正直怖い・・・。
今度ちゃんとリファクタリング期間を設けて、バージョンあげるなりしなきゃだと思いますが、
とりあえず今は、react-i18nextの方のバージョンを下げることにしました。

対応

react-i18nextのバージョンを9に変えます。

npm install react-i18next@legacy i18next --save

コードの変更

コードv9のものに変更する必要があります。

コンパイルしてもエラーが出なくなりました。

最終的な動作環境

• “react”: “16.4.0”
• “redux”: “^3.6.0”
• “react-redux”: “^5.0.5”
• “react-dom”: “16.4.0”
• “webpack”: “4.28.3”
• “webpack-dev-server”: “3.1.14”
• “react-i18next”: “^9.0.10”
• “i18next”: “^19.0.1”
• “i18next-browser-languagedetector”: “^4.0.1”

v9のドキュメント

Step by step guide (v9) | react-i18next documentation

react.i18next.com

Migrating v9 to v10 | react-i18next documentation

react.i18next.com

reactのバージョンをあげたバージョン

Reactで言語切り替え（多言語対応）

react-i18nextで日本と英語の切り替えをしてみた。 公式のクイックスタートを参考に実装します。 環境 "react": "16.8.0" "redux": "^3.6.0" "react-redux": "^5.0.5" "rea...

pan-shoku.com

2019.12.09