Unsupported Server Component type: undefined, using Next.js 13 App router

[alanvww]

• error node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js (1684:8) @ attemptResolveElement
• error Error: Unsupported Server Component type: undefined null
• error node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js (1684:8) @ attemptResolveElement
• error Error: Unsupported Server Component type: undefined

[stephenscaff]

This is a very DOM-reliant FE/client component, that uses UseState, UseEffect, it's not a server side component. Next (and React) now have this notion of Client and Server Side components. With FE/Client components you have to add 'use client' atop your file.

https://nextjs.org/docs/app/building-your-application/rendering/client-components https://react.dev/reference/react/use-client

Not sure how this impacts 3rd party components. Will research right now and report back.

Perhaps i just need to define as a Client Component?

[stephenscaff]

So, i pushed a new version with "use client" defined. Getting "Window is not defined" warnings in server console (strangely), so seems you still have to also load as dynamic import (as mentioned in docs), but with "use client" defined. So, probs the best way to do this now is to create a Cursor component locally like:

'use client'

import dynamic from 'next/dynamic';

const AnimatedCursor = dynamic(() => import('react-animated-cursor'), {
    ssr: false,
});

export default function Cursor() {
  return <AnimatedCursor/>
}

Then import that in your app or layout file.

This seems to work. But, looking into a more robust way to handle better at the component level.

Note that is isolated to Next. Integrated with Vite and Parcel builds without issue. So, def related to Next's SSR and server components as default architecture.

Give the above approach a go and let me know how it goes.

[stephenscaff]

Hey again!

Just related 2.10.1 that has a bunch of updates around Next.js integration (and defining as a client component).

Now, you should be able to rock a simple import, instead of a dynamic import.

Give it a go, let me know.

Will close this for now, but open it back up if you see any issues.

Thanks!