Typescript inferred type cannot be named without reference

Question

My project's setup is tsdx (based on Rollup and Typescript).
Working in my IDE (vscode) everything looks fine, and even running yarn tsc works without errors.

When I'm running yarn build (which is tsdx build) I get the following error:

(typescript) Error: /home/me/dev/app/src/components/alert/Alert.tsx(36,7): semantic error TS2742: The inferred type of 'AlertContainer' cannot be named without a reference to '@emotion/serialize/node_modules/csstype'. This is likely not portable. A type annotation is necessary.
Error: /home/me/dev/app/src/components/alert/Alert.tsx(36,7): semantic error TS2742: The inferred type of 'AlertContainer' cannot be named without a reference to '@emotion/serialize/node_modules/csstype'. This is likely not portable. A type annotation is necessary.

The code referenced in the error is:

type AlertContainerProps = {
  theme: any
};
const AlertContainer = styled(animated.div)<AlertContainerProps>`
  ${(props) => props.theme.primaryView}
  ...
`;

...

type AlertContentProps = Pick<React.ComponentProps<typeof AlertContainer>, 'style'> & {
  status?: string
};

What am I doing wrong? How can I fix it?
I tried this solution but it didn't work.

Answer 1

This helped me

import { StyledComponent } from '@emotion/styled';
import type { BoxProps } from '@mui/material/Box';
import Box from '@mui/material/Box';
import { styled } from '@mui/material/styles';

export const BoxStyled: StyledComponent<BoxProps> = styled(Box)(({ theme }) => ({ .......