【问题标题】:Uncaught TypeError: Cannot read property 'func' of undefined using React and Laravel未捕获的类型错误:无法使用 React 和 Laravel 读取未定义的属性 'func'
【发布时间】:2018-08-30 05:00:33
【问题描述】:

在任何人向我推荐其他答案之前 - 我已经搜索并尝试了所有答案。基本上,我正在使用 Laravel 设置我的第一个 React 项目,并试图让它将 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)

我研究并发现大多数人说这是一个 react-router 问题,已在 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 和 React 路由器 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>

【问题讨论】:

  • 请在这里分享一些代码
  • 这有帮助吗?或者您还需要查看其他文件吗?
  • 你在某处使用 prop-types 吗?
  • 不,我确实在另一个建议的解决方案中看到了这一点,但我没有使用它。这是一个非常基本的单页示例项目,没有任何道具或任何东西

标签: reactjs laravel react-router


【解决方案1】:

请改为使用react-router 安装react-router-dom

如果没有帮助请告诉我。

【讨论】:

    猜你喜欢
    • 2018-04-21
    • 2017-07-06
    • 1970-01-01
    • 1970-01-01
    • 2015-11-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多