StyledComponents + Typescript

Question

I'm having strange issue with eslint in react app + typescript. I am using styled components and I need to create custom props interface for my component, I followed documentation and when I write it like example in docs I get this eslint error? Anyone knows what's going on here?

*eslint gives error here StyledMenuButtonProps is defined but never used*
interface StyledMenuButtonProps {
  opened: boolean;
}

*and here the error is StyledMenuButtonProps is not defined*
const StyledMenuButtonWrapper = styled.div<StyledMenuButtonProps>`
  width: 40px;
  height: 20px;
  position: relative;
  margin: 0 20px;

My .eslintrc.js file:

module.exports = {
  env: {
    browser: true,
    es2020: true,
  },
  extends: ['plugin:react/recommended', 'airbnb', 'prettier'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint', 'prettier'],
  rules: {
    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
    'react/prop-types': 'off',
    'no-unused-vars': 2,
    '@typescript-eslint/ban-types': 'off',
    '@typescript-eslint/explicit-function-return-type': [0],
    'no-use-before-define': 'off',
    'import/prefer-default-export': 'off',
    'import/no-default-export': 'error',
    'import/no-unresolved': 'off',
    'import/extensions': 'off',
    'consistent-return': 'off',
  },
  settings: {
    react: {
      version: 'detect',
    },
    'import/resolver': {
      node: {
        extensions: ['.ts', '.tsx', '.js', '.jsx'],
      },
    },
  },
};

devDependencies for eslint:

"@typescript-eslint/eslint-plugin": "^4.17.0",
"@typescript-eslint/parser": "^4.17.0",
"eslint": "^7.21.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",

Using latest CRA and React Scripts.

Thanks

Instead of sharing a picture of your code, could you edit your question to include the code snippet you shared? — Yves Gurcan, Mar 09 '21 at 21:22
It would be also great if you shared your current linters configuration file — chuve, Mar 10 '21 at 17:21

score 0 · Answer 1 · answered Mar 10 '21 at 17:44

0

this question was answered for example here: https://stackoverflow.com/a/55439681/10490197 :)

Basically, you are using rules that can't understand TypeScript properly so you need to fix it with:

"rules": {
  "no-unused-vars": "off",
  "@typescript-eslint/no-unused-vars": "error"
}

answered Mar 10 '21 at 17:44

Iraminius

1
1

Added this to my rules object, but still my code is yelling eslint error on styled component: StyledMenuButtonProps is not defined, even if its defined right above – Kristijan Mar 10 '21 at 19:09

StyledComponents + Typescript

1 Answers1