Typescript + Framer motion "inferred type of 'Wrapper' cannot be named without a reference to"

Question

I have a react components library that I am using vite to bundle my components with however I am running into a typescript error only with my framer-motion components.

Error

The inferred type of 'Wrapper' cannot be named without a reference to '../theme/node_modules/framer-motion/dist'. This is likely not portable. A type annotation is necessary.

Component.styled.ts

import styled from 'styled-components'
import { motion } from 'framer-motion'

export const Wrapper = styled(motion.div)<StyledProps>`
   ... Styling Here
`

The confusing part to me is why it is looking into a linked workspace I currently have named as 'theme' for this instead of inside of its own node_modules package.

Because this is a component library package I have framer-motion inside of peerDependencies.

package.json

"peerDependencies": {
  "@types/node": "18.14.0",
  ...
  "framer-motion": "10.12.4",
  ...
 }

Answer 1

So not sure why but wrapper does not infer its type from the motion.div inside a pnpm mono repo but will in my other projects. I solved this by manually assigning the type to Wrapper

export const Wrapper: StyledComponent<
    ForwardRefComponent<HTMLDivElement, HTMLMotionProps<'div'>>,
    any,
    StyledProps,
    never
> = styled(motion.div)<StyledProps>`