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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

1回答

229閲覧

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

teto_plw

総合スコア57

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2023/04/28 05:09

編集2023/04/28 17:10

実現したいこと

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)

該当のソースコード

HTML

1<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> 2<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> 3<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> 4 5<script type="text/babel" src="./js/menu.js"></script> 6<script type="module" src="./js/menuContents.js"></script>

footer.js

1 2import MenuContents from "./menuContents"; 3 4const dom = document.querySelector("#footerContents"); 5 6const Footer = () => { 7 return ( 8 <div><MenuContents /></div> 9 ); 10}; 11 12ReactDOM.render(<Footer />, dom);

menuContents.js

1const MenuContents = () => { 2 return ( 3 <div> 4 <li> 5 <a href="#">ホーム</a> 6 </li> 7 <li> 8 <a href="#">当院について</a> 9 </li> 10 <li> 11 <a href="#">料金表</a> 12 </li> 13 <li> 14 <a href="#">アクセス</a> 15 </li> 16 <li> 17 <a href="#">訪問医療鍼灸マッサージ</a> 18 </li> 19 <li> 20 <a href="#">鍼灸適応症</a> 21 </li> 22 </div> 23 ); 24}; 25 26export default MenuContents; 27

試したこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

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

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

投稿2023/04/28 07:03

maisumakun

総合スコア145123

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2023/04/28 07:05

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

2023/04/28 07:45

ありがとうございます。ご指定の通り変更しましたが、下記エラーを吐きました。 ``` 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

2023/04/28 07:48

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

2023/04/28 08:01

<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

2023/04/28 08:10

申し訳ございません。記入先が間違っておりました。下記のようにすると異なるエラーになりました。 <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) ```
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問