Open Sephster opened 2 months ago
A similar issue occurs with the next/image component. It cannot be styled and results in a build error
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.
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?
@rhoiyds are you getting the error with Pigment CSS?
@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.
@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
@brijeshb42 may I ask you to take a look into this one when you have some time?
Steps to reproduce
Reproduction repo here: https://github.com/Sephster/styled-components-bug
npm i
npm run dev
Current behavior
When creating a styled component from a next/link component e.g
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.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