Component selectors can only be used in conjunction

Hello following the docs to use the styled, but I got the following error:

Component selectors can only be used in conjunction with babel-plugin-emotion

code:

import styled from '@emotion/styled';
import { flexCenter, mxw80, flex, flexAlignCenter } from '../../globals/flex';
export const IconContainer = styled.div``;
export const SearchContainer = styled.div`
  display: inline-flex;
  align-items: center;
  flex: 0 1 350px;
  border: 1px solid #ccc;
  border-radius: 25px;
  overflow: hidden;
  height: 55px;
  background: white;
  ${IconContainer} {
    ${flexAlignCenter}
    width: 50px;
    padding: 0.5rem;
    height: 100%;
  }
  & > input {
    width: calc(100% - 50px);
    height: 100%;
    border: 0;
    padding: 0.5rem 0.5rem 0.5rem 0;
    outline: none;
  }
`;

jsx:

      <SearchContainer>
        <IconContainer>
          <FontAwesomeIcon
            className="searchIcon"
            icon={faSearch}
            size="lg"
            fixedWidth
            color="#1976d2"
          />
        </IconContainer>
        <input></input>
      </SearchContainer>

.babelrc:

{
  "plugins": [
    [
      "emotion",
      {
        // sourceMap is on by default but source maps are dead code eliminated in production
        "sourceMap": true,
        "autoLabel": process.env.NODE_ENV !== "production",
        "labelFormat": "[local]",
        "cssPropOptimization": true
      }
    ]
  ],
  "presets": [
    [
      "@emotion/babel-preset-css-prop",
      {
        "autoLabel": true,
        "labelFormat": "[local]"
      }
    ]
  ]
}

I looked for this error and found no solution

[Andarist]

This codesandbox is using Create React App template and you can’t customize babel plugins with that. This is, by design, not allowed when using CRA.

However they support Babel macros and we provide one, so if you make this change:

-import styled from "@emotion/styled";
+import styled from "@emotion/styled/macro";

This starts to work as expected.

[rarenatoe]

using @emotion/styled/macro throws me the following eslint error:

./node_modules/import-fresh/node_modules/resolve-from/index.js
Module not found: Can't resolve 'module' in '/Users/.../Documents/BVDash/bvdash-web/node_modules/import-fresh/node_modules/resolve-from'