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.