Component selector not working

[ivanbanov]

Im trying to use components as selector with emotion the following error is showing up

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

I'm using the xstlyed babel preset, it seems to be working since in the compiled code it's fixing the jsx stuffs

  return (0, _emotion.jsx)(StyledComponent, props);

The thing is when I try to use components as selector.
My babel config is

const paths = require('./config/paths')

module.exports = api => {
  api.cache(false)

  return {
    presets: [
      [
        '@babel/preset-env',
        {
          targets: { esmodules: true },
        },
      ],
      '@babel/preset-react',
      '@xstyled/babel-preset-emotion-css-prop',
    ],
    plugins: [
      '@babel/plugin-transform-runtime',
      '@babel/plugin-proposal-object-rest-spread',
      '@babel/plugin-proposal-class-properties',
      '@babel/plugin-proposal-optional-chaining',
      [
        'module-resolver',
        { root: [paths.src, 'node_modules'] },
      ],
    ],
  }
}

Also important to mention that I'm running the code in the storybook 5.2.6

What could be wrong?

[gregberge]

Storybook is doing weird things. It is complicated to make it work with it. The problem is not in xstyled itself. You have to trick the webpack config of storybook. I think you would have the problem with emotion also, try to find issue for making emotion + storybook working.

[ivanbanov]

hey @gregberge I just double checked the problem in an isolated repo to make sure there was nothing wrong, but it seems like the xstyled preset is not working properly.

I've tried the same example with emotion and also with xstyled, the emotion preset works well, but the same dummy example with xstyled still throws the Component selectors can only be used in conjunction with babel-plugin-emotion error

It can be checked in the gif (please click on it 😅)

I created a repo with the config that was used in the gif https://github.com/ivanbanov/xstyled-selector-bug, I really would like to help with a PR but Im not sure how to even debug it

[ivanbanov]

@gregberge seems like there is another bug when using the <ThemeProvider /> with the xstyled preset, it always throws

Property name of JSXClosingElement expected node to be of a type ["JSXIdentifier","JSXMemberExpression","JSXNamespacedName"] but instead got "Identifier"

not sure, but this one seems to be related to this plugin babel-plugin-jsx-pragmatic 🤔

[gregberge]

v2 uses Emotion v11, so it is no longer relevant.