Next.js Discord

Discord Forum

React component library with NextJs 13

Unanswered
Cape lion posted this in #help-forum
Open in Discord
Cape lionOP
Hello! I have my private component library written in React with styled components. I want to use this library in my NextJs project. I'm using component in page.tsx with 'use client' label. When I run dev server I have this error:
Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'transparent')

Call Stack
styled_components__WEBPACK_IMPORTED_MODULE_1__.default.button.$hasText.$hasText
How can I use component library which uses styled components in Next?

7 Replies

@riský try using: https://nextjs.org/docs/app/api-reference/next-config-js/transpilePackages instead of building the package
Cape lionOP
I have installed library from private github repo. I've added package name to the transpilePackages, but the error is the same
riský
can i ask for what .transparent is being called upon? or are you not using it?
Cape lionOP
As I can see in the lib, these values are from theme property (from styled components) like theme.colors['color']
Cape lionOP
I tried another component and the errors are different.
Before adding to transpilePackages: 
Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'semibold')

Call Stack
styled_components__WEBPACK_IMPORTED_MODULE_0__.default.label.theme.theme

When added to transpilePackages: 
Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'semibold')

Call Stack
semibold
@riský
riský
hmm your semibold is interesting...
Cape lionOP
this is also the value from themes