"Component definition is missing display name" Next.js build fail using code from docs

[tr1s]

A recent update in my npm packages (probably from Next.js) has caused build failures.

The code styled-components provides in the docs that you add to _document.js in order for styled-components to work in a Next.js project is no longer working.

I can't figure out how to fix this code even when looking at the react/display-name rules. Any help would be appreciated, thank you!

The error I get in vercel:

What the error looks like in my code:

These are the package updates I made that caused the sudden build failure:

[kitten]

Just make sure to assign the function that is highlighted to a named variable and return it.
some notes on that 😅

• This is a linting rule and I'm not sure why Next.js is failing your build and if that's their default, but it's not a build error or even an error in general
• This isn't something that is related to styled-components per se, so you may want to ask on the Next.js repo whether the example needs updating there too and why a linting rule errors. Again, not sure if that's because of your setup 😃
• Last point, promised 😅 This would still then be neither a bug or an issue with styled-components. It's either a usage question (so for StackOverflow and the likes) or an issue for the docs, which is in the styled-components-website repo

anyway, we'll see!

[tr1s]

Yeah my mistake, I thought there might have been some update that styled-components didn't document.

For anyone who stumbles upon this:

I tried to name the component but that didn't work. Turns out it 's an eslint-config-next issue and downgrading from 11.2.1 to 11.1.0 did the trick.