[nextjs] Cannot style next/link component

[Sephster]

Steps to reproduce

Reproduction repo here: https://github.com/Sephster/styled-components-bug

1. Clone the repo
2. run npm i
3. run npm run dev
4. visit the site url (usually http://localhost:3000)
5. the page doesn't load and errors appear in the console

Current behavior

When creating a styled component from a next/link component e.g

const LinkStyle = styled(Link)`
  font-weight: bold;
`;

The page containing the component cannot render with errors in the terminal. The only workaround I've found for this is to style an a tag and use passHref and legacyBehavior for the next link e.g.

const LinkStyle = styled.a`
  font-weight: bold;
`;

return (
  <Link href={url} passHref legacyBehavior>
    <LinkStyle>Link text</LinkStyle>
  </Link>

Expected behavior

We should be able to create a styled component that uses a next/link component as its base. This is possible in the styled-components package.

Context

To style a next JS link component.

Your environment

System: OS: Linux 6.5 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish) Binaries: Node: 20.15.1 - ~/.nvm/versions/node/v20.15.1/bin/node npm: 10.7.0 - ~/.nvm/versions/node/v20.15.1/bin/npm pnpm: 7.14.0 - ~/.local/share/pnpm/pnpm Browsers: Chrome: Not Found npmPackages: @emotion/react: 11.13.0 @emotion/styled: 11.13.0 @mui/private-theming: 6.0.0-dev.20240529-082515-213b5e33ab @mui/styled-engine: 6.0.0-dev.20240529-082515-213b5e33ab @mui/system: 6.0.0-dev.240424162023-9968b4889d @mui/types: 7.2.15 @mui/utils: 6.0.0-dev.20240529-082515-213b5e33ab @types/react: ^18 => 18.3.3 react: ^18 => 18.3.1 react-dom: ^18 => 18.3.1 styled-components: ^6.1.12 => 6.1.12 typescript: ^5 => 5.5.4

Search keywords: next link

[Sephster]

A similar issue occurs with the next/image component. It cannot be styled and results in a build error

[royporter7]

I think I'm getting the same error as the people above, for both the next/link component and the next/image. Oddly enough these two components work in the example next.js ts project provided in the examples, however when integrated into my project, I get errors.

[DiegoAndai]

Hey @Sephster, thanks for the report. I see you're using Emotion and not Pigment CSS. Did you intend to open this issue on https://github.com/mui/material-ui instead?

[DiegoAndai]

@rhoiyds are you getting the error with Pigment CSS?

[royporter7]

@DiegoAndai Yes I'm working with Pigment CSS, but integrated with MUI. However I've been working through a multitude of issues (bundling issue, transformLibraries issue) so I can't say for certain that I've been able to isolate this specific issue, sorry.

[Sephster]

@DiegoAndai apologies the environment info is inaccurate. I think I installed emotion after testing. I can confirm this is a bug with pigment. I was using it alone. I will update the environment info for you this weekend

[DiegoAndai]

@brijeshb42 may I ask you to take a look into this one when you have some time?