DEV Community

Cover image for Add Hot Reload to React Rails 6

Posted on

Add Hot Reload to React Rails 6

Photo Cred : Moritz Jager


  • Your running Rails 6
  • You have a React Component Entry Point
  • You have webpack installed in your Rails Repo

Install Dependencies:

yarn add react-hot-loader
Enter fullscreen mode Exit fullscreen mode

Configure Plugins


plugins: [
Enter fullscreen mode Exit fullscreen mode

Modify Root Component


import React from "react"
import { hot } from 'react-hot-loader'

class App extends React.Component {
  render () {
    return (

export default hot(App);

Enter fullscreen mode Exit fullscreen mode

Thats it!

Now we just need to import hot into our base/root component and wrap our export in it.

make sure your running the rails server -p 3000 and also ./bin/webpack-dev-server in another window

This is literally all i needed to do to get hot reloading working for my project.

leave a comment below if you have any issues , and we can try and figure it out!

Top comments (3)

jetsondavis profile image
Jeff Davidson • Edited

Doesn't work?! I get this error in browser and nothing renders:

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

nodefiend profile image

Sorry for the late response Jeff!! can you link the code for the component you have between the <React.Fragments>

bencoopertx profile image
Ben Cooper

All I had to do was switch the import from import { hot } from "react-hot-loader" => import { hot } from "react-hot-loader/root" and it worked for me. Using react-rails 6.