Constant preamble issues when starting a fresh project

[meeoh]

Some context:

Node: 18.12.1
Ruby: 3.1.0
npm: 8.19.2

New to using vite in general, and wanted to get a rails / typescript prjoect going. Through a bad amount of trial and error, I've figured out the following in my setup:

• If I stick to just creating basic html then everything works fine, e.g

import React from "react";
import { createRoot } from "react-dom/client";

const container = document.getElementById("root");
const root = createRoot(container);
root.render(
  <React.StrictMode>
    <h1>test</h1>
  </React.StrictMode>
);

Will render completely fine.

However, as soon as I even declare a functional component, I start to receive an error

import React from "react";
import { createRoot } from "react-dom/client";

const TestComponent = () => {
  return <div>TestComponent</div>;
};

const container = document.getElementById("root");
const root = createRoot(container);
root.render(
  <React.StrictMode>
    <h1>test</h1>
  </React.StrictMode>
);

Error

Whats even weirder is that class based components are completely fine. It feels like this is some sort of transpiling issue or something. Is there some sort of config that needs to be set in order to use modern features when using vite/rails?

[ElMassimo]

Hi @meeoh!

The error from @vitejs/plugin-react is not clear, but the preamble refers to the code that creates the HMR registry.

The plugin is attempting to warn you that HMR will not work in your current setup.

Vite Ruby provides vite_react_refresh_tag, which you should add to your layout when using @vitejs/plugin-react (a good place is right after vite_client_tag).

[meeoh]

Looks like that fixed it! Thanks so much for your quick response, think the guides I was using to get started definitely need to add that react_refresh_tag in!

[jpriollaud]

<%= vite_react_refresh_tag(nonce: whatever_name_i_use_for_nonce) %>

Helped me.