【React】Uncaught ReferenceError: useState is not defined の対処法

CDN から React をインポートして useState を使っていたときに useState が未定義となってしまいハマった時の対処法のまとめです。

Uncaught ReferenceError: useState is not defined

デバッグ中に下記のようなエラーも出ました。

Uncaught ReferenceError: require is not defined

上のエラーに遭遇した方に向けて対処法としてまとめます。

CDNでReactをインポートしている場合

結論！

下記のように実装せよ。

const { useEffect, useState } = React

これで解決できました。

Uncaught ReferenceError: useState is not defined の対処

useState の使う準備として下記のようにインポートせよ！という記事を最初に見つけました。

import React, { useEffect, useState } from "react";

これは node.js などで React の環境構築をした場合の実装方法で、CDNを使っている場合はインポートの仕方が違うということに注意が必要です。

WordPress で useState を使う場合

次のように実装すればOKです。

const {useState} = wp.element

参考

だいぶ時間を費やしましたが解決できてよかったです〜

この記事を見た方の助けになれたら幸いです！！

海外のリソースにあたったところすぐに解決策が出てきて本当に英語が大事だと改めて実感です。笑

Attention Required! | Cloudflare

stackoverflow.com