Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Class instance returned from function interpolation causes Component is not a styled component error in v6 #4313

Open
drizzer14 opened this issue May 17, 2024 · 0 comments

Comments

@drizzer14
Copy link

Environment

System:

  • OS: macOS 14.3.1
  • CPU: (10) arm64 Apple M1 Pro
  • Memory: 106.25 MB / 16.00 GB
  • Shell: 5.9 - /bin/zsh

Binaries:

  • Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
  • Yarn: 1.22.19 - ~/.yarn/bin/yarn
  • npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
  • Watchman: 2024.01.22.00 - /opt/homebrew/bin/watchman

npmPackages:

  • babel-plugin-styled-components: 2.1.4 => 2.1.4
  • styled-components: 6.1.10 => 6.1.10

Reproduction

https://codesandbox.io/p/devbox/sc6-react18-component-is-not-sc-fqz9hf

Steps to reproduce

  1. Define a class with a toString method that returns any valid CSS value (CSS custom property reference in my case).
  2. Create an instance of this class.
  3. Use created instance in a styled component as part of a style rule based on props.

Expected Behavior

This interpolation results in toString method being called on a value-object as it should happen in plain JavaScript. Resulting stylesheet would include the value returned by toString, e.g. color: ${() => cssVar}; -> color: var(--css-var);.

Actual Behavior

Expected behaviour is indeed what happens, however styled-components throw an uncaught error into browser console:

Component is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.

This error can be observed in the attached reproduction using browser or CodeSandbox inspector.

After having debugged the error in my code, I've found that the interpolated function () => cssVar or its returned value is treated as React component by styled-components internals. This treatment causes styled-components to expect this "React component" to have a className prop that is passed down to an HTML element. In reality, this is just a plain value-object that should be treated as such – calling toString method on it and interpolating its value without any errors. The method is still called, which solves my previous issue, however the errors are also thrown when previously in v5 they weren't.

@drizzer14 drizzer14 changed the title Class instance returned from function interpolation causes Component is not a styled component error Class instance returned from function interpolation causes Component is not a styled component error in v6 May 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant