search

ArnaudBarre / eslint-plugin-react-refresh

Validate that your components can safely be updated with fast refresh
MIT License
198 stars 9 forks source link

How to configure your plugin to work with a Vite+React project? #34

Closed Nefcanto closed 8 months ago

Nefcanto commented 8 months ago

I found your repo from this message in my Vite+React project:

[vite] hmr invalidate /src/Hooks/UseFilter.jsx Could not Fast Refresh. Learn more at https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#consistent-components-exports

Then I installed your plugin created the .eslintrc.json file at the root of my project, and copied/pasted your configuration there.

However, I still don't see anything when I save my react .jsx files. I see the old warnings.

I then installed eslint and eslint-plugin-react in addition to your plugin, but they changed nothing.

What should I do to see more details? What should I do to make your plugin part of every save?

ArnaudBarre commented 8 months ago

For a base config see the one you have when doing npmx creta-vite and choosing the JS React template: https://github.com/vitejs/vite/blob/main/packages/create-vite/template-react/.eslintrc.cjs

Nefcanto commented 8 months ago

@ArnaudBarre, Thank you for responding. I did as you said. I created a new Vite + React + JavaScript project and compared it with mine.

I updated my project based on that, and now npm run lint works.

However, I still see this message when I save my hooks and nothing more is shown to me:

[vite] hmr invalidate /src/Hooks/UseList.jsx Could not Fast Refresh. Learn more at https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#consistent-components-exports

What should I do to see what makes that HMR invalid?