Next.js Discord

Discord Forum

client server error i don't get

Unanswered
Giant Chinchilla posted this in #help-forum
Open in Discord
Giant ChinchillaOP
got this wierd error when i import tail-wind mui into my project
./src/app/nav/page.tsx
ReactServerComponentsError:

You're importing a component that needs flushSync. 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

   ╭─[/home/thomas/Dev-Academy/next-js-blog/node_modules/@floating-ui/react/dist/floating-ui.react.esm.js:2:1]
 2 │ import { useLayoutEffect, useEffect, useRef } from 'react';
 3 │ import { hideOthers } from 'aria-hidden';
 4 │ import { tabbable } from 'tabbable';
 5 │ import { createPortal, flushSync } from 'react-dom';
   ·                        ─────────
 6 │ import { getOverflowAncestors, offset, detectOverflow, useFloating as useFloating$1 } from '@floating-ui/react-dom';
 7 │ export { arrow } from '@floating-ui/react-dom';
 8 │ export { autoPlacement, autoUpdate, computePosition, detectOverflow, flip, getOverflowAncestors, hide, inline, limitShift, offset, platform, shift, size } from '@floating-ui/dom';
   ╰────

The error was caused by importing '@material-tailwind/react/index.js' in './src/app/nav/page.tsx'.

Maybe one of these should be marked as a client entry with "use client":
  ./src/app/nav/page.tsx
  ./src/app/page.tsx

8 Replies

Giant ChinchillaOP
does anyone know how to fix it?
i didn't realize i was somehow using server side rendering? thought i'm just using basic clinet side stuff that comes with react
@Giant Chinchilla i didn't realize i was somehow using server side rendering? thought i'm just using basic clinet side stuff that comes with react
riský
nextjs's app dir is server side by default... you have to add "use client" to make it client side (but it still has SSR, so kinda server rendered still)
Giant ChinchillaOP
so i add something like this?
// ./src/app/nav/page.tsx

// @react-server
export default function Page() {
  // ...
}
i don't know what to change
so i just write
'use client' at the top of the page?
fixed the error by writing 'use client' at the top of every page