This issue relates to this one: #2349
The problem is that if I use memo or forwardRef (or both) and remove React import from file - prop types validation stops working. Here are examples:
working fine (import React exists, "'title' is missing in props validation" error showing):
const React = require('react');
const myComponent = React.memo(({ title }) => {
return (
<div title={title}>test</div>
);
});
myComponent.propTypes = {}
module.exports = myComponent;
not working fine (I removed React import):
const {memo} = require('react');
const myComponent = memo(({ title }) => {
return (
<div title={title}>test</div>
);
});
myComponent.propTypes = {}
module.exports = myComponent;
In theory each file that uses react components should import React object, but user may configure build system to import that object automatically on build stage to avoid typing boring import statements in each file (I did that in my project, React automatically resolves via webpack.ProvidePlugin, that's why I face this bug).
I think eslint should handle that situations properly, because "react/react-in-jsx-scope" rule works fine if React resolved via webpack.providePlugin (and "env": {"React": true} is set in eslint config).
While I'd suggest never using that to "avoid boring import statements" - explicit is always better than implicit - I agree it should work well.
Issue solved by #2706
There is already a test in other rule for this exact case: https://github.com/yannickcr/eslint-plugin-react/blob/e3e767bd041988d9acb7713874c0632c68408347/tests/lib/rules/no-multi-comp.js#L444
@ljharb
Most helpful comment
Issue solved by #2706
There is already a test in other rule for this exact case: https://github.com/yannickcr/eslint-plugin-react/blob/e3e767bd041988d9acb7713874c0632c68408347/tests/lib/rules/no-multi-comp.js#L444
@ljharb