title: Component selector error with Storybook/React/Typescript and Emotion
body: <p>I am trying to get Emotion to play nice with Component selectors.</p>
  <p>But when I am doing this:</p>
  <pre><code>const Test = styled.div`
    color: blue;
  `;
  
  const Test2 = styled.div`
    ${Test} {
      color: red;
    }
  `;
  </code></pre>
  <p>Then I get this error:
  <code>Component selectors can only be used in conjunction with babel-plugin-emotion.</code></p>
  <p>And I can't seem to fix it - seen similar issues on the emotion repo, but solutions there doesn't seem to work have tried <code>@emotion/styled/macro</code> with no luck.</p>
  <p>Should maybe mention that I am using emotions theming also.</p>
  <p>My .babelrc file:</p>
  <pre><code>{
    &quot;presets&quot;: [&quot;@babel/react&quot;, &quot;@babel/preset-env&quot;, &quot;@babel/preset-typescript&quot;],
    &quot;plugins&quot;: [
      &quot;@babel/plugin-transform-runtime&quot;,
      &quot;@babel/plugin-proposal-class-properties&quot;,
      &quot;@babel/plugin-proposal-object-rest-spread&quot;,
      [
        &quot;transform-inline-environment-variables&quot;,
        {
          &quot;include&quot;: [&quot;NODE_ENV&quot;]
        }
      ],
      &quot;emotion&quot;
    ]
  }
  </code></pre>
  <p>tsconfig.js:</p>
  <pre><code>{
    &quot;compilerOptions&quot;: {
      &quot;outDir&quot;: &quot;dist&quot;,
      &quot;module&quot;: &quot;esnext&quot;,
      &quot;lib&quot;: [&quot;dom&quot;, &quot;esnext&quot;],
      &quot;moduleResolution&quot;: &quot;node&quot;,
      &quot;jsx&quot;: &quot;react&quot;,
      &quot;sourceMap&quot;: true,
      &quot;declaration&quot;: true,
      &quot;esModuleInterop&quot;: true,
      &quot;noImplicitReturns&quot;: true,
      &quot;noImplicitThis&quot;: true,
      &quot;noImplicitAny&quot;: true,
      &quot;strictNullChecks&quot;: true,
      &quot;suppressImplicitAnyIndexErrors&quot;: true,
      &quot;noUnusedLocals&quot;: true,
      &quot;noUnusedParameters&quot;: true,
      &quot;allowSyntheticDefaultImports&quot;: true,
      &quot;resolveJsonModule&quot;: true
    },
    &quot;include&quot;: [&quot;src&quot;],
    &quot;exclude&quot;: [&quot;node_modules&quot;, &quot;dist&quot;, &quot;**/__mocks__/*&quot;]
  }
  </code></pre>
  <p>Using babel-loader in webpack:</p>
  <pre><code>      {
          test: /\.(ts|js)x?$/,
          use: 'babel-loader',
          exclude: /node_modules/,
        },
  </code></pre>
  <p>And storybook main.js setup:</p>
  <pre><code>const path = require('path');
  
  module.exports = {
    stories: ['../src/components/**/*.stories.tsx'],
    addons: [
      '@storybook/addon-actions',
      '@storybook/addon-links',
      '@storybook/addon-knobs',
      '@storybook/addon-actions/register',
      '@storybook/addon-viewport/register',
      '@storybook/addon-storysource',
      '@storybook/addon-backgrounds/register',
    ],
    webpackFinal: async (config) =&gt; {
      config.module.rules.push({
        test: /\.(ts|tsx)$/,
        loader: require.resolve('babel-loader'),
        options: {
          plugins: ['emotion'],
          presets: [['react-app', { flow: false, typescript: true }]],
        },
      });
  
      config.resolve.extensions.push('.ts', '.tsx');
      return config;
    },
  };
  
  </code></pre>
  <p>And finally all the devPackages in package.json:</p>
  <pre><code>    &quot;@babel/cli&quot;: &quot;^7.8.4&quot;,
      &quot;@babel/core&quot;: &quot;^7.9.6&quot;,
      &quot;@babel/plugin-external-helpers&quot;: &quot;^7.8.3&quot;,
      &quot;@babel/plugin-proposal-class-properties&quot;: &quot;^7.8.3&quot;,
      &quot;@babel/plugin-proposal-object-rest-spread&quot;: &quot;^7.9.6&quot;,
      &quot;@babel/plugin-transform-runtime&quot;: &quot;^7.10.0&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.10.0&quot;,
      &quot;@babel/preset-react&quot;: &quot;^7.10.0&quot;,
      &quot;@babel/preset-typescript&quot;: &quot;^7.9.0&quot;,
      &quot;@emotion/core&quot;: &quot;^10.0.28&quot;,
      &quot;@emotion/styled&quot;: &quot;^10.0.27&quot;,
      &quot;@storybook/addon-actions&quot;: &quot;^6.0.21&quot;,
      &quot;@storybook/addon-backgrounds&quot;: &quot;^6.0.21&quot;,
      &quot;@storybook/addon-knobs&quot;: &quot;^6.0.21&quot;,
      &quot;@storybook/addon-links&quot;: &quot;^6.0.21&quot;,
      &quot;@storybook/addon-storysource&quot;: &quot;^6.0.21&quot;,
      &quot;@storybook/addon-viewport&quot;: &quot;^6.0.21&quot;,
      &quot;@storybook/addons&quot;: &quot;^6.0.21&quot;,
      &quot;@storybook/react&quot;: &quot;^6.0.21&quot;,
      &quot;@svgr/webpack&quot;: &quot;^5.4.0&quot;,
      &quot;@testing-library/jest-dom&quot;: &quot;^5.10.1&quot;,
      &quot;@testing-library/react&quot;: &quot;^10.0.4&quot;,
      &quot;@types/jest&quot;: &quot;^25.2.3&quot;,
      &quot;@types/react&quot;: &quot;^16.9.35&quot;,
      &quot;@types/react-dom&quot;: &quot;^16.9.8&quot;,
      &quot;@types/react-test-renderer&quot;: &quot;^16.9.2&quot;,
      &quot;@types/styled-system&quot;: &quot;^5.1.9&quot;,
      &quot;@typescript-eslint/eslint-plugin&quot;: &quot;^3.3.0&quot;,
      &quot;@typescript-eslint/parser&quot;: &quot;^3.3.0&quot;,
      &quot;autoprefixer&quot;: &quot;^9.8.0&quot;,
      &quot;babel-jest&quot;: &quot;^26.0.1&quot;,
      &quot;babel-loader&quot;: &quot;^8.1.0&quot;,
      &quot;babel-plugin-emotion&quot;: &quot;^10.0.33&quot;,
      &quot;babel-plugin-external-helpers&quot;: &quot;^6.22.0&quot;,
      &quot;babel-plugin-macros&quot;: &quot;^2.8.0&quot;,
      &quot;babel-plugin-named-asset-import&quot;: &quot;^0.3.6&quot;,
      &quot;babel-plugin-transform-inline-environment-variables&quot;: &quot;^0.4.3&quot;,
      &quot;babel-preset-env&quot;: &quot;^1.7.0&quot;,
      &quot;babel-preset-preact&quot;: &quot;^2.0.0&quot;,
      &quot;babel-preset-react-app&quot;: &quot;^9.1.2&quot;,
      &quot;clean-webpack-plugin&quot;: &quot;^3.0.0&quot;,
      &quot;copy-webpack-plugin&quot;: &quot;^6.0.1&quot;,
      &quot;cross-env&quot;: &quot;^7.0.2&quot;,
      &quot;css-loader&quot;: &quot;^3.5.3&quot;,
      &quot;eslint&quot;: &quot;^7.2.0&quot;,
      &quot;eslint-config-prettier&quot;: &quot;^6.11.0&quot;,
      &quot;eslint-plugin-prettier&quot;: &quot;^3.1.4&quot;,
      &quot;eslint-plugin-react&quot;: &quot;^7.20.5&quot;,
      &quot;eslint-plugin-react-hooks&quot;: &quot;^4.0.8&quot;,
      &quot;html-webpack-plugin&quot;: &quot;^4.3.0&quot;,
      &quot;husky&quot;: &quot;^4.2.5&quot;,
      &quot;jest&quot;: &quot;^26.0.1&quot;,
      &quot;jest-canvas-mock&quot;: &quot;^2.2.0&quot;,
      &quot;jest-matchmedia-mock&quot;: &quot;^1.0.1&quot;,
      &quot;lint-staged&quot;: &quot;^10.2.6&quot;,
      &quot;node-sass&quot;: &quot;^4.14.1&quot;,
      &quot;postcss-loader&quot;: &quot;^3.0.0&quot;,
      &quot;prettier&quot;: &quot;^2.0.5&quot;,
      &quot;react&quot;: &quot;^16.13.1&quot;,
      &quot;react-dom&quot;: &quot;^16.13.1&quot;,
      &quot;react-spring&quot;: &quot;^8.0.27&quot;,
      &quot;react-test-renderer&quot;: &quot;^16.13.1&quot;,
      &quot;react-use-gesture&quot;: &quot;^7.0.15&quot;,
      &quot;sass-loader&quot;: &quot;^8.0.2&quot;,
      &quot;semver&quot;: &quot;^7.3.2&quot;,
      &quot;style-loader&quot;: &quot;^1.2.1&quot;,
      &quot;styled-system&quot;: &quot;^5.1.5&quot;,
      &quot;svg-react-loader&quot;: &quot;^0.4.6&quot;,
      &quot;typescript&quot;: &quot;^3.9.3&quot;,
      &quot;url-loader&quot;: &quot;^4.1.0&quot;,
      &quot;webpack&quot;: &quot;^4.43.0&quot;,
      &quot;webpack-bundle-analyzer&quot;: &quot;^3.8.0&quot;,
      &quot;webpack-cli&quot;: &quot;^3.3.11&quot;,
      &quot;webpack-dev-server&quot;: &quot;^3.11.0&quot;,
      &quot;webpack-merge&quot;: &quot;^4.2.2&quot;
  </code></pre>