Skip to content

unable to resolve default component #370

@PaulBlanche

Description

@PaulBlanche

Given the following files :

//Title.ts
const Title = styled.h1`
  color: red;
`;

export default Title
//Card.ts
import Title from "./Title.ts"

const Card = styled.div`
  ${Title} {
    color: blue;
  }
`

The following css is generated :

.title-fgy45 {
  color: red;
}

.title-rt5bY {
  undefined {
    color: blue;
  }
}

next-yak do not "understand" that the Title component is exported (probably because of the default export indirection), and the /*YAK EXPORTED STYLED:...*/ comment is missing (the comment with the extracted CSS is there though).

This means that the loader can't resolve Title in Card.ts as a styled component. Instead there is only a styled-component with no className (since it was not generated by next-yak), so we end up with an undefined in the css.

Here is the reproduction with the playground : https://yak.js.org/playground?q=H4sIAGMbUGgCA51UwW7TQBDds79i5FLUSHW8aVJROWkv3Dlx6S3b9TpexU7MZgkRUUAVCAkQEkJCQhwo37JfxszaThM14tBI3syb3X0z82ZszgRzf3FRgL%2BAuR%2FwUtsCUWbmJYTdmLm7cBgErGDuG3sHa%2BY%2BnQR0ePRczawyVx4gTPWyMQGY%2B7y1S7GKmPsFA86r1bBxjzeN0V5HAl1OtgBgYeRlyHS449pl3WXucX7cEu%2BRA8Q7%2FL6wqxdqZaNrMR3FNW7TjzH%2FGozi%2B8o6w2CDxUs0n6z9hQ2s%2FSnm%2FiRgVEqBN8F4SELe4ZLh8Vc2V6WCS380FWaaQJjbsuiSDU%2FDU3QXepLb1u%2BB39iQ1u63D8Xe570xHmXuI5wbVVIotiQhvbUG6fMkYKmqm%2FkqskaXCdCK0OZ7eyqdqASkqEAUVS5ulNUSw1GA2wSOeMNLwIhUiwLV%2FeKLldpIHIpMGKxsYSM5NzNlQFiw8woKlVkqCTwH8OMG9Pt935taR2L%2B7nPJdEHUqB97W8d%2F024trJlPMUkUFnrVqrMV%2BwM%2BX69PogE6614z9zMBhOCzpv541b3GbZOaath0cJ6qySkcpT3Ze8bRUOkFvyCj9nQgokxjONuZJUwKr0ey0BVKiundbzz01jP3%2BHAPxdEzbbEJ%2B9utQFQ4qfefPA%2F7kHgpzElEMaIsxb%2FbRtBCWZymaFEJqWeTBHiXn9VDh6%2FAIboDccf%2BU1FPr2Cv8Un%2FAdpzweVjBAAA

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions