解決済
サブスク有料会員Django/Next.js講座における発生しているエラーにつきまして
Next.js
Django
2023/05/23 10:31

実現したいこと

アカウント登録を行い、Djangoに連携して、管理画面から確認したい。

発生している問題

アカウント登録画面で新規登録ボタンを押下すると、以下のエラーメッセージが出ます。

Unhandled Runtime Error

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Register`.

ソースコード

はるさんのコードと同じ。

自分で試したこと

・名前つきimport / export と default import / export をごっちゃにしていないか確認

補足情報

・register.jsで定義したRegister関数は、どこでDjangoと連携できているのか教えていただきたいです。

回答 4件
login
回答するにはログインが必要です

私も同じ現象が起きました。

このように、Ovalを直接インポートすると、エラーが解決しましたのでご参考ください。

import Loader from 'react-loader-spinner';

...

<Loader type="Oval" color="#f59e00" width={50} height={50} />

import { Oval } from 'react-loader-spinner';

...

<Oval color="#f59e00" width={50} height={50} />

リポジトリのReadme にも同様の形式でサンプルコードが記載されています。

3

@tomo

お返事が遅くなりました。
解決されてよかったです!

自分で試したこと にも記載されているように、私も import が怪しいと推測しました。

import Loader from 'react-loader-spinner'; をF12押して react-loader-spinner のコードに移動すると、default exportされていないことがわかりました。

そして、npmのページGitHub で、react-loader-spinner の最新バージョンの使い方を確認して解決しました。

1

ありがとうございます!
私も無事に解決しました!!
もしよろしければ、どうやって解決に至ったかも教えていただけないでしょうか?
(私は色々なパターンでググってみましたが解決できなかったので、、、)

アカウント登録画面で送信ボタンを押すと、actionsのregister関数を通って、下記のファイルでDjangoのAPIをコールしています。

pages/api/account/register.js

各場所にconsole.logを書いて、どこまで実行されているのか確認してみてください。

https://zenn.dev/hathle/books/next-drf-membership-book/viewer/15_register