Why is hot reloading not working in Vite + Rails?

I created a rails app, and installed vite_rails gem. My javascript is in app/frontend folder.

However, hot reloading when I save a JS file is not working. Even more, Vite takes 4 seconds to transform my short code! That is tedious when making many changes to javascript files, and having to wait that long.

I also tried by installing vite-plugin-full-reload NPM package. This is my config for vite:

// vite.config.js
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import FullReload from 'vite-plugin-full-reload'
import RubyPlugin from 'vite-plugin-ruby'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    RubyPlugin(),
    vue(),
    FullReload(['config/routes.rb', 'app/views/**/*', 'app/frontend/**/*']),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./app/frontend/internal', import.meta.url)),
    },
  },
})

Docker config:

# docker-compose.yml
services:
  db:
    image: postgres
    env_file: .env.development
  web:
    image: rails
    build: .
    volumes:
      - .:/app
    ports:
      - "3000:3000"
    depends_on:
      - db
    env_file: .env.development

FROM ruby:3.3

RUN apt-get update -qq && apt-get install -y build-essential apt-utils libpq-dev nodejs npm

COPY . /app
WORKDIR /app

RUN gem install bundler rails && bundle

CMD rm tmp/pids/server.pid && rails s -b 0.0.0.0

Still not reloading, why?

It is as easy as running Vite command at the same as Rails server.

rails s

Open a 2nd terminal

npx vite

And voilá! Vite runs super fast and hot reloads on any file changes!