Doesn't work with storybook.

[MarkLyck]

When just running my project I don't have this problem, but when I use storybook, I get the following error: Component selectors can only be used in conjunction with babel-plugin-emotion.

I tried installing this emotion-ts-plugin and add it to my storybook webpack like this:

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
const { createEmotionPlugin } = require('emotion-ts-plugin')

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    exclude: /node_modules/,
    use: [
      {
        loader: require.resolve('awesome-typescript-loader'),
        options: {
          exclude: /node_modules/,
          presets: [['react-app', { flow: false, typescript: true }]],
          configFileName: './.storybook/tsconfig.json',
          getCustomTransformers: () => ({
            before: [
              createEmotionPlugin({
                sourcemap: true,
                autoLabel: true,
                labelFormat: '[local]',
                autoInject: true,
              }),
            ],
          }),
        },
      },
      {
        loader: require.resolve('react-docgen-typescript-loader'),
        options: {},
      },
    ],
  })
  config.resolve.extensions.push('.ts', '.tsx')
  config.resolve.plugins = [new TsconfigPathsPlugin()]
  return config
}

Alsoo tried adding it. to my tsconfig like this:

{
  "compilerOptions": {
    "outDir": "build/lib",
    "module": "commonjs",
    "strictNullChecks": true,
    "skipLibCheck": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "jsx": "react",
    "noUnusedParameters": true,
    "noUnusedLocals": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "declaration": true,
    "allowSyntheticDefaultImports": true,
    "emitDecoratorMetadata": true,
    "target": "es5",
    "lib": ["es5", "es6", "es7", "es2017", "dom"],
    "sourceMap": true,
    "types": ["react", "node"],
    "baseUrl": "../",
    "paths": {
      "~*": ["./src*"],
      "components": ["./src/components/*"],
      "ui-components": ["./src/ui-components/*"],
      "pages": ["./src/pages/*"],
      "common": ["src/common/*"],
      "mocks": ["./mocks/*"],
      "lib": ["./lib/*"]
    },
    "plugins": [
      {
        "transform": "emotion-ts-plugin",
        "import": "createEmotionPlugin",
        "type": "program",
        "after": false,
        "sourceMap": true,
        "autoLabel": true,
        "labelFormat": "[filename]__[local]"
      }
    ]
  },
  "include": ["src/**/*", "../src/typings.d.ts"],
  "exclude": [
    "node_modules",
    "build",
    "dist",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts",
    "**/*/*.test.ts",
    "examples"
  ]
}

but I still get the same error when Storybook tries to render a component which uses Component selectors

Also see related SO question: https://stackoverflow.com/questions/61781954/how-to-use-babel-emotion-plugin-with-storybook-typescript