emotion-js on Create React App - 'jsx' is defined but never used

Question

So I tried to use emotion-js for the first time and get hooked by the css prop feature.

While trying what the documentation says I get a warning from the eslint.

'jsx' is defined but never used @typescript-eslint/no-unused-vars

The script that I use looks like this.

import React from "react";
//** @jsx jsx */
import { jsx } from "@emotion/core";

export const Component = () => {
    return (
        <div css={{color: red}}>
            This is a component
        </div>
    )
}

I'm using VSCode, so I can see that this import is tagged as never used. (Has transparent color)

But I did use it for my div, and if I remove the import, my css prop is showing an error.

Please help as to how to avoid this eslint warning, or at least make the VSCode recognize that jsx is being used.

Thanks!

Edit: (Adding reference)

Reference: https://emotion.sh/docs/css-prop#jsx-pragma

Edit 2: I tried adding .eslintrc file that looked like this

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": ["plugin:@typescript-eslint/recommended"],
  "rules": {
    "@typescript-eslint/no-unused-vars": [
      2,
      { "vars": "all", "args": "all", "varsIgnorePattern": "^jsx$" }
    ]
  }
}

Still get the warning, did I do it wrong?

jsx is being used, probably by babeljs.io/docs/en/babel-plugin-transform-react-jsx — jonrsharpe
But why is my typescript-eslint sends this warning? It doesn't seem like it recognize that jsx is being used. This jsx warnings will be disturbing when my project is becoming bigger. :s — Michael Harley
This can be easily fixed by adding // eslint-disable-next-line, but does anyone has a better solution? Maybe to get this jsx import to be recignized as being used by the css prop? — Michael Harley
Because the linter doesn't know that! Have you tried configuring the rule globally to ignore that name? — jonrsharpe
it might be the spelling on the comment, i've only gotten it to work with /* @jsx jsx */ or /** @jsx jsx */ with a single leading slash — worc

Jackyef Jackyef · Accepted Answer · 2021-04-01T07:18:05

Emotion provides its own eslint plugin that should handle this automatically for you.

Another approach is to use emotion's babel plugin to automatically add the jsx import and jsx pragma comment automatically at compile time. This way, you no longer need to add them in each of your file.

emotion-js on Create React App - 'jsx' is defined but never used

2 Answers