When 'no-undef' is enabled in eslint, custom props passed in styled components returns no-undef

[atalie1922]

Hi,

I am running eslint in react that is using styled components. When passing custom props in styled components eslint displays warning output even though typescript does not report any errors.

warn output
'isActive' is not defined 'no-undef

Here is my sample code,

    import React from 'react';
    import styled from 'styled-components';

     const Title= styled.div<{ isActive: boolean }>`${({ isActive}) => isActive && 'color: blue;'}`;


     interface IFunctionName{ active:boolean }

     const FunctionName: React.FC<IFunctionName> = ({ active }) => 
           (<div><Title isActive={active}> test </Title></div>)

[mdjermanovic]

Hi @atalie-delacruz!

Are you using @typescript-eslint/parser, and do you have the latest version installed? In that case, can you open an issue in https://github.com/typescript-eslint/typescript-eslint repository?

The no-undef rule is based on the scope analysis, which is provided by parsers. If it seems that this rule doesn't work as expected, then it's almost certainly an issue with the parser.

[atalie1922]

Hi, yes I am currently using @typescript-eslint/parser version 4.10. Will try to update to latest and if it occurs again will open this issue on the provided github repository link. thank you.