React Hot reloading

[pepicrft]

Hi there!
First of all, thanks for building such a great Gem. I was able to move away from Webpack easily and I'm now using Vite with a React frontend. This is the entrypoint of my app:

import React from "react";
import ReactDom from "react-dom";
import App from "../components/App";

ReactDom.render(<App />, document.getElementById("react-app"));

The only thing that it does is mounting a React component in the DOM.

Although everything works fine, I noticed a couple of things that I was wondering whether they can be improved through a plugin or a different configuration on my side:

• When I modify React components, the frontend doesn't reload automatically.
• If I make a small change in one of the components and reload, the bundling through Vite takes a long time.

Am I doing something wrong?

[pepicrft]

In case it helps debug the issue, here's the PR where I'm adding Vite.

[ElMassimo]

I have added a vite_react_refresh_tag helper that you can use to set up HMR with React.

The helper should be used in any layouts or views that use React components:

  <%= vite_client_tag %>
  <%= vite_react_refresh_tag %>
  <%= vite_javascript_tag 'application' %>

If you locked the gems optimistically using ~>, you can upgrade by running bundle update vite_ruby vite_rails.

Vite.React.Refresh.mp4