full error report:

Failed to compile

./node_modules\framer-motion\dist\es\animation\hooks\use-animated-state.mjs
ReactServerComponentsError:

You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
Learn more: https://nextjs.org/docs/getting-started/react-essentials

   ,-[C:\Users\val_m\Documents\GitRepos\nextjs-slottracker\node_modules\framer-motion\dist\es\animation\hooks\use-animated-state.mjs:1:1]
 1 | import { useState, useEffect } from 'react';
   :                    ^^^^^^^^^
 2 | import { useConstant } from '../../utils/use-constant.mjs';
 3 | import { getOrigin, checkTargetForNewValues } from '../../render/utils/setters.mjs';
 4 | import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';
   `----

Maybe one of these should be marked as a client entry with "use client":
  ./node_modules\framer-motion\dist\es\animation\hooks\use-animated-state.mjs
  ./node_modules\framer-motion\dist\es\index.mjs
  ./src\app\Components\Pages\Main\Loading.tsx
  ./src\app\page.tsx

This error occurred during the build process and can only be dismissed by fixing the error.

try "use client" on top of the code?

looks like the problem is coming from within the framer-motion library. I suggested him deep diving into the node_module files and add "use client" but deleted it bc idk if it's a good idea.

@Bigheaded ant look at the github and check on the progress of them adding client/server components into the library

No need to do this when you could just create a new client component that wraps the issue component

im no expert by all means, but wouldn't that mean you're wrapping a server component inside a client component

a child client component just to fix this issue?

already did it

I don't know I was just indicating that if the issue is a library component that doesn't have use client and needs it you could wrap it in your own use client component rather than trying to edit something in node modules

oh try older versions

i dont have more ideaxd

he is right

i will just stand by framer-motion components for now then, the main porpuse of this project is to learn next 13 features

soo using a older next is not a option right now

wrap motion.button inside a client component then import that wrapped component to your loading.tsx passing in the necessary props

yeah, i just did it

its kinda messy to plan the UI doing that

because animating a lot of components means to use client component on top of everything

im sure framer motion will compatibility soon, just look out for updates, sorry about the confusion earlier.

:((

no problem, i am here to learn

don't worry me to xd