default import from styled-components doesn't work

[jaked]

styled-components has a default export (according to its type signature), but if you use it you get

TypeError: __vite_ssr_import_2__.default.div is not a function

[jaked]

turns out this works fine if you use it in a client-side cell:

import styled from 'styled-components';

const Div = styled.div`
background-color: red;
`;

<Div>hello</Div>

but if you define a component in a cell without using it, the code is run server-side (even though you'll use the defined component client-side), which fails with the above error.

Maybe there's some Vite config to handle the module interop properly? Or we could distinguish client / server cells explicitly instead of trying to infer from usage? Or we could try to do a better job of inferring from usage, i.e. detect a component definition as client-side only.