React not transpiling under larave-mix

Mix is definitely set up with the babel-loader for jsx files. You can check that in the webpack.config.js. I make my own webpack.config.js file and don't use Mix for react projects. Make sure you have a .babelrc with presets of 'es2015', 'react'. You may be missing the react preset.

Also, make sure you are using Mix 8.*

I have tried adding .babelrc and updating to the latest version, but it didnt do anything. Maybe I am doing something wrong, but I find it confusing.

Could you share your webpack.config.js on setting up react?

Its long...sorry:

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: [
        'script-loader!jquery/dist/jquery.min.js',
        'script-loader!foundation-sites/dist/js/foundation.min.js',
        './app/app.jsx'
    ],
    externals: {
        jquery: 'jQuery'
    },
    plugins: [
        new webpack.ProvidePlugin({
            '$': 'jquery',
            'jQuery': 'jquery'
        }),
        new webpack.LoaderOptionsPlugin({
            test: /\.s[ac]ss$/,
            options: {
                includePaths: [
                    path.resolve(__dirname, './node_modules/foundation-sites/scss/')
                ]
            }
        })
    ],
    output: {
        path: __dirname,
        filename: './public/bundle.js'
    },
    resolve: {
        modules: [
            path.resolve(__dirname, 'app/components'),
            path.resolve(__dirname, 'app/api'),
            path.resolve(__dirname, 'node_modules')
        ],
        alias: {
            applicationStyles: path.resolve(__dirname, 'app/css/app.scss'),
            actions: path.resolve(__dirname, 'app/actions/actions.jsx'),
            reducers: path.resolve(__dirname, 'app/reducers/reducers.jsx'),
            configureStore: path.resolve(__dirname, 'app/store/configureStore.jsx')
        },
        extensions: ['.js', '.jsx', '.json', '.scss']
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                options: {
                    presets: ['react', 'es2015', 'stage-0']
                }
            }
        ]
    },
    devtool: 'cheap-eval-source-map'
};

Here is a smaller version:

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const VENDOR_LIBS = [
    'faker', 'lodash', 'redux', 'react', 'react-redux', 'react-dom', 'react-input-range', 'redux-form', 'redux-thunk'
];

module.exports = {
  entry: {
      bundle: './src/index.js',
      vendor: VENDOR_LIBS
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
},
module: {
    rules: [
        {
            use: 'babel-loader',
            test: /\.js$/,
            exclude: /node_modules/
        },
        {
            use: ['style-loader', 'css-loader'],
            test: /\.css$/
        }
    ]
},
plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: ['vendor', 'manifest']
    }),
    new HtmlWebpackPlugin({
        template: './src/index.html'
    }),
    new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
]
};

@ruru If this worked for you, please mark it correct so others can use it.

Worked as intended, thanks for the assistance @ejdelmonico, appreciated! :) Much better to write your own one, then rely on libraries to handle everything for you.