Minified React error～エラーの解決方法と詳細情報を見る方法

const location = useLocation();をしたら以下のようなエラーにひっかかった。

Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment

for full errors and additional helpful warnings.

これだけ見ると何もわからない。

一回自分のコードを見渡してみると、一か所怪しいところを発見。

uselocationはreact-router-dom付属のライブラリなのですが、インポート時にreact-router-domを

二回呼んでいたのが原因でした。

</pre>
import { HashRouter as Router, Redirect, Route, Switch } from 'react-router-dom';

import { useLocation } from 'react-router-dom';

↑二重に読んでいた
<pre>

スタックオーバーフローでも同じ問題を抱えた人を発見。

https://stackoverflow.com/questions/62026031/useeffect-error-minified-react-error-321-gtm-implementation-instead-of-google

昔のreactでは元々二重インポート問題なくできていたのですが、バグ防止のために使用が変わったのでしょうか。

何にせよこの書き方には何のメリットもないので速攻で直したほうが吉です。

話題から外れますが、上記のエラーの内容はwebpack.config.jsのmodeにdevelopmentを指定して

開発環境に切り替えることで見ることができます。

エラーが解決したらmode: “production”と指定して本番環境に戻します。