Security News
Internet Archive Hacked, 31 Million Record Compromised
The Internet Archive's "Wayback Machine" has been hacked and defaced, with 31 millions records compromised.
fix-react-refresh-plugin
Advanced tools
This Vite plugin helps overcome a problem of not reloading some React components after saving changes.
This Vite plugin helps overcome a problem of not reloading some React components after saving changes.
Note that this plugin does not fix this issue, but only applies a workaround. Before use, check whether the problem has been resolved at the level of the modules responsible for HMR.
If you are using lazily loaded class components additionally wrapped in HOCs then HMR problem can occur. We faced these types of issues when moving our app from Create React App to Vite. The foundation of our source code was created many years ago and we still use class components in many places and cannot easily rewrite them. While debugging, we noticed that if we add a functional component to a class component module, then reloading works. Here is an example:
🔴 This code does not work.
import { lazy, Suspense, Component } from 'react';
const Tool = lazy(() => import('./Tool');
class MyComponent extends Component {
render() {
return (
<div>
{someCondition && (
<Suspense>
<Tool />
</Suspense>
)}
</div>
);
}
);
export default withHoc(MyComponent);
🟢 This code does work.
import { lazy, Suspense, Component } from 'react';
const Tool = lazy(() => import('./Tool');
const NoopFC = () => null; // Here is an empty functional component.
class MyComponent extends Component {
render() {
return (
<div>
{someCondition && (
<Suspense>
<Tool />
</Suspense>
)}
</div>
);
}
);
export default withHoc(MyComponent);
Therefore, we came up with an idea for a plugin that will automatically add an empty functional component to class component modules to force refreshing. If you need more information about this error and alternative ways to resolve it, check out this issue.
Install the plugin via your package manager:
npm i -D fix-react-refresh-plugin
Import and apply it to your vite.config.js
file:
import fixReactRefresh from 'fix-react-refresh-plugin';
export default defineConfig({
plugins: [
{
...fixReactRefresh(),
enforce: 'pre',
},
react()
]
});
⚠️ fixReactRefresh()
must be set before react()
and must have enforce
set to pre
.
The plugin is prepared to work right out of the box, but for more sophisticated cases you may need to change the configuration. Below is a list of configurable options:
Property name | Description | Type | Default value | Required |
---|---|---|---|---|
componentFileNameRegEx | Match the pattern of React component files. | RegExp | /\.(jsx|tsx)/ | No |
classComponentDeclarationRegEx | Match the pattern of React class components declarations. | RegExp | /(export(\sdefault)*)*\s*class\s+\w+\s+extends\s+(React.(Component|PureComponent)|(Component|PureComponent))/gm | No |
noopFunctionalComponentName | The name of the added noop function that forces component reloading. You must use the PascalCase notation and avoid special characters. | string | FixReactRefreshFC | No |
FAQs
This Vite plugin helps overcome a problem of not reloading some React components after saving changes.
The npm package fix-react-refresh-plugin receives a total of 99 weekly downloads. As such, fix-react-refresh-plugin popularity was classified as not popular.
We found that fix-react-refresh-plugin demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The Internet Archive's "Wayback Machine" has been hacked and defaced, with 31 millions records compromised.
Security News
TC39 is meeting in Tokyo this week and they have approved nearly a dozen proposals to advance to the next stages.
Security News
Our threat research team breaks down two malicious npm packages designed to exploit developer trust, steal your data, and destroy data on your machine.