Motion: [BUG] "Component is not a function" when used with react-ssr-prepass

[BjoernRave]

Describe the bug

When creating a simple button like this: <motion.button animate={{opacity: 1}}>Test</motion.button> I get the following error:

/Users/bjoern/projects/CoolPlaces/frontend/node_modules/react-ssr-prepass/dist/react-ssr-prepass.development.js:546
      throw error;
      ^

TypeError: Component is not a function
    at renderWithHooks (/Users/bjoern/projects/CoolPlaces/frontend/node_modules/react-ssr-prepass/dist/react-ssr-prepass.development.js:271:18)
    at render$1 (/Users/bjoern/projects/CoolPlaces/frontend/node_modules/react-ssr-prepass/dist/react-ssr-prepass.development.js:543:12)
    at mount$1 (/Users/bjoern/projects/CoolPlaces/frontend/node_modules/react-ssr-prepass/dist/react-ssr-prepass.development.js:566:10)
    at render$3 (/Users/bjoern/projects/CoolPlaces/frontend/node_modules/react-ssr-prepass/dist/react-ssr-prepass.development.js:804:82)
    at visitElement (/Users/bjoern/projects/CoolPlaces/frontend/node_modules/react-ssr-prepass/dist/react-ssr-prepass.development.js:860:23)
    at visitLoop (/Users/bjoern/projects/CoolPlaces/frontend/node_modules/react-ssr-prepass/dist/react-ssr-prepass.development.js:912:22)
    at resumeVisitChildren (/Users/bjoern/projects/CoolPlaces/frontend/node_modules/react-ssr-prepass/dist/react-ssr-prepass.development.js:954:20)
    at Immediate.<anonymous> (/Users/bjoern/projects/CoolPlaces/frontend/node_modules/react-ssr-prepass/dist/react-ssr-prepass.development.js:978:9)

To Reproduce

I am using Next.js together with urql, so I also use react-ssr-prepass, which is probably causing the problem

To reproduce just take this example repo: https://github.com/FormidableLabs/urql/tree/master/examples/3-ssr-with-nextjs

install framer motion and create a basic button

Desktop (please complete the following information):

• OS: Mac
• Browser firefox
• Version: 1.4

[mattgperry]

What version of React are you running?

Edit: nm this shouldn't be a problem - the bug seems to be here https://github.com/FormidableLabs/react-ssr-prepass/blob/03c94bf6e5dcba419dd647a0f936e272353f1318/src/internals/dispatcher.js#L116

I'm not sure there's much we can do about this. We're not doing anything exotic.

[BjoernRave]

I am using the latest version of react: 16.8.6

@kitten do you have any idea on how to fix this?

[kitten]

@BjoernRave What is your component there inheriting from? I assume if it's not a function it must be a class? Or is it something else like forwardRef?

If it's a class it shouldn't even be in dispatcher at that point since there's a separate case for class components:

• https://github.com/FormidableLabs/react-ssr-prepass/blob/03c94bf6e5dcba419dd647a0f936e272353f1318/src/visitor.js#L54-L64
• https://github.com/FormidableLabs/react-ssr-prepass/blob/03c94bf6e5dcba419dd647a0f936e272353f1318/src/element.js#L24-L25

If it's actually neither an element of a function or a class but a ForwardRefElement for instance, this could also be an issue with react-is.

[BjoernRave]

@kitten not sure what you mean, but it has nothing to do with my code, here is a super basic codesandbox with the code from the next.js example and a basic framer-motion element: https://codesandbox.io/s/hello-world-dpvnv

[mattgperry]

@kitten the motion components are just functions wrapped in forwardRef: https://github.com/framer/motion/blob/master/src/motion/component.tsx#L40.
I can take a look into what react-is thinks it is, good pointer.

[kitten]

Hiya 👋 I pulled down the codesandbox locally and have found the issue in react-ssr-prepass. There's an open PR that'll fix this bug: https://github.com/FormidableLabs/react-ssr-prepass/pull/15

Specifically react-ssr-prepass was having trouble with this component, which is a memo component wrapping a forwardRef component: https://github.com/framer/motion/blob/b0dcfa8/src/motion/utils/use-motion-values.ts#L175

[mattgperry]

@kitten thanks for taking a look!

[BjoernRave]

thank you two for fixing this problem. I am looking forward to use framer-motion all over my project very soon :D