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
– jonrsharpe, Commented Feb 22, 2020 at 18:37
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
– Michael Harley, Commented Feb 22, 2020 at 18:44
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
– Michael Harley, Commented Feb 22, 2020 at 18:52
Because the linter doesn't know that! Have you tried configuring the rule globally to ignore that name? — jonrsharpe
– jonrsharpe, Commented Feb 22, 2020 at 18:55
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
– worc, Commented Jun 12, 2020 at 16:55

Jackyef · Accepted Answer · 2021-04-01 07:18:05Z

1

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.

answered Apr 1, 2021 at 7:18

Jackyef

5,0421 gold badge21 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AdamHinckley Over a year ago

I tried adding the plugin and using the babel plugin and it didn't stop the 'jsx' is defined but never used warning from happening. Any other ideas or thoughts on what I might have overlooked?

Jackyef Over a year ago

Those kinds of warnings probably come from ESLint. Have you tried configuring ESLint to use emotion's provided ESLint plugin? Though if you are using the babel plugi already, you should be able to just remove the jsx import.

Michael Miller · Accepted Answer · 2021-06-01 22:43:57Z

1

Install Emotion's ESlint plugin
Add "@emotion" to the array of plugins in your .eslintrc file
Remove the jsx import from your src files
Double-check you have the correct linter config comment at the top of your file /** @jsx jsx */ vs /** @jsxImportSource @emotion/react */ emotion css prop docs
Restart your app server

edited Jun 1, 2021 at 22:43

answered Jun 1, 2021 at 22:04

Michael Miller

511 silver badge7 bronze badges

Comments

Michael Harley · Accepted Answer · 2024-04-06 06:19:29Z

I found this trick to fix the warning.

1. Add eslint and typescript-eslint dependencies

yarn add --dev @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint
// or if you use npm
npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint

2. Create .eslintrc file (change the config as needed)

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended"
  ],
  "rules": {
    "@typescript-eslint/no-unused-vars": [
      2,
      {
        "vars": "all",
        "args": "all",
        "varsIgnorePattern": "^jsx$",
        "argsIgnorePattern": "[Ii]gnored$"
      }
    ],
    "@typescript-eslint/no-use-before-define": "off",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-explicit-any": "off"
  }
}

3. Install Eslint Extension on VSCode This is useful to automatically run the eslint in your code editor (here).

4. Extend CRA's Eslint to Local Eslint (ref: here) Create .env file and add this line:

EXTEND_ESLINT=true

Now when you try to run yarn start or npm run start CRA will use your local ESLint to compile your script.

For more detailed information, feel free to read it on my Medium (here).

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related