简体   繁体   中英

ESLint: 'React' is defined but never used.(no-unused-vars) when using JSX pragma

How do I stop eslint throwing an error when I use the jsx pragma.

I'm using the airbnb config and I've tried adding "react/jsx-uses-react": 1, as a rule which hasn't worked.

Do I need to include plugin:react/recommended in the extends when using the airbnb?

.eslintrc.js

  extends: [
    "airbnb",
    "airbnb/hooks",
    "plugin:react-redux/recommended",
    "plugin:prettier/recommended",
    "prettier/react",
  ],
  settings: {
    react: {
      version: "detect",
    },
  },
  plugins: ["emotion", "graphql", "prettier", "react-redux"],
  rules: {
    "emotion/jsx-import": "error",
    "emotion/no-vanilla": "error",
    "emotion/import-from-emotion": "error",
    "emotion/styled-import": "error",
    "react/jsx-filename-extension": [1, { extensions: [".js", ".jsx"] }],
    "graphql/template-strings": [
      `error`,
      {
        env: `relay`,
        tagName: `graphql`,
      },
    ],
  },

layout.js

/* ESLint: 'React' is defined but never used.(no-unused-vars) */
import React from "react" 
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"

/** @jsx jsx */
import { Global, css, jsx } from "@emotion/core"
import { ThemeProvider } from "emotion-theming"

I had a similar problem exporting only a styled component. I wrapped it in <React.Fragment> and exported that instead.

Before:

import React from 'react';
import styled from '@emotion/styled';

export const LabelText = styled.span`
  font-size: 0.75em;
  font-weight: 500;
`;

After:

import React from 'react';
import styled from '@emotion/styled';

const StyledSpan = styled.span`
  font-size: 0.75em;
  font-weight: 500;
`;

export const LabelText = ({ children }) => (
  <React.Fragment>
    <StyledSpan>{children}</StyledSpan>
  </React.Fragment>
);

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM