[react] HMR not working with HOC #21
Description
Describe the bug
Description
There is a very odd behavior in my project with HMR not updating what the browser is displaying after editing a component.
- I have a page component
Aboutinsrc/About.tsxthat is used as an element for react-router<Route>insrc/App.tsx. - This page component
Aboutis also wrapped with HOCwithRandomfromsrc/withRandom.tsx. - A
Componentdefined in the samesrc/About.tsxfile is wrapped with HOCwithCounterfromsrc/withCounter.tsxand used as one of children ofAboutcomponent
This combination makes HMR not working as expected because any editing to About component is not updating what is being displayed by the browser.
Findings
Updating <h1>original text</h1> in About component does not update the text displayed in the browser.
const Component = memo(() => (
<div style={{ border: '1px solid black', padding: '8px' }}>
<b>This is component defined in about.tsx</b>
</div>
));
const ComponentWithCounter = withCounter('You are finally awake.', Component);
const About = withRandom(
'One does not simply reproduce a bug in isolated environment',
memo(() => {
return (
<>
<b>This is about component</b>
<div style={{ border: '1px solid blue', padding: '8px' }}>
<ComponentWithCounter>
{({ decrement, increment }) => (
<>
<button onClick={increment} type='button'>
+
</button>
<button onClick={decrement} type='button'>
-
</button>
</>
)}
</ComponentWithCounter>
<h1>original text</h1>
</div>
</>
);
})
);But after removing/commenting out anything related to withCounter HOC About component reacts to changes as it should:
import { memo } from 'react';
// import { withCounter } from '@/withCounter';
import { withRandom } from '@/withRandom';
// const Component = memo(() => (
// <div style={{ border: '1px solid black', padding: '8px' }}>
// <b>This is component defined in about.tsx</b>
// </div>
// ));
// const ComponentWithCounter = withCounter('You are finally awake.', Component);
const About = withRandom(
'One does not simply reproduce a bug in isolated environment',
memo(() => {
return (
<>
<b>This is about component</b>
<div style={{ border: '1px solid blue', padding: '8px' }}>
{/* <ComponentWithCounter>
{({ decrement, increment }) => (
<>
<button onClick={increment} type='button'>
+
</button>
<button onClick={decrement} type='button'>
-
</button>
</>
)}
</ComponentWithCounter> */}
<h1>original text - changed!</h1>
</div>
</>
);
})
);Same goes for removing/commenting out anything related to withRandom:
import { memo } from 'react';
import { withCounter } from '@/withCounter';
const Component = memo(() => (
<div style={{ border: '1px solid black', padding: '8px' }}>
<b>This is component defined in about.tsx</b>
</div>
));
const ComponentWithCounter = withCounter('You are finally awake.', Component);
const About = memo(() => {
return (
<>
<b>This is about component</b>
<div style={{ border: '1px solid blue', padding: '8px' }}>
<ComponentWithCounter>
{({ decrement, increment }) => (
<>
<button onClick={increment} type='button'>
+
</button>
<button onClick={decrement} type='button'>
-
</button>
</>
)}
</ComponentWithCounter>
<h1>original text</h1>
</div>
</>
);
});However I see changes in network tab - the browser just does not update for some reason:
Steps to reproduce
- Open the provided reproduction case
- Start vite (if it is not already running) with
npm run vite:start - in src/About.tsx edit text in
<h1>tag ofAboutcomponent - Browser should be updated with new text that was just edited in the previous step but it isn't
Reproduction
https://stackblitz.com/edit/node-tqfxtx?file=src%2FAbout.tsx
System Info
System:
OS: Linux 5.10 Ubuntu 20.04.3 LTS (Focal Fossa)
CPU: (16) x64 AMD Ryzen 9 5900HX with Radeon Graphics
Memory: 1.73 GB / 7.47 GB
Container: Yes
Shell: 5.0.17 - /bin/bash
Binaries:
Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
npm: 8.2.0 - ~/.nvm/versions/node/v16.13.1/bin/npm
npmPackages:
@vitejs/plugin-react: ^1.1.4 => 1.1.4
vite: ^2.7.10 => 2.7.10Used Package Manager
npm
Logs
[vite] hot updated: /src/About.tsxValidations
- 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/vue-next 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.