Using @emotion/babel-preset-css-prop causes "(!) Unused external imports"

Current behavior:

I am running into an issue where having @emotion/babel-preset-css-prop listed in my Babel presets is causing a warning from Rollup that says:

(!) Unused external imports
default imported from external module 'react' but never used

When I go into the output bundled JS file, I do see the below code which I believe is the culprit:

var jsxRuntime = require('@emotion/react/jsx-runtime');
require('react');

I have tried different Babel config settings as well as following this comment that mentions to remove @emotion/babel-preset-css-prop and change the config of preset-react instead, but it didn’t seem to help.

To reproduce:

Here are my config files for Rollup and Babel, as well as the full list of my npm dependencies:

****:

babel.config.js

module.exports = (api) => {
  api.cache(true);
  return {
    presets: ['@babel/preset-typescript', '@babel/preset-react', '@babel/preset-env', '@emotion/babel-preset-css-prop'],
    plugins: ['@emotion'],
    ignore: ['**/*.test.ts', '**/*.test.tsx', '**/*.stories.tsx'],
  };
};

rollup.config.js

import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import packageJson from './package.json';

const extensions = ['.js', '.jsx', '.es6', '.es', '.mjs', '.ts', '.tsx'];

export default {
  input: 'src/index.ts',
  output: [
    {
      file: packageJson.main,
      format: 'cjs',
      sourcemap: true,
    },
    {
      file: packageJson.module,
      format: 'esm',
      sourcemap: true,
    },
  ],
  plugins: [
    peerDepsExternal(),
    resolve({
      extensions,
    }),
    commonjs(),
    babel({
      extensions,
      babelHelpers: 'bundled',
    }),
  ],
};

package.json

{
  "name": "my-pkg",
  "version": "1.0.0",
  "files": [
    "dist"
  ],
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "clean": "rm -rf dist build",
    "build": "npm run build:js && npm run build:types",
    "build:js": "rollup -c",
    "build:types": "tsc",
    "lint": "prettier --check '**/*' && eslint '**/*'",
    "typecheck": "tsc --noEmit",
    "format": "prettier --write '**/*' && eslint --fix '**/*'",
    "pretest": "npm run lint",
    "test": "jest",
    "test:watch": "jest --watch",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook -o build/brazil-documentation",
    "prepublishOnly": "npm run format && npm run build && npm run build-storybook"
  },
  "dependencies": {},
  "peerDependencies": {
    "@emotion/react": "^11.1.2",
    "react": "^16.8",
    "react-dom": "^16.8"
  },
  "devDependencies": {
    "@babel/cli": "^7.12.10",
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.10",
    "@babel/preset-react": "^7.12.10",
    "@babel/preset-typescript": "^7.12.7",
    "@emotion/babel-plugin": "^11.1.2",
    "@emotion/babel-preset-css-prop": "^11.0.0",
    "@emotion/eslint-plugin": "^11.0.0",
    "@emotion/react": "^11.1.2",
    "@rollup/plugin-babel": "^5.2.2",
    "@rollup/plugin-commonjs": "^17.0.0",
    "@rollup/plugin-node-resolve": "^11.0.1",
    "@storybook/addon-actions": "^6.1.11",
    "@storybook/addon-essentials": "^6.1.11",
    "@storybook/addon-links": "^6.1.11",
    "@storybook/react": "^6.1.11",
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/react-hooks": "^3.7.0",
    "@testing-library/user-event": "^12.6.0",
    "@types/jest": "^26.0.19",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@typescript-eslint/eslint-plugin": "^4.9.1",
    "@typescript-eslint/parser": "^4.9.1",
    "eslint": "^7.15.0",
    "eslint-config-prettier": "^7.0.0",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^26.6.3",
    "prettier": "^2.2.1",
    "react": "^16.8",
    "react-dom": "^16.8",
    "rollup": "^2.35.1",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "storybook-addon-jsx": "^7.3.4",
    "ts-jest": "^26.4.4",
    "typescript": "^4.1.3"
  }
}

When I remove the @emotion/babel-preset-css-prop preset from my babel config, I no longer get that error – so I am sure that it is definitely the culprit. I am just unsure if this is a bug or if there is some extra config I should be doing.

Expected behavior:

There should not be an unused import added by the Emotion babel preset.

Environment information:

• react version: 16.8
• @emotion/react version: 11.1.2

[Andarist]

If u want to make it work with TS then:

1. If u want to keep using the classic runtime then its best to stick to @jsx pragma approach
2. If u dont like the pragma approach and u can switch to the automatic runtime then this is the preferred way now. I believe there are instructions on how this can be done in our TypeScript section of the docs

[saadq]

I believe that you have forgotten to add usage of @emotion/babel-preset-css-prop there.

Yeah, sorry I had removed it with the second part of the repro instructions and forgot to add it back

Either way - by using this preset you are changing what function is used to handle JSX instead of the default React.createElement. So your Button no longer needs import ‘react’ (it stays unused).

Ah okay, that makes sense… I had tried that originally but it led to a lot of TS issues so I had figured it wasn’t the correct approach. I think I may try using some other jsx: settings in my tsconfig to see if I can get it to work. Either way, it looks like it isn’t an issue with Emotion so I will close. Thanks for the quick responses.