Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

State:
Created 4 years ago
Comments:8

Top GitHub Comments

4reactions

kittencommented, Aug 1, 2019

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

1reaction

BjoernRavecommented, Aug 1, 2019

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

Top Results From Across the Web

Server-Side Rendering with React - GQty

Function designed to be used before the React Render is being made, for example, in places like getStaticProps or getServerSideProps of Next.js.

Querying data with code components | Learn Plasmic

It is based on react-ssr-prepass, and provides Suspense-style data fetching from any component, not just from getStaticProps or getServerSideProps . Using a ...

SSR | TanStack Query Docs

Create a new QueryClient instance inside of your app, and on an instance ref (or in React state). This ensures that data is...

React integration | Fusion API | Fusion.js Engineering

import {prepare} from 'fusion-react'; const Component = prepare(element); ... Typically, you shouldn't need to call prepare yourself, if you're using App from ...

A pain in the react: Challenges behind SSR | Nckweb

Note: getInitialProps can not be used in children components. ... To achieve this, we'll use React Router's matchPath function, ...