eslint-plugin-react-native icon indicating copy to clipboard operation
eslint-plugin-react-native copied to clipboard

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

Open ftzi opened this issue 3 years ago • 0 comments

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.

ftzi avatar Jan 19 '22 07:01 ftzi