Laravel mix and react js

this doesn't work stop giving out links to packages that dont work

Stay calm dude. Laravel 5.4 was released days ago. 3 options for you:

• stick with laravel 5.3 and elixir/webpack combination
• write your own webpack.config
• wait a few days until the package bug is fixed

I'm just saying I usually check if package works before I give a link out... I guess thats just me then...

Ran in that same issue. But using react components with laravel-mix is easy.

Jas update the jsx rule:

{
    test: /\.jsx?$/,
    exclude: /(node_modules|bower_components)/,
    loader: 'babel-loader' + Mix.babelConfig(),
    query: {
        presets: [
            'es2015',
            'react',
        ]
    }
},

and make sure these packages are installed:

"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0",

Hey guys,

So apparently all you need to do is create a .babelrc file in the root of your project with the required presets.

{
    "presets": [
        ["es2015", {"modules": false}],
        "react"
    ]
}

Then install the babel-react preset and react itself via npm:

npm install babel-preset-react --save-dev
npm install react react-dom --save-dev

After that add your .jsx file to the webpack.mix.js file

mix.js('resources/assets/js/react.jsx', 'public/js');

and run the command to build. (npm run dev)

You don't need to do any of that work. Just do:

mix.react('src', 'output');

And we'll install all the necessary Babel plugins and setup your .babelrc.

You guys really shouldn't update the Mix code because you are creating your own technical debt. Now...a year from now...running a simple update, or maybe someone else has to realize that you changed the default config rule. If you would read the code a little more or check the docs, All you have to do to modify anything in Mix is either a .babelrc in the project root or in your webpack.mix.js you can add just about anything. It's all in the docs on github.

Thanks guys. I had a difficult time finding this information by just viewing the documentation on laravel.com. I now realize I should have just viewed the Laravel Mix package readme myself.

For anyone else who wants to learn more about Laravel Mix here is a link to the Github repo. (Check the initial documentation section)

Laravel Mix

@VernonGrant Yeah the GitHub repo will have the latest docs, but I have a todo item to update the Laravel.com docs with some of the new stuff in the last few weeks.

@JeffreyWay No problem Jeffrey, Thanks for all the help.

@JeffreyWay I created a completely new project using

composer create-project --prefer-dist laravel/laravel blog
npm install

Then changed webpack.mix.js as you told

mix.react('react/index.js', 'public/js');

Run

npm run dev

and got an error

TypeError: mix.react is not a function

Am I missing something or are there any other requirement that are not in this discussion?

My package.json is

...
  "devDependencies": {
    "axios": "^0.15.3",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "babel-preset-stage-1": "^6.22.0",
...

and in webpack.mix.js I using:

...
mix.js( 'resources/assets/jsx/yourcomponent.jsx', 'public/js' );
...

for me works fine!

Update Laravel Mix.

@JeffreyWay You are right. Laravel Mix version was the issue. Now everything looks fine. Except it can't handle such string as:

const mapStateToProps = (state) => ({...state.login});

which is normal for react. But that's another story. Thanks a lot.

I have done what was suggested by @JeffreyWay and for me it blows up on this like when it tries to parse my react files.

return {...state, all: action.payload.data};

I suspect that it does like ...state? But how do I get laravel-mix to handle this?

Check your Babel processing. The spread operator requirements are probably missing or incomplete.

@JeffreyWay I am using Spread and some other funky stuff, Using JS with a .babelrc file works. But using mix.react without .babelrc does not work.

I know I'm off in the weeds here, but is it possible to pass the presets or should I stick to mix.js and keep the .babelrc file around?

Thanks!

Hi, All

mix.react('src', 'output');

Didn't work for me.

I got following error

ERROR in ./resources/assets/js/components/Example.js
Module build failed: SyntaxError: Unexpected token (5:10)

  3 |
  4 | export default class Example extends Component {
> 5 |     state = {
    |           ^
  6 |         storeurl: false,
  7 |     };
  8 |

How to fix this?

Thank you

@alexluk - Try something like this instead:

export default class Example extends Component {
    constructor(props) {
        super(props);
        this.state = { storeurl: false };
    }
}

Also, for future reference, you should start a new thread for your questions, especially since what you have isn't really related to this. All you have is a syntax error, which is also clearly stated in the error.

If using React 16 then the shortened version of declaring state will work just fine. So, you didn't declare anything wrong in the state object. It is no longer required to write a constructor just for state. Make sure you have imported import { React, Component } from 'react' at the top of the component file.

Rookie question here but in Jeffrey's answer he said: mix.react('src', 'output'); And we'll install all the necessary Babel plugins and setup your .babelrc.

In my laravel project I've switched to react instead of vue. I then create a component. Standard component works fine. When I run npm run dev with a component contain es2016 I get an error:

ERROR in ./resources/assets/js/components/App.js Module build failed: SyntaxError: Unexpected token (43:17)

41 | } 42 |

43 | toggleSelected = (id, key) => { | ^ 44 | let temp = [...this.state[key]] 45 | temp[id].selected = !temp[id].selected 46 | this.setState({

This is the error that has been reported here before.

My webpack.mix.js is this:

let mix = require('laravel-mix');

mix.react('resources/assets/js/basicapp.js', 'public/js');

I don't have a .babelrc file in my project.