浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

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”と指定して本番環境に戻します。

  • この記事いいね! (0)