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

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

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

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

React.js

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

Q&A

解決済

1回答

1686閲覧

[Laravel+React] Reactが端末によってうまく読み込めない

DaisukeMori

総合スコア226

Laravel

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

React.js

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

0グッド

0クリップ

投稿2020/07/14 07:59

編集2020/07/15 05:22

問題

Laravel+Reactで環境を作っていたところ
ある端末(OS)では動いているのに、別端末で全く同じコードでテストしたところReactのデータが表示されない問題が発生しました。

環境

  • Laravel5.8

  • React

  • OS・仮想環境

□うまくいく環境

iMac
High Sierra 10.13.6

Vagrant
2.2.9

VirtualBox
バージョン 6.0.14

□うまくいかない環境

Mac book Air
Catalina 10.15.2

Vagrant
バージョン 2.2.9

VirtualBox
バージョン 6.1.0

cosole

1DevTools failed to load SourceMap: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.postload.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

↑はAdblockを切ったらなくなりました。

それでもReactは表示されず、コンソールにエラーも出てきません。
完全に手詰まりです。端末的にできないなのでしょうか?

やったこと(参考記事)

Laravel5.7でReactを利用した開発をしてみる

抜粋

bash

1php artisan preset react 2npm install && npm run dev 3php artisan make:migration create_todos_table

php

1// database/migrations/xxxxx_create_todos_table.php 2<?php 3 4use Illuminate\Support\Facades\Schema; 5use Illuminate\Database\Schema\Blueprint; 6use Illuminate\Database\Migrations\Migration; 7 8class CreateTodosTable extends Migration 9{ 10 public function up() 11 { 12 Schema::create('todos', function (Blueprint $table) { 13 $table->increments('id'); 14 $table->string('title'); 15 $table->timestamps(); 16 }); 17 } 18 19 public function down() 20 { 21 Schema::dropIfExists('todos'); 22 } 23}

bash

1php artisan migrate 2php artisan make:model Todo 3php artisan tinker 4# ダミー情報をDBに挿入

php

1// routes/web.php 2Route::get('/{any}', function(){ 3 return view('welcome'); 4})->where('any','.*');

js

1// resouces/js/app.js 2require('./components/TodoApp');

jsx

1// resources/js/components/TodoApp.js 2import React, { Component } from 'react'; 3import ReactDOM from 'react-dom'; 4 5export default class TodoApp extends Component { 6 render() { 7 return ( 8 <div>TodoApp</div> 9 ); 10 } 11} 12 13ReactDOM.render(<TodoApp />, document.getElementById('todoApp'));

php

1// resouces/views/welcome.blade.php 2<!doctype html> 3<html lang="ja"> 4<head> 5 <!-- Required meta tags --> 6 <meta charset="utf-8"> 7 <meta name="csrf-token" content="{{ csrf_token() }}"> 8 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 9 <!-- CSS --> 10 <link rel="stylesheet" href="{{ asset('css/app.css') }}"> 11 12 <title>react test</title> 13</head> 14 15<body> 16 <div id="app"> 17 <div class="container"> 18 <!-- こっちはLaravelのデータなので反映される --> 19 <h3 class="mt-5">Todo 管理システム</h3> 20 21 <!-- Reactデータが反映されない --> 22 <div id="todoApp"></div> 23 24 </div> 25 </div> 26 27<!-- avaScript --> 28<script src="{{ asset('js/app.js')}}"></script> 29</body> 30</html>

本来ならここでReactのデータが表示されるはずですが、
Laravelデータしか反映されません。
同じ手順でおこなっているのに、端末によってできないことってあるのでしょうか?

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

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

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

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

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

guest

回答1

0

自己解決

chromeのキャッシュが原因で表示されないようでした。

投稿2020/07/15 05:36

DaisukeMori

総合スコア226

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問