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

• emotion 10.0.9:
• react 16.8.0:

Relevant code:

My entire .bablerc file.

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    "@babel/plugin-proposal-optional-chaining",
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
    "emotion",
    [
      "module-resolver",
      {
        "root": ["./"]
      }
    ],
    [
      "prismjs",
      {
        "languages": ["javascript", "css", "markup", "jsx"],
        "plugins": ["line-numbers"]
      }
    ],
    "react-loadable/babel"
  ]
}

What you did:

Just trying to get up and running. All of my other babel plugins and presets are working, so the .babelrc is being utilized correctly.

What happened:

Getting…

modules.js?hash=62fd6124b8e44fc05a98c40a20d419b909b3355e:3295 Uncaught Error: Component selectors can only be used in conjunction with babel-plugin-emotion.
    at handleInterpolation (modules.js?hash=62fd6124b8e44fc05a98c40a20d419b909b3355e:3295)
    at Object.serializeStyles (modules.js?hash=62fd6124b8e44fc05a98c40a20d419b909b3355e:3442)
    at modules.js?hash=62fd6124b8e44fc05a98c40a20d419b909b3355e:1422
    at updateContextConsumer (modules.js?hash=62fd6124b8e44fc05a98c40a20d419b909b3355e:27158)
    at beginWork (modules.js?hash=62fd6124b8e44fc05a98c40a20d419b909b3355e:27346)
    at performUnitOfWork (modules.js?hash=62fd6124b8e44fc05a98c40a20d419b909b3355e:30986)
    at workLoop (modules.js?hash=62fd6124b8e44fc05a98c40a20d419b909b3355e:31026)
    at renderRoot (modules.js?hash=62fd6124b8e44fc05a98c40a20d419b909b3355e:31109)
    at performWorkOnRoot (modules.js?hash=62fd6124b8e44fc05a98c40a20d419b909b3355e:32016)
    at performWork (modules.js?hash=62fd6124b8e44fc05a98c40a20d419b909b3355e:31928)

Reproduction:

Problem description:

Not sure what I’m doing wrong here. babel-plugin-emotion is installed, in my babelrc, but I’m still getting this error. No ideas what else to try here.

[brettinternet]

I hope this contributes to the discussion: I have found a similar issue with a Typescript project where I exported styled from a utility layer with a typed theme, as shown in the Typescript documentation example. Then, using import styled from 'utils/styled' I’d see this error when using nested component selectors, despite using the babel plugin. The macro didn’t work for me either.

Uncaught Error: Component selectors can only be used in conjunction with babel-plugin-emotion.

I ended up having to use a direct import as import styled from '@emotion/styled', which is an unfortunate workaround.

[stolinski]

Yeah, that’s the tough part. I’m not sure why this plugin would differ from other babel plugins used in the app, including styled components. I can’t imagine this is Meteor’s doing specifically, but it seems like a tough thing to nail down what exactly is going on here. I’m only seeing this error when attempting to reference another component.

const Card = styled.article`
  &:hover {
    ${Background} {
      transform: scale(1.1);
    } 
  }
`;