[bug]: TypeError: Cannot read properties of undefined (reading 'withConfig') in nextjs 13

[pamoman]

What version of strapi-design-system are you using?

• Npm version = 8.19.3
• Node.js version = 16.19.0
• Strapi Design System version = 1.8.0
• Browser = Safari & Chrome
• Nextjs version = 13.4.7
• Using JavaScript not TypeScript

What's Wrong?

I am unable to build a Nextjs production version of my application because of this error but everything works as expected in dev mode even though the error is logged there too. The error seems to originate from the Box component only.

Dev error

Production error

To Reproduce

Run Nextjs in dev mode or perform a production build. Building can never complete because of this error.

Expected Behaviour

No error and building can complete successfully.

[joshuaellis]

What version of styled-components are you using?

[pamoman]

v5.3.11

[joshuaellis]

Are you using a monorepo setup? It looks like nextjs can't find the dependency, imho your problem is with nextjs, not the DS

EDIT: have you seen this guide? styled-components/styled-components-website#927

[pamoman]

No monorepo just a single next.js project. Step 1 and 3 in the guide are complete, not step 2 though.

[pamoman]

Now step 2 is complete. I needed to install v6+ of styled-components as the guide says so now am using v6.0.2. When removing the node_modules folder and lock file I now get a conflict error when installing the package.json for a clean start. Also in dev mode I get a new error and the old error remains logged too.

Conflict error

Here is what I return from my layout file:

[pamoman]

Downgraded styled-components back to v5.3.11, no conflicts now, no new errors but the original error is still present.

[joshuaellis]

It's probably because styled-components v5 is not compatible with the RSC/appDir format of nextjs 13, you'd need to open this issue with nextjs or styled-components.

We'll be upgrading to styled-components v6 at some point this year now it's been released.

[pamoman]

Ok, so your saying Strapi Design System is not currently compatible with next.js 13?

[joshuaellis]

No, im saying the design system is using styled-components 5 which from your issue seems to have issues with nextjs RSCs.

[pamoman]

Ok, I will check out the next.js & styled-component forums to see if there is a workaround. Otherwise I will have to downgrade to next.js v12.

[pamoman]

Thanks for the fast help anyway!