BranchesTags

Repository files navigation

fix-react-refresh-plugin

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.

Background

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';constTool=lazy(()=>import('./Tool');classMyComponentextendsComponent{render(){return(<div>{someCondition&&(<Suspense><Tool/></Suspense>)}</div>);});exportdefaultwithHoc(MyComponent);

🟢 This code does work.

import{lazy,Suspense,Component}from'react';constTool=lazy(()=>import('./Tool');constNoopFC=()=>null;// Here is an empty functional component.classMyComponentextendsComponent{render(){return(<div>{someCondition&&(<Suspense><Tool/></Suspense>)}</div>);});exportdefaultwithHoc(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.

Usage

Install the plugin via your package manager:

npm i -D fix-react-refresh-plugin

Import and apply it to your vite.config.js file:

importfixReactRefreshfrom'fix-react-refresh-plugin';exportdefaultdefineConfig({plugins: [{
...fixReactRefresh(),enforce: 'pre',},react()]});

⚠️fixReactRefresh() must be set before react() and must have enforce set to pre.

Configuration

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 nameDescriptionTypeDefault valueRequired
componentFileNameRegExMatch the pattern of React component files.RegExp/\.(jsx|tsx)/No
classComponentDeclarationRegExMatch the pattern of React class components declarations.RegExp/(export(\sdefault)*)*\s*class\s+\w+\s+extends\s+(React.(Component|PureComponent)|(Component|PureComponent))/gmNo
noopFunctionalComponentNameThe name of the added noop function that forces component reloading. You must use the PascalCase notation and avoid special characters.stringFixReactRefreshFCNo

About

This Vite plugin helps overcome a problem of not reloading some React components after saving changes.

Resources

Readme
MIT license
Activity
Custom properties

Stars

5 stars

Watchers

4 watching

Forks

1 fork
Report repository

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
fix-react-refresh-plugin
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.
Background
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';constTool=lazy(()=>import('./Tool');classMyComponentextendsComponent{render(){return(<div>{someCondition&&(<Suspense><Tool/></Suspense>)}</div>);});exportdefaultwithHoc(MyComponent);
🟢 This code does work.
import{lazy,Suspense,Component}from'react';constTool=lazy(()=>import('./Tool');constNoopFC=()=>null;// Here is an empty functional component.classMyComponentextendsComponent{render(){return(<div>{someCondition&&(<Suspense><Tool/></Suspense>)}</div>);});exportdefaultwithHoc(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.
Usage
Install the plugin via your package manager:
npm i -D fix-react-refresh-plugin

Import and apply it to your vite.config.js file:
importfixReactRefreshfrom'fix-react-refresh-plugin';exportdefaultdefineConfig({plugins: [{
...fixReactRefresh(),enforce: 'pre',},react()]});
⚠️fixReactRefresh() must be set before react() and must have enforce set to pre.
Configuration
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 nameDescriptionTypeDefault valueRequired
componentFileNameRegExMatch the pattern of React component files.RegExp/\.(jsx|tsx)/No
classComponentDeclarationRegExMatch the pattern of React class components declarations.RegExp/(export(\sdefault)*)*\s*class\s+\w+\s+extends\s+(React.(Component|PureComponent)|(Component|PureComponent))/gmNo
noopFunctionalComponentNameThe name of the added noop function that forces component reloading. You must use the PascalCase notation and avoid special characters.stringFixReactRefreshFCNo
About
This Vite plugin helps overcome a problem of not reloading some React components after saving changes.
Resources
Readme
MIT license
Activity
Custom properties
Stars
5 stars
Watchers
4 watching
Forks
1 fork
Report repository
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
fix-react-refresh-plugin
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.
Background
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';constTool=lazy(()=>import('./Tool');classMyComponentextendsComponent{render(){return(<div>{someCondition&&(<Suspense><Tool/></Suspense>)}</div>);});exportdefaultwithHoc(MyComponent);
🟢 This code does work.
import{lazy,Suspense,Component}from'react';constTool=lazy(()=>import('./Tool');constNoopFC=()=>null;// Here is an empty functional component.classMyComponentextendsComponent{render(){return(<div>{someCondition&&(<Suspense><Tool/></Suspense>)}</div>);});exportdefaultwithHoc(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.
Usage
Install the plugin via your package manager:
npm i -D fix-react-refresh-plugin

Import and apply it to your vite.config.js file:
importfixReactRefreshfrom'fix-react-refresh-plugin';exportdefaultdefineConfig({plugins: [{
...fixReactRefresh(),enforce: 'pre',},react()]});
⚠️fixReactRefresh() must be set before react() and must have enforce set to pre.
Configuration
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 nameDescriptionTypeDefault valueRequired
componentFileNameRegExMatch the pattern of React component files.RegExp/\.(jsx|tsx)/No
classComponentDeclarationRegExMatch the pattern of React class components declarations.RegExp/(export(\sdefault)*)*\s*class\s+\w+\s+extends\s+(React.(Component|PureComponent)|(Component|PureComponent))/gmNo
noopFunctionalComponentNameThe name of the added noop function that forces component reloading. You must use the PascalCase notation and avoid special characters.stringFixReactRefreshFCNo
About
This Vite plugin helps overcome a problem of not reloading some React components after saving changes.
Resources
Readme
MIT license
Activity
Custom properties
Stars
5 stars
Watchers
4 watching
Forks
1 fork
Report repository
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
fix-react-refresh-plugin
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.
Background
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';constTool=lazy(()=>import('./Tool');classMyComponentextendsComponent{render(){return(<div>{someCondition&&(<Suspense><Tool/></Suspense>)}</div>);});exportdefaultwithHoc(MyComponent);
🟢 This code does work.
import{lazy,Suspense,Component}from'react';constTool=lazy(()=>import('./Tool');constNoopFC=()=>null;// Here is an empty functional component.classMyComponentextendsComponent{render(){return(<div>{someCondition&&(<Suspense><Tool/></Suspense>)}</div>);});exportdefaultwithHoc(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.
Usage
Install the plugin via your package manager:
npm i -D fix-react-refresh-plugin

Import and apply it to your vite.config.js file:
importfixReactRefreshfrom'fix-react-refresh-plugin';exportdefaultdefineConfig({plugins: [{
...fixReactRefresh(),enforce: 'pre',},react()]});
⚠️fixReactRefresh() must be set before react() and must have enforce set to pre.
Configuration
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 nameDescriptionTypeDefault valueRequired
componentFileNameRegExMatch the pattern of React component files.RegExp/\.(jsx|tsx)/No
classComponentDeclarationRegExMatch the pattern of React class components declarations.RegExp/(export(\sdefault)*)*\s*class\s+\w+\s+extends\s+(React.(Component|PureComponent)|(Component|PureComponent))/gmNo
noopFunctionalComponentNameThe name of the added noop function that forces component reloading. You must use the PascalCase notation and avoid special characters.stringFixReactRefreshFCNo
About
This Vite plugin helps overcome a problem of not reloading some React components after saving changes.
Resources
Readme
MIT license
Activity
Custom properties
Stars
5 stars
Watchers
4 watching
Forks
1 fork
Report repository
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
fix-react-refresh-plugin
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.
Background
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';constTool=lazy(()=>import('./Tool');classMyComponentextendsComponent{render(){return(<div>{someCondition&&(<Suspense><Tool/></Suspense>)}</div>);});exportdefaultwithHoc(MyComponent);
🟢 This code does work.
import{lazy,Suspense,Component}from'react';constTool=lazy(()=>import('./Tool');constNoopFC=()=>null;// Here is an empty functional component.classMyComponentextendsComponent{render(){return(<div>{someCondition&&(<Suspense><Tool/></Suspense>)}</div>);});exportdefaultwithHoc(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.
Usage
Install the plugin via your package manager:
npm i -D fix-react-refresh-plugin

Import and apply it to your vite.config.js file:
importfixReactRefreshfrom'fix-react-refresh-plugin';exportdefaultdefineConfig({plugins: [{
...fixReactRefresh(),enforce: 'pre',},react()]});
⚠️fixReactRefresh() must be set before react() and must have enforce set to pre.
Configuration
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 nameDescriptionTypeDefault valueRequired
componentFileNameRegExMatch the pattern of React component files.RegExp/\.(jsx|tsx)/No
classComponentDeclarationRegExMatch the pattern of React class components declarations.RegExp/(export(\sdefault)*)*\s*class\s+\w+\s+extends\s+(React.(Component|PureComponent)|(Component|PureComponent))/gmNo
noopFunctionalComponentNameThe name of the added noop function that forces component reloading. You must use the PascalCase notation and avoid special characters.stringFixReactRefreshFCNo
About
This Vite plugin helps overcome a problem of not reloading some React components after saving changes.
Resources
Readme
MIT license
Activity
Custom properties
Stars
5 stars
Watchers
4 watching
Forks
1 fork
Report repository
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
fix-react-refresh-plugin
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.
Background
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';constTool=lazy(()=>import('./Tool');classMyComponentextendsComponent{render(){return(<div>{someCondition&&(<Suspense><Tool/></Suspense>)}</div>);});exportdefaultwithHoc(MyComponent);
🟢 This code does work.
import{lazy,Suspense,Component}from'react';constTool=lazy(()=>import('./Tool');constNoopFC=()=>null;// Here is an empty functional component.classMyComponentextendsComponent{render(){return(<div>{someCondition&&(<Suspense><Tool/></Suspense>)}</div>);});exportdefaultwithHoc(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.
Usage
Install the plugin via your package manager:
npm i -D fix-react-refresh-plugin

Import and apply it to your vite.config.js file:
importfixReactRefreshfrom'fix-react-refresh-plugin';exportdefaultdefineConfig({plugins: [{
...fixReactRefresh(),enforce: 'pre',},react()]});
⚠️fixReactRefresh() must be set before react() and must have enforce set to pre.
Configuration
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 nameDescriptionTypeDefault valueRequired
componentFileNameRegExMatch the pattern of React component files.RegExp/\.(jsx|tsx)/No
classComponentDeclarationRegExMatch the pattern of React class components declarations.RegExp/(export(\sdefault)*)*\s*class\s+\w+\s+extends\s+(React.(Component|PureComponent)|(Component|PureComponent))/gmNo
noopFunctionalComponentNameThe name of the added noop function that forces component reloading. You must use the PascalCase notation and avoid special characters.stringFixReactRefreshFCNo
About
This Vite plugin helps overcome a problem of not reloading some React components after saving changes.
Resources
Readme
MIT license
Activity
Custom properties
Stars
5 stars
Watchers
4 watching
Forks
1 fork
Report repository
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
fix-react-refresh-plugin
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.
Background
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';constTool=lazy(()=>import('./Tool');classMyComponentextendsComponent{render(){return(<div>{someCondition&&(<Suspense><Tool/></Suspense>)}</div>);});exportdefaultwithHoc(MyComponent);
🟢 This code does work.
import{lazy,Suspense,Component}from'react';constTool=lazy(()=>import('./Tool');constNoopFC=()=>null;// Here is an empty functional component.classMyComponentextendsComponent{render(){return(<div>{someCondition&&(<Suspense><Tool/></Suspense>)}</div>);});exportdefaultwithHoc(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.
Usage
Install the plugin via your package manager:
npm i -D fix-react-refresh-plugin

Import and apply it to your vite.config.js file:
importfixReactRefreshfrom'fix-react-refresh-plugin';exportdefaultdefineConfig({plugins: [{
...fixReactRefresh(),enforce: 'pre',},react()]});
⚠️fixReactRefresh() must be set before react() and must have enforce set to pre.
Configuration
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 nameDescriptionTypeDefault valueRequired
componentFileNameRegExMatch the pattern of React component files.RegExp/\.(jsx|tsx)/No
classComponentDeclarationRegExMatch the pattern of React class components declarations.RegExp/(export(\sdefault)*)*\s*class\s+\w+\s+extends\s+(React.(Component|PureComponent)|(Component|PureComponent))/gmNo
noopFunctionalComponentNameThe name of the added noop function that forces component reloading. You must use the PascalCase notation and avoid special characters.stringFixReactRefreshFCNo
About
This Vite plugin helps overcome a problem of not reloading some React components after saving changes.
Resources
Readme
MIT license
Activity
Custom properties
Stars
5 stars
Watchers
4 watching
Forks
1 fork
Report repository
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
fix-react-refresh-plugin
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.
Background
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';constTool=lazy(()=>import('./Tool');classMyComponentextendsComponent{render(){return(<div>{someCondition&&(<Suspense><Tool/></Suspense>)}</div>);});exportdefaultwithHoc(MyComponent);
🟢 This code does work.
import{lazy,Suspense,Component}from'react';constTool=lazy(()=>import('./Tool');constNoopFC=()=>null;// Here is an empty functional component.classMyComponentextendsComponent{render(){return(<div>{someCondition&&(<Suspense><Tool/></Suspense>)}</div>);});exportdefaultwithHoc(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.
Usage
Install the plugin via your package manager:
npm i -D fix-react-refresh-plugin

Import and apply it to your vite.config.js file:
importfixReactRefreshfrom'fix-react-refresh-plugin';exportdefaultdefineConfig({plugins: [{
...fixReactRefresh(),enforce: 'pre',},react()]});
⚠️fixReactRefresh() must be set before react() and must have enforce set to pre.
Configuration
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 nameDescriptionTypeDefault valueRequired
componentFileNameRegExMatch the pattern of React component files.RegExp/\.(jsx|tsx)/No
classComponentDeclarationRegExMatch the pattern of React class components declarations.RegExp/(export(\sdefault)*)*\s*class\s+\w+\s+extends\s+(React.(Component|PureComponent)|(Component|PureComponent))/gmNo
noopFunctionalComponentNameThe name of the added noop function that forces component reloading. You must use the PascalCase notation and avoid special characters.stringFixReactRefreshFCNo
About
This Vite plugin helps overcome a problem of not reloading some React components after saving changes.
Resources
Readme
MIT license
Activity
Custom properties
Stars
5 stars
Watchers
4 watching
Forks
1 fork
Report repository
Used by
Contributors
Languages