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

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


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.


  • 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