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
Configure Plugins
babel.config.js
...
plugins: [
'react-hot-loader/babel',
]
...
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);
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)
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.
Sorry for the late response Jeff!! can you link the code for the component you have between the
<React.Fragments>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.