profile
viewpoint

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

<!-- Thanks for your interest in the project. I appreciate bugs filed and PRs submitted! Please make sure that you are familiar with and follow the Code of Conduct for this project (found in the CODE_OF_CONDUCT.md file).

Please fill out this template with all the relevant information so we can understand what's going on and fix the issue.

I'll probably ask you to submit the fix (after giving some direction). If you've never done that before, that's great! Check this free short video tutorial to learn how: http://kcd.im/pull-request -->

  • 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)

<!-- Please provide the full error message/screenshots/anything

Your bug will get fixed much faster if we can easily run your code. Please paste the link to your CodeSandbox below. -->

Reproduction:

<!--

If possible, create a CodeSandbox (https://codesandbox.io/s/new) or fork this CodeSandbox (https://codesandbox.io/s/pk1qjqpw67) and add a repoduction of your issue.

Does it seem like the issue is only happening to you?

If this is the case and you can't reproduce it in a CodeSandbox, your best hope of a solution will be to create a github repo that we can download and tinker with. -->

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.

emotion-js/emotion

Answer questions stolinski

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

useful!

Related questions

Cannot turn off "potentially unsafe when doing server-side rendering" noise hot 2
Component selectors not working with `@emotion/babel-preset-css-prop` hot 2
How to use babel-emotion-plugin with Storybook + Typescript? hot 1
Snapshot tests showing components as '<ForwardRef />' instead of component name hot 1
Using emotion 9 and 10 in the same window hot 1
Emotion 10 - "React is not defined" hot 1
How to get auto-prefixing with vanilla Emotion? hot 1
Problems surrounding SSR injection of <style> and unreliability of :first-child selectors hot 1
Typescript definitions for @emotion/native hot 1
&:focus not working hot 1
regexp not work in IE hot 1
transpile typescript to babel-plugin-emotion doesn't work hot 1
Cannot turn off "potentially unsafe when doing server-side rendering" noise hot 1
How to get auto-prefixing with vanilla Emotion? hot 1
Cannot turn off "potentially unsafe when doing server-side rendering" noise hot 1
Github User Rank List