[@vitejs/[email protected], vite 2.8.6] Refresh doesn't work under a special condition

[hanayashiki]

Describe the bug

I find @vitejs/[email protected] doesn't refresh the page any more when the following condition is met:

You have an App.jsx which is expected to work with react refresh

// Cond 1: You have another react-component like function definition.
const AAA = (props) => {
  return null;
};

// Cond 2: You wrap your exported component with a higher-order component, which takes the first parameter for extra info.
function wrapper(x, f) {
  return f;
}

// Cond 3: You wrap your exported component with that wrapper.
export const App = wrapper({}, () => {
  return <div>122223</div>;
});

Now, whatever you edit this file to, the refresh doesn't work anymore.

Reproduction

https://stackblitz.com/edit/vite-dbowdc?file=App.jsx

System Info

System:
    OS: macOS 12.2.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 66.48 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.12.0 - ~/.nvm/versions/node/v16.12.0/bin/node
    Yarn: 1.22.17 - ~/.yarn/bin/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.12.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Brave Browser: 94.1.30.87
    Edge: 99.0.1150.46
    Firefox: 97.0.2
    Safari: 15.3
  npmPackages:
    @vitejs/plugin-react: ^1.2.0 => 1.2.0 
    vite: 2.8.6 => 2.8.6

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[hanayashiki]

For anyone with this case, you can work it around by switching the FC parameter of wrapper to the first one

function wrapper(f, x) {
  return f;
}

export const App = wrapper(() => {
  return <div>122223</div>;
}, {});

This way, App can be refreshed normally. I think this might be an ignored case of react-refresh when recognising react components...