Прежде чем кто-нибудь направит меня к другим ответам - я искал и пробовал их все. По сути, я настраиваю свой первый проект React с помощью Laravel и пытаюсь заставить его вставить содержимое файла Example.js в файл welcome.blade.php, но каждый раз, когда я загружаю страницу, я получаю следующую ошибку в консоли и пустую страницу :
Uncaught TypeError: Cannot read property 'func' of undefined
at Object.exports.__esModule (app.js:667)
at __webpack_require__ (app.js:20)
at Object.exports.__esModule (app.js:1598)
at __webpack_require__ (app.js:20)
at Object.exports.__esModule (app.js:15798)
at __webpack_require__ (app.js:20)
at Object.<anonymous> (app.js:17269)
at __webpack_require__ (app.js:20)
at Object.defineProperty.value (app.js:17255)
at __webpack_require__ (app.js:20)
Я исследовал и обнаружил, что большинство людей говорят, что это была проблема реактивного маршрутизатора, которая была решена в версии 3.2.0, но это не тот случай, так как я использую эту версию. Мой файл yarn.lock:
react-router@^3.2.0:
version "3.2.1"
resolved "https://registry.yarnpkg.com/react-router/-/react-router-3.2.1.tgz#b9a3279962bdfbe684c8bd0482b81ef288f0f244"
dependencies:
create-react-class "^15.5.1"
history "^3.0.0"
hoist-non-react-statics "^2.3.1"
invariant "^2.2.1"
loose-envify "^1.2.0"
prop-types "^15.5.6"
warning "^3.0.0"
По сути, все, что я сделал, это заменил файл Example.vue файлом Example.js и добавил немного простого содержимого, затем в файле app.js был указан маршрут с использованием этого компонента. Мой блейд-файл содержит «пример» div.
Я использую Laravel 5.6, React 16 и реагирует маршрутизатор 3.2.0
Если кто-то может указать мне правильное направление здесь, я был бы благодарен, так как я даже не могу продвинуться в своем проекте, и у меня даже нет пока видимой страницы-примера!
РЕДАКТИРОВАТЬ: образцы кода
app.js:
require('./bootstrap');
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';
import Example from './components/Example';
render(
<Router history={browserHistory}>
<Route path="/" component={Example} >
</Route>
</Router>,
document.getElementById('example'));
example.js:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Example extends Component {
render() {
return (
<div>
<h1>Cool, it's working</h1>
</div>
);
}
}
export default Example;
if (document.getElementById('example')) {
ReactDOM.render(<Example />, document.getElementById('example'));
}
welcome.blade.php:
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
</head>
<body>
<div id="example"></div>
<script src="{{asset('js/app.js')}}" ></script>
</body>
</html>