async component

[stiff sparrow]

Can you show how you're using the list component? I just tried an simple example and it worked for me

[simple gust]

I do import List from <path>
Then this in my page

[stiff sparrow]

Can you show the article component?

[simple gust]

Btw you said this was a hack. Do we now when react will support async components ?

[stiff sparrow]

Next.js supports the async components but the types havent been updated yet. It should be soon

[simple gust]

Oh ok

Good

[stiff sparrow]

hmm I cant find a way to reproduce the error, do you want to create a codesandbox?

[simple gust]

Ok i've created the sandbox. Let me just find how to share it

https://codesandbox.io/p/github/Nobunaji/ManhwaDex/main?file=%2Fapp%2Fpage.tsx&selection=[{"endColumn"%3A29%2C"endLineNumber"%3A7%2C"startColumn"%3A29%2C"startLineNumber"%3A7}]&workspace=%257B%2522activeFileId%2522%253A%2522cl9zk77o1001clsfw2hcsdv2c%2522%252C%2522openFiles%2522%253A%255B%2522%252FREADME.md%2522%255D%252C%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522gitSidebarPanel%2522%253A%2522COMMIT%2522%252C%2522sidekickItems%2522%253A%255B%257B%2522key%2522%253A%2522cl9zk78hz000k2a69lxs0macq%2522%252C%2522type%2522%253A%2522PROJECT_SETUP%2522%252C%2522isMinimized%2522%253Afalse%257D%252C%257B%2522type%2522%253A%2522PREVIEW%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A3000%252C%2522key%2522%253A%2522cl9zk7ftt00852a69jrcag9ky%2522%252C%2522isMinimized%2522%253Afalse%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522key%2522%253A%2522cl9zk7ed400522a69ydvtw38h%2522%252C%2522isMinimized%2522%253Afalse%257D%255D%257D

Since this is a fork of my github repo. I think i need to give you write access

Well looks like it works for me when opening in a private browser

[stiff sparrow]

what happens if you remove this line
import { useEffect, useState } from "react"; from list.tsx ?

[simple gust]

No changes

They're code i forgot to remove when i was trying to fix this.

[stiff sparrow]

found it pretty sure

In your page.tsx

Either remove 'use client' or remove async from the function

and layout/filter.tsx needs to be marked with 'use client' because tis a client component

[simple gust]

I'll try. But for now i'm eating

Ok. First i can't remove async from the function List because otherwise it cannot use await

[stiff sparrow]

not from list

from the page

from page.tsx

[simple gust]

Nope still same error

I've moved use client from page.tsx to list.tsx and filter.tsx because it needed it as well

[stiff sparrow]

list shouldnt have use client thats gonna cause an error

[simple gust]

Yeah i was dumb and misread this :

Ok it works but for some reason the style isn't applied to filter.tsx

[stiff sparrow]

do npm i next@latest and it should work

there was a bug with styles in client components