Laravel 5.4 laravel-elixir-webpack-react

Question

I installed successfully packages with npm install on a laravel 5.4 project. This is my package.json:

{ "private": true, "scripts": { "dev": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",

"watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",

"watch-poll": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",

"hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",

"production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"

},

"devDependencies": { "axios": "^0.15.3", "bootstrap-sass": "^3.3.7", "jquery": "^3.1.1", "laravel-elixir-webpack-react": "^1.0.1", "laravel-mix": "^0.8.1", "lodash": "^4.17.4", "react": "^15.4.2", "react-dom": "^15.4.2", "vue": "^2.1.10" } }

//this is my webpack.mix.js

mix.sass('resources/assets/sass/app.scss', 'public/css') .js('resources/assets/js/app.js', 'public/js/components');

And I have a simple react component for testing.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Example extends Component {
    render() {
        return (
            <h1>Works!</h1>
    );
    }
}

export default Example;

if (document.getElementById('example')) {
    ReactDOM.render(<Example />, document.getElementById('example'));
}

When I run the command npm run dev I get the following error on compiling react code:

Syntax Error: Unexpected token (7:12)

   5 |     render() {
   6 |         return (
>  7 |             <h1>Works!</h1>
     |             ^
   8 |     );
   9 |     }
  10 | }

Any idea how can I fix this ?

Afzal Hossain Afzal Hossain · Accepted Answer · 2017-07-18T08:07:55

Change

mix.sass('resources/assets/sass/app.scss', 'public/css') 
   .js('resources/assets/js/app.js', 'public/js/components');

to

mix.sass('resources/assets/sass/app.scss', 'public/css') 
   .react('resources/assets/js/app.js', 'public/js/components');

Laravel 5.4 laravel-elixir-webpack-react

1 Answers