feat: invalidate message and fix HMR for HOC, class component & styled components

[ArnaudBarre]

Fixes all known HMR issues (fix #26, fix #6, fix #21, fix #11, fix #8, fix #20).

The SWC plugin also add an issue in the case of "hidden" component (like styled components), fixed in vitejs/vite-plugin-react-swc@954793d (available in 3.1.0-beta.2)

Instead of backporting only the fix, I did what I didn't have time to do before v3: using a more precise validate boundary check and adding invalidate message.

Because of a change in comment handling in esbuild, we need to add Vite 4.1 as a peer dependency to include esbuild > 0.16.14. This requires a bump of rollup and TS, that are removed of the exclude list of renovate at the same time, doesn't seem required for this small codebase.

[ArnaudBarre]

Available in v3.1.0-beta.0!

[jrmyio]

Available in v3.1.0-beta.0!

v4.1.0-beta.0 I assume ;)

I ran into some styled component theming causing a full refresh. Upgraded to the 4.1.0-beta.0 and the issue is fixed !

Awesome work !

[ArnaudBarre]

The plugin version is v3.1.0-beta.0, but it requires to bump Vite to v4.1.0-beta.0!

[brillout]

I just ran the VPS test suite and the HMR tests are passing.

[glekner]

Amazing work! waiting for a release

[ArnaudBarre]

This should be released this week when Vite 4.1 is stable

[rcofie]

@ArnaudBarre how does one upgrade it to the latest version so I don't get an error with ReactRefresh?

[ArnaudBarre]

This available with the version 3.1 (requires Vite 4.1)

[andrewk5o]

It seems to be not resolved still in current stable version (4.1.0)

[ArnaudBarre]

Are you using v3.1?
If yes can you provide a case where this is not working for you?

[andrewk5o]

Are you using v3.1? If yes can you provide a case where this is not working for you?

vitejs/plugin-react - 3.1.0
vite - 4.1.0
The warning occurred when I wrapped component with HOC and made default export
export default Wrapper(Component)
I've already dropped idea of using HOCs and refactored Wrapper to be
<Wrapper><Component/></Wrapper>

[ArnaudBarre]

export default Wrapper(Component) is not following refresh rules because it's anonymous. You should get a warning for that

[elainecyx]

vite: 4.2.1
@vitejs/plugin-react: 3.1.0
react: 18.2.0
i got error like this: Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong.
how can i fix ? Thanks!
@ArnaudBarre

[ArnaudBarre]

Hey this is not the right place to report a bug. (And this PR has nothing to do with this bug). First try to reproduce the issue from a fresh template on stackblitz & then open a new issue with a link to it.
You might also read this https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#middleware-mode

[Ghulamqadir098]

vite: 4.2.1 @vitejs/plugin-react: 3.1.0 react: 18.2.0 i got error like this: Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong. how can i fix ? Thanks! @ArnaudBarre

I am having this issue

[guugg]

I need to embed html, the new installation tests' @vitejs/plugin-react 'and' @vitejs/plugin-react-swc ' (separate). As well as tested' @vitejs/plugin-vue '. I used'pnpm dev' for each of the three projects. Runs correctly without errors. I use them in'index.html 'with three default code cases:' @vitejs/plugin-vue 'without any errors.' @vitejs/plugin-react 'and' @vitejs/plugin-react-swc 'have errors.

• "@Vitejs/plugin-vue" is well supported.

• Console error for '@vitejs/plugin-react' ('Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong. See [plugin-react-refresh] auto page reloading is broken when a jsx file contain multi-components #11 (comment)').

• Console error for '@vitejs/plugin-react-swc' ('Uncaught Error: React refresh preamble was not loaded. Something is wrong.')
  I searched for the error and it didn't get handled.

I see a solution in #11 (comment), don't use'export default 'to solve this problem

Finally, in the "https://react.dev/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react" also saw the official column "Components.js."

[bsodmike]

I just setup a new Vite project with the react-ts template, and was fine in Firefox. Got Tailwindcss and few other things working fine.

Demo: I've created a demo https://github.com/bsodmike/vitejs-react-plugin-error-troubleshoot-public/

Ideas?

[bsodmike]

@ArnaudBarre I've created a demo https://github.com/bsodmike/vitejs-react-plugin-error-troubleshoot-public/tree/master - I wonder if you could take a look please?

[hi-ogawa]

@bsodmike Please avoid using a PR comment for questions and create a new issue instead.
(That said, your error might be due to service worker cache of vite-plugin-pwa. I'd suggest check it on incognito window.)

[bsodmike]

@bsodmike Please avoid using a PR comment for questions and create a new issue instead. (That said, your error might be due to service worker cache of vite-plugin-pwa. I'd suggest check it on incognito window.)

Apologies, yes, it was an errant service worker. I have no idea what caused that to be installed. Will look into this, thanks

[arcy405]

still facing issue in 4.3.4