CDN-Reactで別ファイルのコンポーネントを取得したい

Question

実現したいこと

CDN-Reactで別ファイルのコンポーネントを取得したいです。

前提

HTMLにReactを埋め込む形式のサイトを作成しています。
通常のReactのように、別ファイルのコンポーネントを取得したいです。

footer.jsでmenuContents.js内のデータを呼び出したいです。可能でしょうか？

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

caught SyntaxError: Unexpected token '<' (at menuContents.js:3:3)

oter.js:1 Uncaught ReferenceError: require is not defined
    at <anonymous>:3:21
    at Ove (transformScriptTags.ts:99:10)
    at n (transformScriptTags.ts:173:9)
    at s (transformScriptTags.ts:204:11)
    at Lve.t.forEach.e.src.o.onreadystatechange (transformScriptTags.ts:121:9)

該当のソースコード

<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="text/babel" src="./js/menu.js"></script>
<script type="module" src="./js/menuContents.js"></script>

import MenuContents from "./menuContents";

const dom = document.querySelector("#footerContents");

const Footer = () => {
	return (
		<div><MenuContents /></div>
	);
};

ReactDOM.render(<Footer />, dom);

const MenuContents = () => {
	return (
		<div>
			<li>
				<a href="#">ホーム</a>
			</li>
			<li>
				<a href="#">当院について</a>
			</li>
			<li>
				<a href="#">料金表</a>
			</li>
			<li>
				<a href="#">アクセス</a>
			</li>
			<li>
				<a href="#">訪問医療鍼灸マッサージ</a>
			</li>
			<li>
				<a href="#">鍼灸適応症</a>
			</li>
		</div>
	);
};

export default MenuContents;

試したこと

ネットで type="module" に変更すると読み込めると見たため変更してみましたができませんでした。

Answer 1

ネットで type="module" に変更すると読み込めると見たため変更してみましたができませんでした。

ブラウザ上でES ModuleとなるファイルをBabelに通す場合、<script type="text/babel" data-type="module">のように書く必要があります（公式）。

Comments

[maisumakun]

なお、@babel/standaloneのサイトでも触れられていますが、とりあえず動かす分にはともかく、実用目的としてはコンパイル環境を整えたほうがいいです。

[teto_plw]

ありがとうございます。ご指定の通り変更しましたが、下記エラーを吐きました。
```
oter.js:4 Uncaught ReferenceError: require is not defined
at <anonymous>:3:21
at Ove (transformScriptTags.ts:99:10)
at n (transformScriptTags.ts:173:9)
at s (transformScriptTags.ts:204:11)
at Lve.t.forEach.e.src.o.onreadystatechange (transformScriptTags.ts:121:9)
（
```

またおっしゃる通り、ビルドツールは使ったほうが良いとは思っております。

静的なWebサイトの制作をしており、レンタルサーバーへのデプロイが必要なのですが、例えばViteなどを用いて、適した形にビルドすることが可能でしょうか？

[maisumakun]

importを書く方もmoduleとして処理する必要があるかもしれません。

[teto_plw]

<script type="text/babel" data-type="module" src="./js/menu.js"></script>
<script type="text/babel" data-type="module" src="./js/menuContents.js"></script>

に変更しましたが同様のエラーが出ますね...

[teto_plw]

申し訳ございません。記入先が間違っておりました。下記のようにすると異なるエラーになりました。

<script type="text/babel" data-type="module" src="./js/footer.js"></script>
<script type="text/babel" data-type="module" src="./js/menuContents.js"></script>

```エラー
caught SyntaxError: Unexpected token '<' (at menuContents.js:3:3)
```