Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
SrBrahma opened this issue Jan 19, 2022 · 0 comments
Open

Comments

@SrBrahma
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant