react-laravel Unexpected token

Question

I am trying to get react-laravel working. I have installed everything correctly (v8js etc) but I keep getting:

V8Js::executeString():18903: SyntaxError: Unexpected token <

The problem seems to be with my component.js file:

var Application = React.createClass({
    render: function() {
        return (
            <div className="Networks">
                <ul>
                    <li>Test</li>
                </ul>
            </div>
        );
    }
});

How can I fix this?

Also, is it possible to use ES6?

My view:

<html>

<head>
    <title>JSPM Experiment</title>
    <script src="{{ asset('vendor/react-laravel/react.js') }}"></script>
    <script src="{{ asset('js/components.js') }}"></script>
    <script src="{{ asset('vendor/react-laravel/react_ujs.js') }}"></script>
</head>

<body>

<div id='react-root'>
</div>
@react_component('Application',[ 'title' => 'Hello, World' ], [ 'prerender' => true ])
</body>

</html>

You haven't mentioned anything about your build pipeline - how are you transpiling it to ES5? I assume babel with the react preset and es2015 presets? — Dominic, May 17 '16 at 12:18
The provided code seems perfectly fine. The problem must lie elsewhere. *PS: Go for the eyes Boo!* — Chris, May 17 '16 at 12:20
@DominicTobias These is no build process, it just loads stuff on the fly — imperium2335, May 17 '16 at 12:21
Don't you need to put your HTML in quotes in your return? `return('
')` — codedge, May 17 '16 at 12:42

score 0 · Answer 1 · answered Jan 24 '18 at 17:27

0

Is it "component.js" or "components.js"? You likely have a typo.

Usually you get SyntaxError: Unexpected token < when trying to load a javascript file that doesn't exist. Laravel renders a 404 HTML page and the first < trips up your script tag.

answered Jan 24 '18 at 17:27

Brad

1,880
1
12
18

score 0 · Answer 2 · answered Dec 30 '19 at 09:48

In case someone has still this error, I installed Laravel 6 and set up React:

php artisan preset react
npm install

And then I got a similar error "Syntax Error: Unexpected token" as the React JSX syntax didn't seem to be understood. It got fixed by altering babel config in webpack.mix.js:

mix.babelConfig({
  "presets": [
    "@babel/preset-react",
  ],
});

score 0 · Answer 3 · answered Jan 09 '20 at 13:29

0

If you have problem with Laravel 6. Please check your webpack.mix.js file, it should be mix.react() instead of mix.js()

https://laravel.com/docs/6.x/mix#react

answered Jan 09 '20 at 13:29

Tan Nguyen

1,636
1
12
9

react-laravel Unexpected token

3 Answers3