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

Created on 8 Apr 2019  路  37Comments  路  Source: emotion-js/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.

picture stolinski

Most helpful comment

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.

picture brettinternet on 4 Nov 2019
👍9

All 37 comments

I tried to create a reproduction of this here https://github.com/tkh44/plugin-help-thing. (npm i && npm run start)

Everything was working. I was trying to reduce the problem space a bit. I'm not sure how Meteor fits into here. I didn't see the jsx plugin (react-preset) in your babelrc so I didn't use it in the reproduction repo. Maybe just having some sort of reference to compare with your dependencies and imports may help.

tkh44 picture tkh44 on 9 Apr 2019

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);
    } 
  }
`;
stolinski picture stolinski on 9 Apr 2019

What do your package.json dependencies look like?

tkh44 picture tkh44 on 9 Apr 2019 
{

  "dependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/runtime": "^7.4.2",
    "@progress/kendo-drawing": "^1.5.7",
    "@progress/kendo-react-pdf": "^2.5.0",
    "apollo-cache-inmemory": "^1.3.12",
    "apollo-client": "^2.5.1",
    "apollo-engine": "^1.1.2",
    "apollo-link": "^1.2.6",
    "apollo-link-http": "^1.5.9",
    "apollo-link-schema": "^1.1.4",
    "apollo-server-express": "^2.3.1",
    "apollo-test-utils": "^0.3.2",
    "aws-sdk": "^2.381.0",
    "babel-polyfill": "^6.26.0",
    "bcrypt": "^3.0.5",
    "body-parser": "^1.18.3",
    "braintree": "^2.14.0",
    "braintree-web": "^3.41.0",
    "date-fns": "^1.30.1",
    "eazy-ease": "^1.0.2",
    "express": "^4.16.3",
    "formol": "^2.5.9",
    "graphql": "^14.0.2",
    "graphql-tag": "^2.10.0",
    "graphql-tools": "^4.0.3",
    "isomorphic-fetch": "^2.2.1",
    "js-cookie": "^2.2.0",
    "lodash": "^4.17.11",
    "logrocket": "^0.6.19",
    "markdown-to-jsx": "^6.8.4",
    "marked": "^0.5.2",
    "meteor-node-stubs": "^0.4.1",
    "mustache": "^3.0.1",
    "paypal-rest-sdk": "^2.0.0-rc.1",
    "picturefill": "^3.0.2",
    "prismjs": "^1.15.0",
    "prop-types": "^15.6.2",
    "raven": "^2.6.4",
    "raven-js": "^3.27.0",
    "react": "^16.8.0",
    "react-addons-test-utils": "^15.6.2",
    "react-addons-transition-group": "^15.6.2",
    "react-addons-update": "^15.6.2",
    "react-apollo": "^2.5.2",
    "react-async-script-loader": "^0.3.0",
    "react-autocomplete": "^1.8.1",
    "react-beautiful-dnd": "^10.0.3",
    "react-braintree-fields": "^1.1.0",
    "react-color": "^2.17.0",
    "react-confetti": "^2.3.0",
    "react-dom": "^16.8.0",
    "react-dropzone": "^5.1.0",
    "react-helmet": "^5.2.0",
    "react-inlinesvg": "^0.8.1",
    "react-lazyload": "^2.3.0",
    "react-loadable": "git+https://github.com/CaptainN/react-loadable.git",
    "react-month-picker-input": "^1.1.6",
    "react-render-html": "^0.6.0",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-router-prop-types": "1.0.4",
    "react-spring": "^8.0.18",
    "react-tagsinput": "^3.19.0",
    "react-toggle-switch": "^3.0.4",
    "react-transition-group": "^2.5.2",
    "react-tweet-embed": "^1.1.1",
    "react-waypoint": "^8.1.0",
    "react-youtube-player": "^2.0.1",
    "resize-observer-polyfill": "^1.5.1",
    "simpl-schema": "^1.5.3",
    "speakingurl": "^14.0.1",
    "stream-collect": "^2.1.3",
    "stripe": "^6.20.0",
    "styled-components": "4.1.3",
    "styled-components-modifiers": "^1.1.0",
    "url-search-params-polyfill": "^5.0.0",
    "victory": "^31.0.2",
    "youtube-player": "^5.5.1"
  },
  "devDependencies": {
    "@babel/helper-plugin-utils": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "7.2.3",
    "@babel/plugin-proposal-object-rest-spread": "7.2.0",
    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
    "@babel/plugin-transform-runtime": "7.2.0",
    "@babel/preset-env": "7.2.3",
    "@babel/preset-react": "7.0.0",
    "autoprefixer": "^9.4.3",
    "babel-core": "^7.0.0-0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "babel-loader": "^8.0.4",
    "babel-plugin-dynamic-import-node": "^2.1.0",
    "babel-plugin-inline-import": "^3.0.0",
    "babel-plugin-inline-import-graphql-ast": "^2.4.1",
    "babel-plugin-module-resolver": "^3.1.1",
    "babel-plugin-prismjs": "^1.0.2",
    "babel-plugin-styled-components": "^1.10.0",
    "babel-runtime": "^6.26.0",
    "chromedriver": "^2.45.0",
    "core-js": "^2.6.1",
    "cypress": "^3.1.4",
    "eslint": "^5.11.1",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^3.3.0",
    "eslint-import-resolver-meteor": "^0.4.0",
    "eslint-loader": "^2.1.1",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-graphql": "^3.0.1",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-meteor": "^5.1.0",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-react": "^7.12.0",
    "eslint-plugin-react-hooks": "^1.4.0",
    "jest": "^23.6.0",
    "jest-dom": "^3.0.0",
    "jest-meteor-stubs": "^1.5.1",
    "prettier": "^1.15.2",
    "react-test-renderer": "^16.7.0",
    "react-testing-library": "^6.0.3",
    "regenerator-runtime": "^0.13.1"
  }
}
stolinski picture stolinski on 9 Apr 2019

Maybe that's a previous version? I don't see any mention of emotion in there.

tkh44 picture tkh44 on 9 Apr 2019

Blah. Wrong branch.

"dependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/runtime": "^7.4.2",
    "@emotion/core": "^10.0.9",
    "@emotion/styled": "^10.0.10",
    "@progress/kendo-drawing": "^1.5.7",
    "@progress/kendo-react-pdf": "^2.5.0",
    "apollo-cache-inmemory": "^1.3.12",
    "apollo-client": "^2.5.1",
    "apollo-engine": "^1.1.2",
    "apollo-link": "^1.2.6",
    "apollo-link-http": "^1.5.9",
    "apollo-link-schema": "^1.1.4",
    "apollo-server-express": "^2.3.1",
    "apollo-test-utils": "^0.3.2",
    "aws-sdk": "^2.381.0",
    "babel-polyfill": "^6.26.0",
    "bcrypt": "^3.0.5",
    "body-parser": "^1.18.3",
    "braintree": "^2.14.0",
    "braintree-web": "^3.41.0",
    "date-fns": "^1.30.1",
    "eazy-ease": "^1.0.2",
    "express": "^4.16.3",
    "graphql": "^14.0.2",
    "graphql-tag": "^2.10.0",
    "graphql-tools": "^4.0.3",
    "isomorphic-fetch": "^2.2.1",
    "js-cookie": "^2.2.0",
    "lodash": "^4.17.11",
    "logrocket": "^0.6.19",
    "markdown-to-jsx": "^6.8.4",
    "marked": "^0.5.2",
    "meteor-node-stubs": "^0.4.1",
    "mustache": "^3.0.1",
    "paypal-rest-sdk": "^2.0.0-rc.1",
    "picturefill": "^3.0.2",
    "prismjs": "^1.15.0",
    "prop-types": "^15.6.2",
    "raven": "^2.6.4",
    "raven-js": "^3.27.0",
    "react": "^16.8.0",
    "react-addons-test-utils": "^15.6.2",
    "react-addons-transition-group": "^15.6.2",
    "react-addons-update": "^15.6.2",
    "react-apollo": "^2.5.2",
    "react-async-script-loader": "^0.3.0",
    "react-autocomplete": "^1.8.1",
    "react-beautiful-dnd": "^10.0.3",
    "react-braintree-fields": "^1.1.0",
    "react-color": "^2.17.0",
    "react-confetti": "^2.3.0",
    "react-dom": "^16.8.0",
    "react-dropzone": "^5.1.0",
    "react-helmet": "^5.2.0",
    "react-inlinesvg": "^0.8.1",
    "react-lazyload": "^2.3.0",
    "react-loadable": "git+https://github.com/CaptainN/react-loadable.git",
    "react-month-picker-input": "^1.1.6",
    "react-render-html": "^0.6.0",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-router-prop-types": "1.0.4",
    "react-spring": "^8.0.18",
    "react-tagsinput": "^3.19.0",
    "react-toggle-switch": "^3.0.4",
    "react-transition-group": "^2.5.2",
    "react-tweet-embed": "^1.1.1",
    "react-waypoint": "^8.1.0",
    "react-youtube-player": "^2.0.1",
    "resize-observer-polyfill": "^1.5.1",
    "simpl-schema": "^1.5.3",
    "speakingurl": "^14.0.1",
    "stream-collect": "^2.1.3",
    "stripe": "^6.20.0",
    "url-search-params-polyfill": "^5.0.0",
    "victory": "^31.0.2",
    "youtube-player": "^5.5.1"
  },
  "devDependencies": {
    "@babel/helper-plugin-utils": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "7.2.3",
    "@babel/plugin-proposal-object-rest-spread": "7.2.0",
    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
    "@babel/plugin-transform-runtime": "7.2.0",
    "@babel/preset-env": "7.2.3",
    "@babel/preset-react": "7.0.0",
    "autoprefixer": "^9.4.3",
    "babel-core": "^7.0.0-0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "babel-loader": "^8.0.4",
    "babel-plugin-dynamic-import-node": "^2.1.0",
    "babel-plugin-emotion": "^10.0.9",
    "babel-plugin-inline-import": "^3.0.0",
    "babel-plugin-inline-import-graphql-ast": "^2.4.1",
    "babel-plugin-module-resolver": "^3.1.1",
    "babel-plugin-prismjs": "^1.0.2",
    "babel-runtime": "^6.26.0",
    "chromedriver": "^2.45.0",
    "core-js": "^2.6.1",
    "cypress": "^3.1.4",
    "eslint": "^5.11.1",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^3.3.0",
    "eslint-import-resolver-meteor": "^0.4.0",
    "eslint-loader": "^2.1.1",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-graphql": "^3.0.1",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-meteor": "^5.1.0",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-react": "^7.12.0",
    "eslint-plugin-react-hooks": "^1.4.0",
    "jest": "^23.6.0",
    "jest-dom": "^3.0.0",
    "jest-meteor-stubs": "^1.5.1",
    "prettier": "^1.15.2",
    "react-test-renderer": "^16.7.0",
    "react-testing-library": "^6.0.3",
    "regenerator-runtime": "^0.13.1"
  },
stolinski picture stolinski on 9 Apr 2019

What does you babelrc look like on this branch with all of these plugins?

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

You're not using jsx? Do you have some babel config in your package.json?

tkh44 picture tkh44 on 9 Apr 2019

I am using jsx. Only other babel config exists for jest specifically.

stolinski picture stolinski on 9 Apr 2019

I'm kind of confused because you don't have @babel/preset-react anywhere in that babelrc so if you were to use jsx it would error. This makes me think that babel is being configured for React/jsx somewhere else in your project.

tkh44 picture tkh44 on 9 Apr 2019

There is no other babel config. Regardless, throwing the styled components babel plugin in this exact same config worked without issue along with any others that I have here. This is the first time a babel plugin hasn't been recognized in this project & babelrc file. It's a bummer that the emotion plugin isn't being picked up. Thanks for your help.

stolinski picture stolinski on 10 Apr 2019

I'm wondering if you hit this issue: https://github.com/emotion-js/emotion/issues/1203

If so that makes more sense than the plugin just not working.

tkh44 picture tkh44 on 11 Apr 2019

@tkh44 I'm facing the same problem as the author, and I also tried the solution given in #1203, but it doesn't fix.

hueitan picture hueitan on 26 Sep 2019

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.

brettinternet picture brettinternet on 4 Nov 2019
👍9

@brettinternet thanks for the feedback. Custom styleds etc are currently not handled by our plugin - this will get fixed by https://github.com/emotion-js/emotion/pull/1220 this month though, so stay tuned!

Andarist picture Andarist on 4 Nov 2019
👍3

@Andarist @brettinternet With which version is this problem fixed?
I'm still facing the same issue when using a themed styled version of emotion.
I'm using: 

    "@emotion/core": "^10.0.27",
    "@emotion/styled": "^10.0.27",
    "emotion": "^10.0.27",
    "babel-plugin-emotion": "^10.0.27",

And when I use a nested selector I get the same error as: 

  Uncaught Error: Component selectors can only be used in conjunction with babel-plugin-emotion.
loweisz picture loweisz on 3 Jan 2020

As far as I know this has never been broken. Could you prepare a repro case? I could take a look then.

EDIT:// sorry, I thought this was other thread. Are you using custom styled instance? Reexported from your file/module?

Andarist picture Andarist on 3 Jan 2020

@Andarist Yes this is what I am using

loweisz picture loweisz on 3 Jan 2020

So support for this within a babel plugin has been added in https://github.com/emotion-js/emotion/pull/1220 . I'm afraid though that it's going to be a part of the upcoming v11 release, we don't have time to backport this to v10. I encourage you to try out the v11 though, it doesn't have many breaking changes - it's mostly just cleanup, hooks, and TS types rework.

Andarist picture Andarist on 3 Jan 2020

@Andarist How do I use the CreateStyled then or inject my Theme Interface? As CreateStyled is not generic anymore in emotion V11

JonathanCallewaert picture JonathanCallewaert on 6 Jan 2020

@JonathanCa97 https://github.com/emotion-js/emotion/blob/31e610f2385d5a3dfd532b31f743e5f6b9fee43b/docs/typescript.mdx#define-a-theme

Andarist picture Andarist on 6 Jan 2020
👍1

thx!!

JonathanCallewaert picture JonathanCallewaert on 6 Jan 2020

I also have this error. I installed the plugin and add it to my .babelrc and it still shows the Error: Component selectors can only be used in conjunction with babel-plugin-emotion. error. Has there been a fix for this?

AlexanderMelox picture AlexanderMelox on 16 Jun 2020

@AlexanderMelox there is no issue to be fixed, you most likely have not configured things correctly. Could you share a runnable repro case of your problem?

Andarist picture Andarist on 16 Jun 2020

I just converted back to SASS files. I literally just did these steps.
I am using create-react-app and downloaded @emotion/styled and @emotion/core.

  1. I tried doing something like this
const Parent = styled.div`
...
`;

const Child = styled.div`
    ${Parent}:hover & {
         opacity: 1
    }
`;
  1. Then I got the error so I proceed to install the emotion babel plugin and added it to my plugins in my .babelrc

Still didn't fix my problem. I tried even ejecting react and still didn't work.

AlexanderMelox picture AlexanderMelox on 18 Jun 2020

Can't tell you what you have done incorrectly if you don't share a repro case.

Andarist picture Andarist on 18 Jun 2020

@Andarist Here is a codesandbox of what I'm trying to do.

https://codesandbox.io/s/musing-snow-wzero?file=/src/App.js

I'm trying to get access to the parent component when it's hovered to do something in the child component. And still get the error after installing the babel-plugin-emotion and adding it to the .babelrc

AlexanderMelox picture AlexanderMelox on 19 Jun 2020

This is using CRA template and CRA doesn't let you customize Babel plugins, so it doesn't even attempt to read your .babelrc. However, with CRA you can use our macros (just use @emotion/styled/macro instead of @emotion/styled): https://codesandbox.io/s/weathered-darkness-qbmso

Andarist picture Andarist on 19 Jun 2020

@Andarist What鈥檚 the difference between the macro and the regular package?

AlexanderMelox picture AlexanderMelox on 20 Jun 2020

Macro includes targeted babel plugin when used with babel-plugin-macros (without this plugin used it wouldn't work at all). This makes it possible to add "custom babel plugins" to tools like CRA because CRA includes babel-plugin-macros in its preset, so no extra configuration is required on the user's side. You can read more here: https://github.com/kentcdodds/babel-plugin-macros and here: https://emotion.sh/docs/babel-macros

Andarist picture Andarist on 20 Jun 2020
👍1

This issue still happens if you are importing styled from somewhere else, which is the case if you are trying to have a typesafe Theme as you need to do something like this (from the docs):

import styled, { CreateStyled } from '@emotion/styled'

type Theme = {
  color: {
    primary: string
    positive: string
    negative: string
  }
  // ...
}

export default styled as CreateStyled<Theme>
JCMais picture JCMais on 18 Jul 2020

@JCMais this will get easier in the upcoming v11 thanks to the new importMap option, but also you won't have to reexport custom styled just to define your theme: https://deploy-preview-1600--emotion.netlify.app/docs/typescript#define-a-theme

Andarist picture Andarist on 18 Jul 2020
❤2 🎉1

@Andarist do you know if there is a workaround until v11 gets released? I am working on a component library where we need the typesafe theme, and ended up having to do a onMouseEnter/Leave in JS instead of using a simple :hover because of this error :(

Rolchau picture Rolchau on 1 Sep 2020

@Rolchau do u provide a custom styled that your components need to use?

Andarist picture Andarist on 1 Sep 2020

@Andarist Yeah we used the example here to avoid theme warnings and get auto-suggestion working on the theme object.

Link didn't anchor correctly but its this:
```
import styled, { CreateStyled } from '@emotion/styled'

type Theme = {
color: {
primary: string
positive: string
negative: string
}
// ...
}

export default styled as CreateStyled```

Rolchau picture Rolchau on 1 Sep 2020

There is no workaround for this in Emotion 10 - unless you would fork our Babel plugin. I encourage you to try out v11 though - it's stable, already used by some at scale.

Andarist picture Andarist on 1 Sep 2020
👍1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

sami616 picture sami616  路  3Comments
tkh44 picture tkh44  路  3Comments
mitchellhamilton picture mitchellhamilton  路  3Comments
Zn4rK picture Zn4rK  路  3Comments
eddeee888 picture eddeee888  路  3Comments