HMR and React with Mix

• Laravel Mix Version: 1.4.5 (npm list --depth=0)
• Node Version (node -v): 7.3.0
• NPM Version (npm -v): 3.10.10
• OS: Windows 10

Description:

Hi, I’m trying to run Hot reloading for my react assets for a long time but without any success. I was trying many configurations from GH and nothing works. Could you help / share your config and tell what exactly should I do for enable it.

My webpack.mix.js:

mix.webpackConfig({
    devtool: "source-map", devServer: {
        contentBase: path.resolve(__dirname, 'public'),
    },
    module: {
        loaders: [{
            test: /\.js$/,
            loaders: ['react-hot-loader/webpack', 'babel'],
        }]
    },
    entry: {
        'app': [
            'babel-polyfill',
            'react-hot-loader/patch',
            './resources/assets/js/app'
        ]
    }
});

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

.babelrc:

{
  "plugins": ["transform-decorators-legacy", "transform-class-properties", "transform-object-rest-spread", "react-hot-loader/babel"]
}

my app.js:

import 'react-hot-loader/patch';
import React from 'react'
import ReactDOM from 'react-dom'
import {AppContainer} from 'react-hot-loader';
import App from './components/App'
import './styles/app.scss'


const MOUNT_NODE = document.getElementById('app');

ReactDOM.render(
    <AppContainer>
        <App/>
    </AppContainer>
    ,
    MOUNT_NODE
);
if (process.env.NODE_ENV === 'development' && module.hot) {
    module.hot.accept();
}

And hot script in package.json:

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

Generally hot script starts without errors, and it says that compiled successfully, I am on app.dev and js file is loaded from localhost:8080, but there are no any effect in browser, also there are nothing about HMR in console. Watching files with browserSync works well but it reloads full page, but I want to achieve hot reload.

[Wchindanai]

Do you have any solutions for this issue ?

[RibikiH]

In my laravel project it working now Package use:

• react-hot-loader@4.13.0
• babel-plugin-transform-class-properties@6.24.1
• babel-preset-react@6.24.1

and my mix config

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


mix.ts('resources/ts/app.tsx', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require("tailwindcss"),
        require("autoprefixer"),
    ]);`

mix.babelConfig({
    presets: [
        [
            '@babel/preset-env',
            {
                modules: 'auto',
                targets: { node: 'current' }
            },
            '@babel/preset-react',
        ]
    ],
    plugins: [
        [
            'react-hot-loader/babel',
            '@babel/plugin-proposal-class-properties',
            {
                loose: true
            }
        ]
    ]
})

App.tsx

import React from 'react';
import {Redirect, Route, Router, Switch} from "react-router-dom";
import { history } from "../helper/history";
import { routes } from "../helper/routes";
import {CustomRoute} from '../components';
import { hot } from 'react-hot-loader/root';

const App = () => (
    <>
        <Router history={history}>
            <Switch>
                { routes.map((route, i) =>
                    <CustomRoute key={i} {...route} />
                ) }
                <Redirect from="*" to="/"/>
            </Switch>
        </Router>
    </>
)
export default hot(App);

Hope it helps.