Theme-ui: [gatsby-plugin-theme-ui] jsx pragma breaks React import ESLint linting

[ekafyi]

When I use the /** @jsx jsx */ pragma in my component files, the React import line (import React from "react") is marked as no-unused-vars error by ESLint.

/** @jsx jsx */
import React from "react"; // this is now marked as error
import { Styled, jsx } from "theme-ui";

Without the custom jsx pragma, this error can be turned off by setting "react/jsx-uses-react": "off" in .eslintrc rules. With the jsx pragma, any combination of ESLint rules and settings can't seem to get rid of the error.

For now, I disable the rule in each file, but ideally I would like to fix it in the ESLint settings.

/** @jsx jsx */
// eslint-disable-next-line no-unused-vars
import React from "react"; 
import { Styled, jsx } from "theme-ui";

Would appreciate any help.

Thanks!

[jxnblk]

Unless you're using React or the <> fragment syntax, you don't need to import react when using the Theme UI pragma comment. If you are using the <> syntax, the only way I've found to suppress the lint warning is to use <React.Fragment> instead

[ekafyi]

I totally did not realize that!! 😮

I'd like to maintain as much semblance to regular React components as possible to make it friendlier for folks unfamiliar with pragma so I still feel conflicted. But that's another thing altogether.

Closing the issue now, thanks for the response!

[LekoArts]

You could also add React to this pattern here: https://eslint.org/docs/rules/no-unused-vars#varsignorepattern

[ekafyi]

I think i'm going to use this one, thanks so much @LekoArts!