【React】hydrate( <App />,document.getElementById("app"));が公開サイトではエラーになる

お世話になります。
現在react.jsの練習ページを作成しております。

**概要
**「index.hmtl」で読み込んでいる、「index.js」というファイルの中で
また別ファイル「App.jsx」のなかの「App component」をimportし、
hydrateでid、appのタグに記述をしようとしています。

・index.html
・index.js
があり、同階層に
・componentsフォルダ、その配下にApp.jsxファイルがあります。

このファイルでindex.htmlを確認したところ、
ローカル環境では正常に読み込み、動作しているのですが
Xサーバー（公開サーバー）にアップロードすると、
index.htmlを開いたときに下記のエラーが要素を検証画面のコンソールに表示され、reactのコンポーネント部分が表示されません。

エラー内容

js
1SyntaxError: expected expression, got '<'
2index.js:6:8

ーーーーーーーーー

具体的なコードの内容です。
HTMLファイルでindex.jsを読み込んでいます。

html
1
2<!DOCTYPE html>
3<html lang="ja">
4  <head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
7    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
8    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
9    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
10    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
11    <title>test app</title>
12  </head>
13  <body>
14    <!--以下、appのidにreactコンポーネントを読み込む-->
15    <div id="app" class="main-content"></div>
16    <!--以下scriptでindex.jsを読み込む-->
17    <script type="module" src="./index.js"></script>
18  </body>
19  </html>
20

続いてindex.jsです。
ブラウザのコンソールのエラーはこのファイルの6行目、<App />を指し示しています。

javascript
1import React from "react";
2import { hydrate } from "react-dom";
3import  App from "./components/App";
4
5hydrate(
6        <App />, **エラーで見る限り、この行が原因のようです。**
7        document.getElementById("app")
8        );
9

参考ですが、上のファイルでimportしているAppのcomponentがあるApp.jsxファイルです。
（index.js側でエラーが出ているようですので、詳細コードは省略します。）

javascript
1import React from "react";
2
3export default class App extends React.Component {
4  constructor(props) {
5    super(props);
6
7    this.state = {
8　　　　略
9    };
10  }
11

上記の状態で、ローカル環境ではindex.jsファイルでappコンポーネントを読み込み、
正常にreactの記述内容が動作するのですが
本番環境に公開すると、なぜか前述のエラーとなります。

[試したこと]
・index.jsのhydrateを、reactdom.renderに変更して試してみる
・index.jsの「import App from "./components/App";」を、Appを{}で囲んで見る（export defaultしているので関係ないとは思いますが念のため）

原因がわからず、書き方を変えて見る程度しか試せていませんが、
なぜ本番でのみうまくいかないのか、考えられる点があれば、教えていただけますでしょうか。
何卒よろしくお願いいたします。

hoshi-takanori

2020/02/17 20:59

<App /> という書き方は JSX なので、index.js を index.jsx にしてみては？あと、hydrate は SSR 用なので、ReactDOM.render() の方がいいと思います。

ink88882

2020/02/23 05:00

ありがとうございます。記載いただいた内容についても調べ、勉強になりました！

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

回答1件

ベストアンサー

なぜ本番でのみうまくいかないのか、考えられる点があれば、教えていただけますでしょうか。

直接の原因ではないかもしれないですが、babel-standaloneを使っているのが気になります（仕組み上、JavaScriptコードをAjaxで取得する必要があるので、サーバ環境の影響も受けます）。

試作程度に使うのならともかく、本番運用するにあたっては事前コンパイルに移行しておいたほうがいいかと思います。

It's true that using Babel through Webpack, Browserify or Gulp should be sufficient for most use cases. （Babel Standaloneの説明より）

投稿2020/02/18 06:46

maisumakun

総合スコア146018

ink88882

2020/02/23 05:04 編集

ありがとうございます。事前コンパイルはしていたので、head内のCDNの記述は不要でした。 ※うまくいかなかったので色々試していく中で、理解が浅いままCDNも追加で記述していたようです。そして、調べてみると parcelのその事前コンパイルの「package.json」へのスクリプト記述に、本番用の記載が抜けていたのが原因でした。 https://parceljs.org/cli.html の「公開する URL を設定する」を参考に、あらかじめ公開urlを指定した上でもう一度サイトを本番にあげ、解決しました。ありがとうございます！

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