Fast refresh for legacy React.createElement in .js files

[lukaszkrzywizna]

Hi ViteJS community,

I've encountered a regression in the fast refresh behavior with legacy React's createElement API after updating to plugin version 4.0.2. Previously, fast refresh would maintain the component state, but now any change in a .js file with a custom component causes a full page reload, resetting the component's state.

Environment:

• Vite Version: 5.0.2
• React Version: 18.2.0
• Browser: Chrome
• OS: MacOS

Steps to Reproduce:

1. Create a .js file with a React component using createElement.
2. Import and use this component in your application.
3. Make a change to the component's file.
4. Observe that the page fully reloads instead of fast refreshing.

Example Code:

// Test.js
import React from "react"

export function Test() {
    const [counter, setCounter] = React.useState(0);
    return React.createElement("button", {onClick: () => setCounter(counter + 1)}, `Counter: ${counter}`);
}

// App.js
import { Test } from './Test.js'
import React from "react"

export default function App() {
  return React.createElement(Test, {});
}

Workarounds:
To restore the expected fast-refresh behavior, I can:

• Downgrade to the version prior to 4.0.2
• Rename the file to .jsx
• Change the jsxRuntime setting to classic

I suspect the last option is the most appropriate workaround, but I want to confirm that this issue isn't indicative of a broader bug.

Thank you for looking into this.

[ArnaudBarre]

4.0.2 was actually a fix, the condition was revered because the default 'jsxRutime' is 'automatic'. If you are using 'createElement', setting jsxRuntime to classic is the expected thing and not at all a workaround!

[lukaszkrzywizna]

I see. Thank you for the information and your time 👍