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

[stramel]

_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.

• [x] I am running the latest version
• [x] I checked the documentation (nx.dev) and found no answer
• [x] I checked to make sure that this issue has not already been filed
• [x] 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]

My Next.js app also fails.

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

Still fails with v11 too.

However, everything works when ran in Docz.

[stramel]

I spun up Next.js with the plugin and a similar setup which works.

https://with-emotion.stramel.now.sh/
https://github.com/stramel/with-emotion/blob/master/pages/index.js#L40

Trying to dig into this error and see what I can find out.

[stramel]

We're also having issues with babel-plugin-macros working which made me think that the NX build and serve commands aren't properly inserting the custom .babelrc file into the build process.

Upon further debugging, I found that if I manually inject the babel-plugin-emotion into the config that @nrwl/next has, it works.

I internally modified @nrwl/next/src/utils/config by inserting the plugin:

defaultLoaders.babel.options.plugins = [require.resolve('babel-plugin-emotion')]

The main issue here appears to be that the Next.js custom .babelrc setup (In my case /apps/core/.babelrc) doesn't get properly loaded into the NX build pipeline.

I plan to continue to look for a fix. If you can point me in a direction I would be more than happy to fix this issue.

[stramel]

Probably a separate issue, can't get the babel config to work with ts-jest

[stramel]

I'm not really sure how to fix this issue. I traced it down to the SSR optimization when Next.js's server calls ReactDOM.renderToString in next/next-server/server/render.

I'm wondering if since my components are in a different lib if they aren't getting compiled in the Next.js scope?

[stramel]

I believe this is related to #2119

[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]

Managed to work around the jest problem too. Thanks @bpallares and @adam-hanna for the assist!

jest.config.js

-    '^.+\\.[tj]sx?$': 'ts-jest',
+    '^.+\\.[tj]sx?$': './jest.transform.js',

// jest.transform.js
module.exports = require('babel-jest').createTransformer({
  presets: ['next/babel'],
  plugins: ['babel-plugin-emotion'],
})

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs.
If we missed this issue please reply to keep it active.
Thanks for being a part of the Nrwl community! 🙏

[stramel]

This is still an issue AFAICT

[vsavkin]

Sorry. The issue was marked by mistake. I removed the label.