"can't detect preamble" error with React plugin

[mdesantis]

• I have tried upgrading by running bundle update vite_ruby.
• I have read the troubleshooting section before opening an issue.

Description 📖

Hello! I'm playing with Vite Rails, trying to create a Vite Rails + React demo app. The problem is that I'm getting the following error:

Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong. See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201

The error is reported in the readme of VIte Rails plugin, suggesting that:

In middleware mode, you should make sure your entry index.html file is transformed by Vite

But frankly I know nothing about Vite so my debugging stopped here :D

Reproduction 🐞

1. Clone the folowing repository: https://github.com/mdesantis/rails-7-demo-vite
2. bin/setup
3. foreman start -f Procfile.dev
4. visit http://localhost:5100/hello_react

Vite Ruby Info

Run bin/rake vite:info and provide the output:

bin/vite present?: true
vite_ruby: 3.0.3
vite_rails: 3.0.1
rails: 7.0.0.rc1
node: v14.17.5
npm: 8.0.0
yarn: 1.22.15
pnpm: 
ruby: ruby 3.0.2p107 (2021-07-07 revision 0db68f0233) [x86_64-linux]

installed packages:
rails-7-demo-vite@ /home/maurizio/Sviluppo/rails-7/rails-7-demo-vite
├─┬ vite-plugin-ruby@3.0.4
│ └── vite@2.7.1 deduped
└── vite@2.7.1

Screenshots 📷

[ElMassimo]

As mentioned in the Troubleshooting section, usually when using Vite Ruby the entrypoints are JS files and stylesheets instead of an index.html file, so it's necessary to add the preamble manually when using @vitejs/plugin-react.

To make the integration simpler, Vite Ruby provides a vite_react_refresh_tag to inject the preamble, which you should place in your layout.

[mdesantis]

@ElMassimo got it, I didn't notice that section of the guide. Thanks!