5

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"
3

1 Answer 1

0

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>
);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.