False positives in v0.4.4 about eslint-plugin-react-refresh HOT 12 OPEN

Yeah true that CONSTANT should not get a warning, I need to improve this.
I think it's better to have the warning on Example than ExampleNode3.

from eslint-plugin-react-refresh.

This is a valid warning. Because of the object export the Example component cannot be fast refresh and the update will propagate to all importers. This should be detected by the build tool. What tool are you using to bundle React in dev?

from eslint-plugin-react-refresh.

This is a valid warning. Because of the object export the Example component cannot be fast refresh and the update will propagate to all importers.

Shouldn't the warning be on ExampleNode3 or perhaps only Example in that case?

CONSTANT should not get a warning, and the warning seems to disappear if I add a _ to the variable name.

This should be detected by the build tool. What tool are you using to bundle React in dev?

Vite.

from eslint-plugin-react-refresh.

I just discovered your plugin and am also trying to understand how it works. The part that confuses me is that the error is not on the thing being exported. If I had export const Foo = {} // Some big crazy thing. then I'd understand why it's got an error on it - it shouldn't be exported. But in the above example the Example function is not exported so why is it problematic?

I'm using a pattern copied from Material UI (MUI) where there are often some const variables declared in the .tsx file for things like class names and a styled() version of a component. If seems that those are considered problematic, even when not directly exported.

Is the problem more when a .tsx defines things other than components? Or is it because they're indirectly exported within the component?

from eslint-plugin-react-refresh.

The rule is "A file that contain at least one react component should not export something else than React components".

Why? Because to Fast Refresh components, the JS modules (i.e. the file) should be re-executed in isolation, and if something is exported, the importers need to get the latest reference without being re-executed. Fast Refresh take cares of 'providing the latest reference' for components exports, but not other exports.

Some framework like Remix can inject more code in development to provide this for specific exports, but this cannot be done reliably for random objects.

Note: In bundled env, this may not be needed as much as in Vite, I didn't work with Webpack in a long time.

from eslint-plugin-react-refresh.

Thanks for the explanation, @ArnaudBarre . I would suggest you put it in the README, to make it more n00b friendly :)

So, if I understand this correctly, the problem is if a module

1. contains a 'component' (defined by some heuristic such as a function returning JSX, I assume?)
2. exports a non-component

Is this correct?

from eslint-plugin-react-refresh.

Yeah that's it. Both are based on heuristic which were improved on 0.4.4.
The heuristic for 1 is components is mostly functions returning with starting with an uppercase or result of a memo/forwardRef call.
The heuristic for 2 is name startsWith lower case or is clearly a not a component (object, array)

For making the readme more clear this is in my todo. I hope I will have time to craft a page for the official doc (react.dev), Fast Refresh is missing some official doc.

from eslint-plugin-react-refresh.