You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I am using the latest Vite for building a React app in which I have a PostsContext.jsx file that exports a custom context provider (component) PostsProvider and custom hook usePosts as named exports:
export {PostsProvider, usePosts}
So this react-refresh eslint plugin immediately warns about exporting multiple values (component and hook in this case).
warning Fast refresh only works when a file only exports components.
Use a new file to share constants or functions between components
Unfortunately I cannot move each export to a separate file, it defeats the purpose of having a custom module PostsContext.jsx created specifically as container for all things related to this PostsContext.
I would like for the warning to stop bugging me during development, but I don't want the HMR / Fast Refresh feature to break to the point of crashing as per jsx-eslint/eslint-plugin-react#3176
The relevant parts in .eslintrc.cjs config file look like this:
Is there an explanation for what I'm missing here? eslint-plugin-react-refresh doesn't document turning on/off warnings or errors and does not give detailed explanations on proper usage. Can you please let me know how to handle this issue? Merci beaucoup!
The text was updated successfully, but these errors were encountered:
Yeah some docs are missing, but more from for React as a whole than Vite or this plugin. For now the only official doc is on the RN doc: https://reactnative.dev/docs/fast-refresh
Applying this to context providers means that you need to split the context creation and and the context provider in two files (that I put into one folder). This is a bit less nice but to be able to fast refresh providers is nice and it doesn't cost that much to split. And more and more I use zustand stores instead of React context.
@ArnaudBarre Thank you for your response! The best I could do was to split the file into index.js (exporting the context and the custom hook for 'using' it) and PostsProvider.jsx (exporting only the component) under the same directory PostsContext - this is good enough and fast refresh works as intended, vite doesn't complain.
I am using the latest Vite for building a React app in which I have a
PostsContext.jsx
file that exports a custom context provider (component)PostsProvider
and custom hookusePosts
as named exports:So this react-refresh eslint plugin immediately warns about exporting multiple values (component and hook in this case).
Unfortunately I cannot move each export to a separate file, it defeats the purpose of having a custom module
PostsContext.jsx
created specifically as container for all things related to this PostsContext.I would like for the warning to stop bugging me during development, but I don't want the HMR / Fast Refresh feature to break to the point of crashing as per jsx-eslint/eslint-plugin-react#3176
The relevant parts in
.eslintrc.cjs
config file look like this:Is there an explanation for what I'm missing here?
eslint-plugin-react-refresh
doesn't document turning on/off warnings or errors and does not give detailed explanations on proper usage. Can you please let me know how to handle this issue? Merci beaucoup!The text was updated successfully, but these errors were encountered: