DEV Community

Cover image for Add Hot Reload to React Rails 6
chowderhead
chowderhead

Posted on

Add Hot Reload to React Rails 6

#react #rails #webpacker

Photo Cred : Moritz Jager

Assumptions

  • 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

babel.config.js

...
plugins: [
      'react-hot-loader/babel',
]
...
Enter fullscreen mode Exit fullscreen mode

Modify Root Component

app.js


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

class App extends React.Component {
  render () {
    return (
      <React.Fragment>
        <Main/>
      </React.Fragment>
    );
  }
}

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)

Collapse
 
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.

Collapse
 
nodefiend profile image
chowderhead •

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

Collapse
 
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.