Laravel-mix: ES6 react error compile with Laravel Mix : Unexpected token

[martinboue]

I have some trouble to build my Laravel and React app using Laravel Mix. Here is the error :

Error

ERROR in ./resources/assets/js/components/Master.js
Module build failed: SyntaxError: C:/wamp64/www/test/resources/assets/js/components/Master.js: Unexpected token (8:8)
class Master extends Component {
7 |

8 | test = () => {
| ^
9 | console.log('it works !')
10 | }

Step for reproduce

I just recreated a new project from scratch, i did in CMD :

1. laravel new test
2. php artisan preset react
3. composer install
4. npm install
5. Add some react packages like react-route ...

According to Laravel Mix docs, with this webpack.config.file file :

let mix = require('laravel-mix'); mix.react('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.scss', 'public/css');

Laravel mix should be able to translate ES6 syntax into ES5 but it's not working properly.

Any idea ?

Thank you

[martinboue]

Here is my package.json:

{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.18",
"babel-preset-react": "^6.24.1",
"bootstrap": "^4.0.0",
"cross-env": "^5.2.0",
"jquery": "^3.2",
"laravel-mix": "^2.1.11",
"lodash": "^4.17.4",
"popper.js": "^1.12",
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"dependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"flux": "^3.1.3",
"moment": "^2.22.2",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0",
"webpack-dev-server": "^3.1.4"
}
}

[PuriaGithub]

same problem

[stricker26]

I have the same problem here :(

[stricker26]

I got already a solution to this

class Foo extends Component {
constructor(props) {
super(props);

this.state = {
  count: 1,
};

}

render() {...}
}

[levansonqs]

It missing babel config react.
add this line in package.json
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
},
then make file .babelrc in root project
the .babelrc have content is:
{
"presets": ["es2015","stage-0","react"]
}
run: npm install
finaly: npm run dev

[mohamadalmoayad]

@levansonqs
perfect

[Prospus-ShantiGola]

Thanks @levansonqs it works for me.

Defining the right package and Need to create .babelrc in the root of the project directory and it works!!