search

nrwl / nx

Smart Monorepos · Fast CI
https://nx.dev
MIT License
22.57k stars 2.25k forks source link

Nx library + Next + Material UI component selectors breaks build #26570

Open Itrulia opened 1 week ago

Itrulia commented 1 week ago

Current Behavior

When using an emotion component selector within Material UI inside a library the build breaks with Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform.

Expected Behavior

The build to work and the styles to be applied.

GitHub Repo

https://github.com/Itrulia/material-ui-next-nx

Steps to Reproduce

  1. Install material ui
  2. Create a next application specifying to use emotion
  3. Create a next library specifying to use emotion
  4. Use a component selector inside the library
  5. Use component inside the next application
  6. Run application
  7. Open localhost:3000

Nx Report

NX   Report complete - copy this into the issue template

Node   : 20.5.1
OS     : darwin-arm64
npm    : 9.8.0

nx                 : 19.3.0
@nx/js             : 19.3.0
@nx/jest           : 19.3.0
@nx/linter         : 19.3.0
@nx/eslint         : 19.3.0
@nx/workspace      : 19.3.0
@nx/cypress        : 19.3.0
@nx/devkit         : 19.3.0
@nx/eslint-plugin  : 19.3.0
@nx/next           : 19.3.0
@nx/react          : 19.3.0
@nx/storybook      : 19.3.0
@nrwl/tao          : 19.3.0
@nx/web            : 19.3.0
@nx/webpack        : 19.3.0
typescript         : 5.4.5
---------------------------------------
Registered Plugins:
@nx/next/plugin
@nx/jest/plugin
@nx/eslint/plugin
@nx/storybook/plugin

Failure Logs

Error: Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform.
    at handleInterpolation (/Users/itrulia/Documents/emotion-test/node_modules/@emotion/serialize/dist/emotion-serialize.cjs.dev.js:94:13)
    at Object.serializeStyles (/Users/itrulia/Documents/emotion-test/node_modules/@emotion/serialize/dist/emotion-serialize.cjs.dev.js:274:15)
    at /Users/itrulia/Documents/emotion-test/node_modules/@emotion/styled/base/dist/emotion-styled-base.cjs.dev.js:167:34
    at /Users/itrulia/Documents/emotion-test/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:85:16
    at renderWithHooks (/Users/itrulia/Documents/emotion-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/itrulia/Documents/emotion-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5732:15)
    at renderElement (/Users/itrulia/Documents/emotion-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5957:7)
    at renderNodeDestructiveImpl (/Users/itrulia/Documents/emotion-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6115:11)
    at renderNodeDestructive (/Users/itrulia/Documents/emotion-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6087:14)
    at renderIndeterminateComponent (/Users/itrulia/Documents/emotion-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5786:7)
    at renderElement (/Users/itrulia/Documents/emotion-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5957:7)
    at renderNodeDestructiveImpl (/Users/itrulia/Documents/emotion-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6115:11)
    at renderNodeDestructive (/Users/itrulia/Documents/emotion-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6087:14)
    at renderIndeterminateComponent (/Users/itrulia/Documents/emotion-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5786:7)
    at renderElement (/Users/itrulia/Documents/emotion-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5957:7)
 ⨯ Error: Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform.
    at handleInterpolation (/Users/itrulia/Documents/emotion-test/node_modules/@emotion/serialize/dist/emotion-serialize.cjs.dev.js:94:13)
    at Object.serializeStyles (/Users/itrulia/Documents/emotion-test/node_modules/@emotion/serialize/dist/emotion-serialize.cjs.dev.js:274:15)
    at /Users/itrulia/Documents/emotion-test/node_modules/@emotion/styled/base/dist/emotion-styled-base.cjs.dev.js:167:34
    at /Users/itrulia/Documents/emotion-test/node_modules/@emotion/react/dist/emotion-element-48d2c2e4.cjs.dev.js:85:16
    at renderWithHooks (/Users/itrulia/Documents/emotion-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (/Users/itrulia/Documents/emotion-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5732:15)
    at renderElement (/Users/itrulia/Documents/emotion-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5957:7)
    at renderNodeDestructiveImpl (/Users/itrulia/Documents/emotion-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6115:11)
    at renderNodeDestructive (/Users/itrulia/Documents/emotion-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6087:14)
    at renderIndeterminateComponent (/Users/itrulia/Documents/emotion-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5786:7)
    at renderElement (/Users/itrulia/Documents/emotion-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5957:7)
    at renderNodeDestructiveImpl (/Users/itrulia/Documents/emotion-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6115:11)
    at renderNodeDestructive (/Users/itrulia/Documents/emotion-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6087:14)
    at renderIndeterminateComponent (/Users/itrulia/Documents/emotion-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5786:7)
    at renderElement (/Users/itrulia/Documents/emotion-test/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5957:7) {
  page: '/'
}
 GET / 500 in 27ms

Package Manager Version

❯ npm 9.8.0

Operating System

Itrulia commented 1 week ago

Since this only happens when using Nx libraries and works fine if everything is in the app itself, I opened it here. Should I also open it at MUI/Next?