コンポーネントが読み込めない

Question

前提・実現したいこと

ReactでグローバルStateの学習をしているのですが、読み込めないコンポーネントがあり、どこがいけないのかわからないです。

発生している問題・エラーメッセージ

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 `AdminFlagProvider`.

**AdminFlagProvider.jsx**


import { createContext } from "react";

export const AdminFlagContext = createContext({});

export const AdminFlagProvider = props => {
  const { children } = props;

  const sampleObj = { sampleValue : "テスト"};

  return(
    <AdminFlagContext.provider>
      {children}
    </AdminFlagContext.provider>
  );
};

------------------------------------------------------------------------------------
**index.js**

import reactDOM from "react-dom";

import { App } from "./App";
import { AdminFlagProvider } from "./components/providers/AdminFlagProvider";


reactDOM.render(
  <AdminFlagProvider>
    <App />
  </AdminFlagProvider>,
  document.getElementById("root"));

試したこと

どこを見直してもあってると思うのですが、この二つ以外に原因があるのでしょうか？

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

じゃけぇさんのReact実践の教科書186ページに関してです。

Comments

[hoshi-takanori]

(回答欄に書きました。)

Answer 1

AdminFlagContext.provider の provider の先頭は小文字じゃなくて大文字の P ですね。
あと、たぶん value={sampleObj} が必要では。

   return(
-    <AdminFlagContext.provider>
+    <AdminFlagContext.Provider value={sampleObj}>
       {children}
-    </AdminFlagContext.provider>
+    </AdminFlagContext.Provider>
   );

Answer 2

どういうわけか、export constと書くと、正しくエクスポートされないことがあります。

const AdminFlagProvider = （後略）とexport { AdminFlagProvider }を分けて書いてみたらどうなりますでしょうか？

Comments

[barakichi]

アドバイスありがとうございます。
ただエラーメッセージは変わらずのままです。
どうすれば良いんでしょうか、、、

[maisumakun]

ファイルパスは合っていますか？

[barakichi]

ファイルパスも間違いないです。

[maisumakun]

JSXなどを使うための環境設定はどのように行いましたか？

[barakichi]

まだ初心者でコンパイルがよく分からず調べてみたんですが、
npm run buildauto
というようなコマンドはまだしたことがなく、やらずにきてしまったのですが、これをする必要があるということなのでしょうか？
見当違いな回答だったらすいません！

[maisumakun]

何かしらのツールがなければ、JSXすらブラウザには処理できません。

> これをする必要があるということなのでしょうか？

コマンドを直接打つかどうかはともかく、何もなければJSXで書いたReactは動きません。

[barakichi]

setStateなど他のことは問題なく作動していました！

コンパイルに関してはどこをお伝えすればわかりやすいでしょうか？

[maisumakun]

何のツールを使っている感じでしょうか？

（「それすらわからない」という状況がわからないのですが…Webサイト上で実行するようなサービスを使っていたりしますか？）

[barakichi]

VScodeを使っています。

[maisumakun]

VSCodeに何かプラグインを入れた感じですか？

[barakichi]

特に入れていないです。

[maisumakun]

プロジェクト作成はどのような方法で行いましたか？

[barakichi]

MACのターミナルから
npx create-react-appでプロジェクトを作りまして、
npm start で立ち上げて描き始めたという感じです。

Answer 3

google翻訳

Error: 要素タイプが無効です：文字列（組み込みコンポーネントの場合）またはクラス/関数（複合コンポーネントの場合）が必要ですが、取得されました：未定義。コンポーネントが定義されているファイルからコンポーネントをエクスポートするのを忘れたか、デフォルトのインポートと名前付きのインポートを混同している可能性があります

とりあえず、エラーが出てるところの変数のナカミを片っ端からチェックしてみては

Comments

[barakichi]

エラー該当の変数周りにおかしいところがない場合はモジュールなどに異常があるということも考えられるのでしょうか？

[y_waiwai]

変数がundefined.とおっしゃってますけど、それを持っておかしいところがないとされるなら、なにもいうことはありません。

がんばってください。

[barakichi]

僕にはおかしいところが気づけないのですが、詳しく教えて頂けないですか？