Intellicode / eslint-plugin-react-native

React Native plugin for ESLint
MIT License
722 stars 130 forks source link

no-raw-text breaking eslint when nearby component has an inline function #307

Open SrBrahma opened 2 years ago

SrBrahma commented 2 years ago

I've managed to reduce the problem to the following:

// Just to check if eslint is alive, to get indent warn
  const a = 4;

const Q: React.FC<{p: (props: any) => React.ReactNode}> = (p) => {
  return <></>
}

export const F: React.FC = () => {
  return (
    <Q
      p={() => <></>}
    >
a
    </Q>
  );
};

Until that a is removed or /* eslint react-native/no-raw-text: 0 */ is added, the eslint will stop working for the entire file. No warns, no errors.

Looks like the problem comes from the inline function above. The error persists if p={() => 4}, but it's gone if p={4 as any}.

It doesn't happen if function x() {} and passing x to p.

It also happens even if the inline function isn't in the component wrapping the raw-text:

export const F: React.FC = () => {
  return (
    <View>
      a
      <View>
        <Q
          p={() => 4 as any}
          >
        </Q>
      </View>
    </View>
  );
};

So, if there is a component that contains an inline function and if no-raw-text rule is active and there is a raw-text in the same component, this error will happen.