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

Please make sure you have read the submission guidelines before posting an issue

Prerequisites

Please answer the following questions for yourself before submitting an issue. YOU MAY DELETE THE PREREQUISITES SECTION.

• I am running the latest version
• I checked the documentation (nx.dev) and found no answer
• I checked to make sure that this issue has not already been filed
• I’m reporting the issue to the correct repository (not related to React, Angular or any dependency)

Expected Behavior

I expect to be able to write and test styled components with component selectors using emotion.

import styled from '@emotion/styled'

const Container = styled.div`
	${Input} {
		border-color: red;
	}
`

Current Behavior

Jest fails to test components with Component selectors

Failure Information (for bugs)

I have tried adding babel-plugin-emotion in the jest transform chain but no luck.

// jest.config.js
module.exports = {
  name: 'components',
  preset: '../../jest.config.js',
  transform: {
    '^.+\\.[tj]sx?$': 'ts-jest',
    '^(?!.*\\\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest'
  },
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'],
  coverageDirectory: '../../coverage/libs/components',
  snapshotSerializers: ['jest-emotion'],
  setupFilesAfterEnv: ['./setupTests.ts']
}

Context

Please provide any relevant information about your setup:

❯ nx report

>  NX  Report complete - copy this into the issue template

  @nrwl/angular : Not Found
  @nrwl/cli : 8.11.2
  @nrwl/cypress : 8.11.2
  @nrwl/eslint-plugin-nx : 8.11.2
  @nrwl/express : Not Found
  @nrwl/jest : 8.11.2
  @nrwl/linter : 8.11.2
  @nrwl/nest : Not Found
  @nrwl/next : 8.11.2
  @nrwl/node : Not Found
  @nrwl/react : 8.11.2
  @nrwl/schematics : Not Found
  @nrwl/tao : 8.11.2
  @nrwl/web : 8.11.2
  @nrwl/workspace : 8.11.2
  typescript : 3.7.5

@emotion/core, @emotion/styled - v10.0.17

Failure Logs

console.error node_modules/jsdom/lib/jsdom/virtual-console.js:29
      Error: Uncaught [Error: Component selectors can only be used in conjunction with babel-plugin-emotion.]

Full logs:

Error occurred prerendering page "/" https://err.sh/zeit/next.js/prerender-error: Err
or: Component selectors can only be used in conjunction with babel-plugin-emotion.   
    at handleInterpolation (D:\projects\coolfire\coolfire-web\node_modules\@emotion\s
erialize\dist\serialize.cjs.dev.js:90:13)
    at Object.serializeStyles (D:\projects\coolfire\coolfire-web\node_modules\@emotio
n\serialize\dist\serialize.cjs.dev.js:276:15)
    at Object.children (D:\projects\coolfire\coolfire-web\node_modules\@emotion\style
d-base\dist\styled-base.cjs.dev.js:114:36)
    at ReactDOMServerRenderer.render (D:\projects\coolfire\coolfire-web\node_modules\
react-dom\cjs\react-dom-server.node.development.js:3855:55)
    at ReactDOMServerRenderer.read (D:\projects\coolfire\coolfire-web\node_modules\re
act-dom\cjs\react-dom-server.node.development.js:3536:29)
    at renderToString (D:\projects\coolfire\coolfire-web\node_modules\react-dom\cjs\r
eact-dom-server.node.development.js:4245:27)
    at render (D:\projects\coolfire\coolfire-web\node_modules\next\dist\next-server\s
erver\render.js:82:16)
    at Object.renderPage (D:\projects\coolfire\coolfire-web\node_modules\next\dist\ne
xt-server\server\render.js:332:20)
    at D:\projects\coolfire\coolfire-web\dist\apps\core\server\static\gCfNXdrwe1KAIr8
7CuGwN\pages\_document.js:233:21
    at Generator.next (<anonymous>)

[stramel]

I was able to workaround this issue for now by doing,

// next.config.js
module.exports = {
  webpack: (config, { defaultLoaders }) => {
    defaultLoaders.babel.options.plugins = [require.resolve('babel-plugin-emotion')];
	return config;
  }
}

[stramel]

My Next.js app also fails.

.babelrc
{
  "presets": ["next/babel"],
  "plugins": ["emotion"]
}

Still fails with v11 too.

However, everything works when ran in Docz.