Cannot convert a Symbol value to a string with @emotion/babel-plugin and next.js

Error: Cannot convert a Symbol value to a string when using @emotion/babel-plugin with next.js

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Using components as selectors thrown an error when compiling server-side. In client-side application it works as expected

Expected Behavior 🤔

No errors are thrown and the “component as selector” works

Steps to Reproduce 🕹

Server-side application doesn’t works https://codesandbox.io/s/next-material-emotion-ojfum Client-side application works https://codesandbox.io/s/cra-craco-mui-styled-8ji8i

Context 🔦

I would like to use component as selector

Your Environment 🌎

`npx @mui/envinfo`

  System:
    OS: Linux 5.4 Debian GNU/Linux 10 (buster) 10 (buster)
  Binaries:
    Node: 14.17.6 - ~/.nvm/versions/node/v14.17.6/bin/node
    Yarn: 1.22.11 - ~/.nvm/versions/node/v14.17.6/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.17.6/bin/npm
  Browsers:
    Chrome: 94.0.4606.81 (Official Build) (x86_64)
    Firefox: Not Found
  npmPackages:
    @emotion/react: 11.4.1 => 11.4.1
    @emotion/styled: 11.3.0 => 11.3.0
    @mui/core:  5.0.0-alpha.50
    @mui/material: 5.0.3 => 5.0.3
    @mui/private-theming:  5.0.1
    @mui/styled-engine:  5.0.1
    @mui/system:  5.0.3
    @mui/types:  7.0.0
    @mui/utils:  5.0.1
    @types/react:  17.0.29
    react: 17.0.2 => 17.0.2
    react-dom: 17.0.2 => 17.0.2

[bordeo]

@mnajdova @Andarist I would like to re-open this issue because it doesn’t work when the parent’s css rule has no other rules. eg:

const Parent = styled("div")`
  /* color: red; */ /* <----- The problem is this. uncomment and it works */
  ${Child} {
    color: yellow;
  }
`;

Example https://codesandbox.io/s/next-material-emotion-broken-again-3u4d4

[mnajdova]

@bordeo I’ve just merged it. It will be available in today’s release.