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

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

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

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

React.js

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

Q&A

解決済

1回答

2469閲覧

Laravel+Reactの開発 app.jsが反映されない

退会済みユーザー

退会済みユーザー

総合スコア0

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

React.js

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

0グッド

0クリップ

投稿2020/07/03 07:53

###問題点
npm run watchを実行しても、ページが更新されず、困っています。

LaravelとReactを使ったアプリケーションの作成を試みているのですが、
npm run watchを実行しても、ページが更新されず、
ChromeのConsoleで以下のようなエラーが発生してしまいます。

エラー内容はgetElementById()で指定したidが見つからなかったため、
value属性が読み込めない、という内容になります。

Reactのコードでコメントアウトしてから、
npm run watchを実行しても同じエラーが発生してしまいます。

Chromeでapp.js:65907のリンクをクリックしてみると、
実際のファイルとは内容が異なっていました。

Chromeの再起動、Homesteadの再起動を試みても変わらず。

先日まではnpm run watchで反映されていましたが、なぜ今回反映されなくなってしまったのか、原因分かりますでしょうか?

###環境
OS: Ubuntu 18.04 (Homestead)
Laravel 7.15.0
React 16.13.1

###エラーメッセージ
![イメージ説明

###app.js (Chromeでみたとき)
イメージ説明

###app.js(実際のファイル)
イメージ説明

###現在のReactのコード

javascript

1class Candidates extends React.Component { 2 render() { 3 // let candidates = document.getElementById('candidates'); 4 return ( 5 <div> 6 <p>Candidates</p> 7 {/* <input type="text" value={candidates} readOnly /> */} 8 </div> 9 ); 10 }

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

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

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

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

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

guest

回答1

0

ベストアンサー

Macの再起動後、もう一度Reactのコードを見直していたところ、
Candidatesコンポーネントを呼び出すところで、綴りを間違えていました。

そちらを修正すると、問題なく更新されました。


後日、同様にReactのコードを更新しても、ブラウザが更新されなくなりました。
どうやらキャッシュの影響のようです。
Chromeのデベロッパーツールでapp.jsをClear browser cacheすると、無事に更新されました。

投稿2020/07/03 08:40

編集2020/07/05 05:53
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問