問題
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は表示されず、コンソールにエラーも出てきません。
完全に手詰まりです。端末的にできないなのでしょうか?
やったこと(参考記事)
抜粋
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データしか反映されません。
同じ手順でおこなっているのに、端末によってできないことってあるのでしょうか?
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。