Use react-hot-loader about razzle HOT 6 CLOSED

If anyone still needs this, React Hot Loader 4 is trivial to integrate. The only changes needed are

1. A custom .babelrc:

{
  "presets": [
    "razzle/babel"
   ],
   "plugins": [
     "react-hot-loader/babel"
   ]
}

2. Wrapping the App export in the hot HOC:

import React from 'react';
import Route from 'react-router-dom/Route';
import Switch from 'react-router-dom/Switch';
import Home from './Home';
import './App.css';

import { hot } from 'react-hot-loader'; // !!!

const App = () => (
  <Switch>
    <Route exact path="/" component={Home} />
  </Switch>
);

export default hot(module)(App); // !!!

@jaredpalmer maybe this could be made the default setup when RHL 4 is officially released?

from razzle.

Thanks! Feel free to submit a PR. I have been using react-hot-loader on other projects, seems to work
really well.

from razzle.

Cool, i'll try submitting one later this week!

from razzle.

Hi Jared,

Don't have the time atm to wrap up a PR, sorry. Since the react-hot-loader is still in development, i'll try to create it when it has been released :) Closing for now

from razzle.

@andrewpeterprifer THANK YOU, THIS IS AWESOME. RHL4 brings so many great features!

from razzle.

Adding to the solution AndrewPrifer provided above, if you need hooks support do the following.

NOTE: These steps are adapted for razzlejs from the official way to do this found here https://github.com/gaearon/react-hot-loader#hot-loaderreact-dom

1. npm install --save @hot-loader/react-dom@YOUR-REACT-DOM-VERSION
2. Adjust razzle.config.js to use the patched react-dom (from hot-loader) instead of the regular react-dom

// razzle.config.js

module.exports = {
  modify: (config, { target, dev }, webpack) => {
    // THIS LINE IS THE MAGIC JUICE
    config.resolve.alias['react-dom'] = '@hot-loader/react-dom'

    return config;
  },
};

from razzle.