【React】Uncaught runtime errors: × ERROR Network Error AxiosError: Network Error at XMLHttpRequest.handleError の解決方法

Rails ＋ React で教材を参考にSPA化構成のアプリを開発中、以下のエラーに遭遇しました。

Uncaught runtime errors:
ERROR
Network Error
AxiosError: Network Error
    at XMLHttpRequest.handleError (http://localhost:3000/static/js/bundle.js:48052:14)
ERROR
Network Error
AxiosError: Network Error
    at XMLHttpRequest.handleError (http://localhost:3000/static/js/bundle.js:48052:14)

結論

以下のように環境変数でURLをIPアドレスで表示するとエラーがなくなりました。原因はよくわかっていませんが。

before

frontend/.env

REACT_APP_API_DOMEIN=http://localhost:3030

after

frontend/.env

REACT_APP_API_DOMEIN=http://10.0.2.2:3030

このように書き換えて、yarn startを一旦停止して再起動すると

きちんと表示されました🙌

参考

• react nativeでapiたたいたら[AxiosError: Network Error]が出てきたので修正する - Qiita