Razzle: Use react-hot-loader

Created on 22 May 2016 · 6Comments · Source: jaredpalmer/razzle

Loving your starter-kit, has been a real inspiration for me! I would love to see the use of react-hot-loader. Currently the new (awesome!) version is in beta, almost done and it has got some really nice features. Is this something you would consider?

Source

robbinjanssen

Most helpful comment

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

A custom .babelrc:

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

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?

AndrewPrifer on 26 Dec 2017

🎉2 👍1

All 6 comments

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

jaredpalmer on 22 May 2016

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

robbinjanssen on 22 May 2016

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

robbinjanssen on 3 Jun 2016

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

A custom .babelrc:

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

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?

AndrewPrifer on 26 Dec 2017

🎉2 👍1

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

bdombro on 30 Jul 2019

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

npm install --save @hot-loader/react-dom@YOUR-REACT-DOM-VERSION
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;
  },
};