CODEWITHSUNDEEP
reactjseslintemotiontypescript-eslint
Michael Harley
Michael Harley

Reputation: 1048

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

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)

The jsx import is transparent (Never used)

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?

Upvotes: 9

Views: 2725

Answers (3)

Michael Harley
Michael Harley

Reputation: 1048

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

Upvotes: 0

Michael Miller
Michael Miller

Reputation: 51

  • 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

Upvotes: 1

Jackyef
Jackyef

Reputation: 5012

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.

Upvotes: 1

Related Questions