Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
7 tasks done
hanayashiki opened this issue Mar 21, 2022 · 1 comment · Fixed by #10239
Closed
7 tasks done

Comments

@hanayashiki
Copy link

hanayashiki commented Mar 21, 2022

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

@hanayashiki
Copy link
Author

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...

@github-actions github-actions bot locked and limited conversation to collaborators Oct 20, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants