Hey guys, I'm trying to use mantine with next.js app directory router, but i get an 'undefined' error when i try to use a <Flex> component (using this repo: https://github.com/mantinedev/next-app-template)
Any idea why this is? The odd thing is that other mantine components don't get this issue (https://github.com/mantinedev/next-app-template/blob/master/components/Welcome/Welcome.tsx), but when I try importing and using the Flex component it occurs.
#Undefined error when using Flex component from UI library
simple valve
What from I can tell this repo is meant to provide nextjs + mantine working with SSR?
is it that (theme) is used in the Flex.tsx component (https://github.com/mantinedev/mantine/blob/master/src/mantine-core/src/Flex/Flex.tsx) but not in the Text.tsx component? (https://github.com/mantinedev/mantine/blob/master/src/mantine-core/src/Text/Text.tsx)
i.e. is there something about theming / emotion that is not compatible with SSR?
simple valve
can anyone confirm this?
rough kite
i.e. is there something about theming / emotion that is not compatible with SSR?
Emotion and theming is not fully supported uet and something that they are working on
simple valve
Emotion and theming is not fully supported uet and something that they are worki...
thanks for the response alfon, so keeping that in mind, if I want to use e.g. the Flex component in a next.js 13 app directory app, how can I do this? use client in the component is apparently not sufficient
(gives an ```
Error: 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.
Check the render method of Welcome.``` error when i do that)
or do I also need to put 'use client' in layout.tsx
rough kite
or do I also need to put 'use client' in layout.tsx
best not to,
you can compose client component and server component
and still have the best of both server and client components
without converting the entire page to client components
i might need to see code and see where you got it wrong @minor marten
simple valve
repo i'm using is from mantine's creator (https://github.com/mantinedev/next-app-template), and I just made a tiny change in components/Welcome/Welcome.tsx, add Flex to the import on line 1, and changing <> to <Flex> on lines 6 and ending line 21
oh and with use client at the top of that component, if i don't add use client i get a different error: ```
Error: Unsupported Server Component type: undefined
yeah you need to get around that
its better for us if you don't 'use client' any layout or page lol
simple valve
oh ok, i mean yeah i'm happy not use use client if its possible, it's just that in the past when trying to get v13's app directory layout working with Chakra UI, it was the only way
rough kite
ure not supposed to
wait let me try it myself since it doesn't look hard to reproduce
rough kite
oh ok, i mean yeah i'm happy not use `use client` if its possible, it's just tha...
Flex doesn't exist on 7.0.0-alpha.11 for some reason lol
it exist on @latest
simple valve
Yeah i noticed that yesterday in the documentation, but it's exported in the library isn't it?
rough kite
here is what i meant :/ @simple valve
left is using alpha right is npm i @mantine/code@latest
maybe they havent ported the entire thing to 7.0.0
simple valve
yeah that's probably what it is, the discord FAQ recommends not using app directory until v7 is properly released, should I just use v6 until then and port over once v7 is released?
rough kite
yeah that's probably what it is, the discord FAQ recommends not using app direct...
if their dev says so, then
what i would do is to dev on v6
then port it to v7
that is if you like mantine so much <3 haha
simple valve
yeah i prefer ui component libraries over just tailwind / plain css, much more productive
rough kite
the thing is other emotion-based UI like chakra or MUI is not yet fully supported
its nice that mantine is working to have full support
simple valve
yeah I've stopped using chakra for that reason as well lol
rough kite
and its worth waiting i guess haha
simple valve
all good, i'll go the v6 now / v7 later route then
rough kite
yeah i prefer ui component libraries over just tailwind / plain css, much more p...
heyyyyyyyyyy there are also "base" ui component libraries
headless one might say
simple valve
ah like headless UI?
rough kite
thats one of it
like it doesn't depend on root level context like Mantine or Chakra
but only use context when required
simple valve
i did look at their docs ages back, but they support a very small number of components compared to Chakra/Mantine
rough kite
true
not trying to distract your mind but
headlessui is pretty smol
Radix-UI has bigger catalogue
and if you truly want to be freed from client component dependency, there is DaisyUI that's based on tailwindcss :)
simple valve
oh those are actually pretty comprehensive, especially radix, I'll take a closer look
rough kite
if you want pre-built styled using tailwind radix component, check out shadcn
simple valve
damn love the design of shadcn
there's too many libraries to keep track of in the react ecosystem lol
rough kite
so yeah, tailwindcss is not that bad, many good component are based on it haha
rough kite
there's too many libraries to keep track of in the react ecosystem lol
it all depends on the need, the granularity of control, and readyness of it
simple valve
i mean what's the main benefit of radix vs mantine/chakra?
rough kite
https://www.youtube.com/watch?v=CQuTF-bkOgc this video sums it up
rough kite
i mean what's the main benefit of radix vs mantine/chakra?
radix has a smaller footprint since you only install the component you need (like package specifically for dialog, or dropdown)
and radix is headless
simple valve
headless just means without styles right?
rough kite
does not depend on top-level context
simple valve
ah ok
rough kite
but yes its also unstyled
simple valve
"does not depend on top-level context" as in not using the useContext hook?
rough kite
it uses it but not at the top level layout
its designed to work independently
you can still make a design system for the whole app, but you can also use it separately
unless chakra or mantine or MUI, you are forced to use the system
things might break if you use Tailwindcss in MUI or Chakra, forexample.
rough kite
shadcn is like when you use Tailwdincss and radix, but already sets up all the design system itself
so that you can just copy paste shadcn's settings
and customize it on your own
its more like a template than a library
as you know Tailwindcss is preprocessed in the server
simple valve
oh ok
rough kite
stuff like Chakra/Mantine takes advantage of CSS-in-JS which applies css on runtime
which is currently not yet fuilly supported
source: next.js docs
simple valve
it's still not 100% clear to me which dependency is the bottleneck for getting this working in chakra / mantine, is it emotion that needs to update their codebase to support server components?
rough kite
same here :(
simple valve
lol i don't think anybody actually knows
rough kite
someone who are more familiar with react knows
simple valve
shadcn looks very close to what I want, but there's not much point in using that if mantine will support SC soon anyway
rough kite
you can read more about css-in-js here https://nextjs.org/docs/app/building-your-application/styling/css-in-js
rough kite
shadcn looks very close to what I want, but there's not much point in using that...
like i said, id just keep going with v6 and wait for v7 haha
people are still going to keep battling out between shadcn and mantine
simple valve
like i said, id just keep going with v6 and wait for v7 haha
yeah will do, I might give shadcn a try though, who knows maybe i'll like it more? I'm guessing this is what you use?
rough kite
no, i use my own tailwindcss plus radix
its a great way to learn about css and statefull components
simple valve
ah ok
i'm getting brain overload just looking at all of these different approaches lol
rough kite
https://www.youtube.com/watch?v=CQuTF-bkOgc this video sums it up
this video clears everything
and the roles of each ui libraries
simple valve
with shadcn, im seeing some tailwind given as component props, is that basically overwriting the base tailwind props that shadcn ships with?
rough kite
yep
actually
im not familiar with the details of shadcn and what kind of config they use
but i know that shadcn uses tailwind for styling and radix for component states and behaviors
for shadcn is one that i might want to clone and learn to make my own component library in the already saturated market mwa ha ha ha