Uncaught TypeError: Cannot read property 'func' of undefined using React and Laravel

Question

Before anyone refers me to other answers - I've searched and tried them all. Basically I am setting up my first React project with Laravel and trying to get it to inject the Example.js file content into the welcome.blade.php file, but every time I load the page I get the following error in the console and a blank page:

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)

I researched and found most people saying that it was a react-router issue which was resolved in version 3.2.0 but this is not the case here as I am using that version. My yarn.lock file:

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"

Basically, all I've done is replace the Example.vue file with an Example.js file and added some simple content, then in the app.js file have stipulated the route using this component. My blade file then houses the 'example' div.

I'm using Laravel 5.6, React 16 and react router 3.2.0

If anyone can point me in the right direction here I would be grateful as I can't even progress with my project and I haven't even got a viewable example page yet!

EDIT: code samples

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>

Does that help? Or is there any other files you would need to see? — Michael Emerson
No, I did see that mentioned on another suggested solution, but I am not using it. It is a very basic one page example project with no props or anything — Michael Emerson

Sakhi Mansoor Sakhi Mansoor · Accepted Answer · 2018-08-29T21:00:33

instead using react-router please install react-router-dom.

Please let me know if it doesn't help.

Uncaught TypeError: Cannot read property 'func' of undefined using React and Laravel

1 Answers