Question 1

How to set up eslint-plugin-react-refresh in Vite?

Accepted Answer

Use the vite config from the plugin, which enables allowConstantExport for Vite's HMR support. Import reactRefresh.configs.vite() in your ESLint config, as shown in the README examples.

Question 2

eslint-plugin-react-refresh or manual HMR checks: which is better?

Accepted Answer

This plugin automates checks for Fast Refresh compatibility, saving time over manual reviews. However, for simple projects without complex exports, manual checks might suffice with less configuration overhead.

Question 3

How to allow constant exports like strings in eslint-plugin-react-refresh?

Accepted Answer

Enable the allowConstantExport option in your ESLint config, which is default in the Vite preset. This lets you export constants alongside components without warnings, as explained in the options section.

Question 4

Does eslint-plugin-react-refresh support class components?

Accepted Answer

No, it explicitly does not support class components, as stated in the limitations. You'll need to refactor to functional components or disable the rule for those files.

Question 5

Why am I getting errors with export * in eslint-plugin-react-refresh?

Accepted Answer

Export * is not supported because it breaks Fast Refresh by obscuring component identities. The plugin flags it as an error, so you should replace it with named exports for reliability.

Question 6

How to configure eslint-plugin-react-refresh for Next.js page components?

Accepted Answer

Use the next config preset, which allows exports like fetchCache and revalidate. This handles Next.js-specific HMR behaviors without customizing allowExportNames manually.

Question 7

Can I use eslint-plugin-react-refresh with .js files?

Accepted Answer

Yes, but you need to enable the checkJS option and ensure React is imported in those files. By default, it only checks .tsx and .jsx to reduce false positives, as noted in the options.

React Refresh

What is React Refresh?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions