Skip to content

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

Open
@ftzi

Description

@ftzi

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions