Framer Motion causes the error: 'AnimatePresence' cannot be used as a JSX component.

[Albertyhu]

What version of astro are you using?

2.9.6

Are you using an SSR adapter? If so, which one?

none

What package manager are you using?

npm

What operating system are you using?

Windows

What browser are you using?

Chrome, Firefox

Describe the Bug

I am creating a gallery that uses an animation method found in the Framer Motion library, but I ran into a problem making it work.

To animate the gallery, the component AnimatePresence is used to wrap around React components to be animated and the keyword 'motion' is added in front of an HTML tag name.
For example:

import { motion, AnimatePresence } from "framer-motion"

export const MyComponent = ({ isVisible }) => (
  **<AnimatePresence>**
    {isVisible && (
      <**motion**.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
      />
    )}
  **</AnimatePresence>**
)

I made sure that the React component has the correct directive:

<GalleryReact client:visible /> 

However, the following TypeScript to appears when I implemented the code:

'AnimatePresence' cannot be used as a JSX component.

motion.div' cannot be used as a JSX component.

Also, the website crashes on runtime and the following error appears in the terminal:

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component.

Here is the page where I implemented AnimatedPresence method:
https://github.com/Albertyhu/uthan-template/blob/with-framer/src/components/project/gallery/gallery-react.tsx

Here is the page where motion.div is implemented:
https://github.com/Albertyhu/uthan-template/blob/with-framer/src/components/project/gallery/masonry-item.tsx

I noticed that I received a similar TypeScript error when I tried to use other React packages such React-Counter. Thus, this issue is less likely to be isolated to just Framer Motion.

I appreciate any help I can get here.

What's the expected result?

The gallery should be animated as shown in the following video:
https://youtu.be/f4f7vwL4TcQ?t=26

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-vzn4fz?file=src%2Fpages%2Findex.astro,astro.config.mjs,src%2Fcomponents%2Fgallery%2Findex.astro,src%2Fcomponents%2Fgallery%2Fgallery-react.tsx,tsconfig.json,src%2Futil%2FatomItems.js,src%2Fcomponents%2Fgallery%2Fmasonry-item.tsx,src%2Fdemo%2Fprojects.json&on=stackblitz

Participation

• I am willing to submit a pull request for this issue.

[natemoo-re]

I noticed in the linked reproduction that you have both @astrojs/preact and @astrojs/react enabled. Is that intentional? It looks like you're mixing React components in files that have import { useStore } from '@nanostores/preact' which uses preact/hooks internally.

AFAIK, Framer Motion is not compatible with Preact (or preact/compat) and only works with regular React. If you clean these issues up and only use React, does the problem persist?

[Albertyhu]

@natemoo-re
You're right. Thanks for the suggestion.
I got rid of all Preact components and stuck to React components. The animation does work.

However, TypeScript is still throwing the following errors:

'AnimatePresence' cannot be used as a JSX component.
  Its type 'FunctionComponent<PropsWithChildren<AnimatePresenceProps>>' is not a valid JSX element type.
    Type 'FunctionComponent<PropsWithChildren<AnimatePresenceProps>>' is not assignable to type 'FunctionComponent<any>'.
      Type 'ReactNode' is not assignable to type 'VNode<any> | null'.



'motion.div' cannot be used as a JSX component.
  Its type 'ForwardRefComponent<HTMLDivElement, HTMLMotionProps<"div">>' is not a valid JSX element type.
    Type 'ForwardRefExoticComponent<HTMLAttributesWithoutMotionProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & MotionProps & RefAttributes<...>>' is not assignable to type 'FunctionComponent<any>'.
      Type 'ReactNode' is not assignable to type 'VNode<any> | null'.
        Type 'undefined' is not assignable to type 'VNode<any> | null'.

I'm not sure how to solve these.

[natemoo-re]

These are just type errors from TypeScript in your editor. Astro requires a tsconfig.json in your project to handle this, but it looks like your project's file is misconfigured.

Try changing jsxImportSource from preact to react.

{
	"extends": "astro/tsconfigs/strict",
	"compilerOptions": {
		"jsx": "react-jsx",
-		"jsxImportSource": "preact",
+		"jsxImportSource": "react",
		"allowImportingTsExtensions": true,
		"baseUrl": ".",
		"paths": { "@/*": ["src/*"] }
	}
}

[natemoo-re]

After making that change locally, I can see that the error goes away, so I'm going to close this!

[Albertyhu]

@natemoo-re That works. Thanks for your help!