#Confused with client-side module and server-side rendering

1 messages · Page 1 of 1 (latest)

glacial plaza
#

Hello. I am quite new into React Router. I am primarily a Nextjs 15 developer.

I am currently building a portfolio and I needed to add GSAP for some animation. Everything was going great and ran perfectly when tested locally. Then I deployed to Vercel but got an internal server crash (500) due to GSAP importing issue.

I am suspecting issue might arise from the fact that GSAP is a client side animation library. When I used GSAP back in Nextjs, I would just mark the component using GSAP as "use client" and everything worked beautifully.

To do the same, I checked the RR docs and came to know that client side components are defined like component.client.tsx. I renamed my components like that, but now the project is breaking down locally.

The error says Oops! Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. I don't quite understand what is trying to say tbh.

Would highly appreciate some assistance.

image.png image.png image.png
glacial plaza
#

this is the current repo which caused the vercel crash

gaunt blaze
#

hmmm since you're deploying on vercel you might have an easier time targeting commonjs. You'll need to change this in package.json:

- "type": "module"
+ "type": "commonjs"

and add this in react-router.config.ts:

   ssr: true,
+  serverModuleFormat: 'cjs',
glacial plaza