Confilt with @vitejs/plugin-react 2.0.0 + Vite 3 and breaks HMR

[dsrkafuu]

@vitejs/plugin-react can't detect preamble. Something is wrong.

Reproduce:

Checkout the main branch of this project: https://github.com/dsrkafuu/skyline-overlay

Simply upgrade vite to ^3.0.0 and @vitejs/plugin-react to ^2.0.0, then start the dev server & open the browser.

Removes the HtmlEnv plugin in vite.config.js, it works well.

[dsrkafuu]

• @vitejs/plugin-react: 2.0.0
• vite: 3.0.5
• vite-plugin-html-env: 1.2.4

[dsrkafuu]

The README of React plugin mentioned this Error: https://github.com/vitejs/vite/tree/main/packages/plugin-react#middleware-mode

Can't confirm if this is the cause of the problem though.

[yeion7]

I think the issue is that the react refresh script gets transform

from:

import RefreshRuntime from "/@react-refresh"
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true

to:

import RefreshRuntime from "/@react-refresh"RefreshRuntime.injectIntoGlobalHook(window)window.$RefreshReg$ = () => {}window.$RefreshSig$ = () => (type) => typewindow.__vite_plugin_react_preamble_installed__ = true

that makes window.__vite_plugin_react_preamble_installed__, convert to typewindow.__vite_plugin_react_preamble_installed__

[Bonnev]

Hi all,

Problem is exactly what @yeion7 said. It is located in src/parse/index.js line 82 (in current master):

this.html = this.html.replace(/\n/g, '')

which removes all new lines. Since the code generated by plugin-react doesn't have semicolons, no delimiter remains between "/@react-refresh" and RefreshRuntime

Removing this line directly in node_modules/vite-plugin-html-env/lib/parse/index.js fixes the issue.

Now, depending on the reason for adding this line in the first place, the fix would be different.

@lxs24sxl FYI

[mauro-ni]

Hi all, is there any information about the time it will take to fix the problem?

Many thanks, Mauro

[lxs24sxl]

Sorry guys, busy with wedding stuff this month. I'll deal with those in the next few days.

[Bonnev]

@lxs24sxl Reminder 😇

[lxs24sxl]

@mauro-ni @yeion7 @Bonnev @dsrkafuu

Thanks for the feedback, I have solved this problem in version 1.2.7.

The plugin incorrectly parsed and integrated the code because the new version of the plugin (@vitejs/plugin) was outputting a file without a semicolon in some of the code.

<script type="module" src="/src/index.tsx">
    import RefreshRuntime from "/@react-refresh"
    RefreshRuntime.injectIntoGlobalHook(window)
    window.$RefreshReg$ = () => {}
    window.$RefreshSig$ = () => (type) => type
    window.__vite_plugin_react_preamble_installed__ = true
 </script>

PS: Preparing for the wedding is really busy, but meaningful. 👀

[Bonnev]

@lxs24sxl I can confirm it works!

PS: I'm sure it will be the best wedding!