React CDN で import が出来ない理由について

前提

React を CDN で利用して、htmlペラ１を作成しようとしました。
コンポーネント毎にjsを作成して、htmlにまとめようとおもったところエラーが出てしまいました。

実現したいこと

index.html

<html>

    <head>
        <meta charset="utf-8">
        <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
        <script type="module" src="./hoge.js"></script>
        <title>
            this is react test.
        </title>
    </head>

    <body>
<div id="root"></div>
<div id="root2"></div>
<script type="text/babel">
    import Child2 from "./hoge.js";
        let dom = document.querySelector("#root");
        let dom2 = document.querySelector("#root2");
const Child = (props) => {

  return (
    <div>
<h2>{props.text}</h2>
    </div>
  )
}
        const App = () => {
            return(
                <div>
                    <p> CDN only だけでReactが動く！ </p>
                    <p><Child text="aiueo" /></p>
                </div>

            );
        };
        ReactDOM.render(<App />, dom);
        ReactDOM.render(<Child2  text="kakikukeko" />, dom2);

</script>
    </body>

</html>

hoge.js

const Child2 = (props) => {

  return (
    <div>
<h2>{props.text}</h2>
    </div>
  )
}

export default Child2

html内にコンポーネントを書くと、長くなりそうなので（Childコンポーネント）
外だしして（hoge.js）それをhtmlにインポートして（Child2コンポーネント）利用したいです。

html内にコンポーネントを書くとうまくいく（Childコンポーネント）のですが、
外部から読み込もうとする（Child2コンポーネント）と失敗するので、それを解決したいです。

方法をご存知の方いらっしゃいましたらご教示いただけませんでしょうか？

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

hoge.js:4 Uncaught SyntaxError: Unexpected token '<' (at hoge.js:4:5)

Inline Babel script:2 Uncaught ReferenceError: require is not defined
    at <anonymous>:3:13

試したこと

https://qiita.com/Atommy1999/items/680f0564538379ce7e26
こちらにそれっぽいことが書いてあったので、試したのですが、結果は同じでした。

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

React18

行動規範の内容に同意します

回答1件

ベストアンサー

type="text/babel"で処理するJavaScriptをモジュールとして扱いたい場合、data-type="module"の記載が必要となります（ただし、呼び出されるJavaScriptもBabel処理されるかは確認していません）。

なお、@babel/standaloneを実運用に使うのは、公式に非推奨です。事前コンパイルを行うか、JSX記法に頼らないことで実行時のBabelを不要とすることをおすすめします。

投稿2022/12/14 14:21

maisumakun

総合スコア145183

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！