adverse-sapphire
adverse-sapphireโ€ข3y ago

useTable from refine-react-table is killing my IDE

Hi! I'm using refine with the new mantineUI integration. I'm trying to get a list working for some easy entities, but as soon as I import useTable from the @pankod/refine-react-table (copying an example from the official repo https://github.com/pankod/refine/blob/next/examples/authentication/mantine/src/pages/posts/list.tsx) my IDE (jetBrains WebStorm) takes at least 30 seconds to complete each post-save action (only import optimization and reformat with prettier). If i remove the useTable import, it goes back to instant post-save actions as always.. Any guess?
36 Replies
Omer
Omerโ€ข3y ago
Hey @kino90 ๐Ÿ‘‹ , Welcome, we are glad to see you! Very interesting. So, are you experiencing the same issue in this example? https://github.com/pankod/refine/blob/next/examples/table/reactTable/basic/src/pages/posts/list.tsx
adverse-sapphire
adverse-sapphireOPโ€ข3y ago
let me try ๐Ÿ™‚
adverse-sapphire
adverse-sapphireOPโ€ข3y ago
I don't know how to reproduce this on your monorepo. I'm getting this error even if i installed deps both in the main repo folder and in the example :/
No description
Omer
Omerโ€ข3y ago
just copy/paste the page into your project. So you can easily try
adverse-sapphire
adverse-sapphireOPโ€ข3y ago
ah ok in my project ๐Ÿ™‚
Omer
Omerโ€ข3y ago
We just want to be sure if it's about the "@pankod/refine-mantine" package or the "@pankod/refine-react-table" package ๐Ÿ‘€
adverse-sapphire
adverse-sapphireOPโ€ข3y ago
Done, it's definetely the useTable from "@pankod/refine-react-table"
Omer
Omerโ€ข3y ago
adverse-sapphire
adverse-sapphireOPโ€ข3y ago
if i save with import { useTable, ColumnDef, flexRender } from "@pankod/refine-react-table"; it freezes everything for 30sec more or less, if I save with import { ColumnDef, flexRender } from "@pankod/refine-react-table"; (without useTable) it's instant `
Omer
Omerโ€ข3y ago
Could you try this?
import {
createColumnHelper,
flexRender,
getCoreRowModel,
useReactTable,
} from '@tanstack/react-table'
import {
createColumnHelper,
flexRender,
getCoreRowModel,
useReactTable,
} from '@tanstack/react-table'
adverse-sapphire
adverse-sapphireOPโ€ข3y ago
using this (and using useReactTable instead of useTable) saves quickly
Omer
Omerโ€ข3y ago
Thanks. Let's see what we can do ๐ŸŽ
adverse-sapphire
adverse-sapphireOPโ€ข3y ago
Thanks a lot ๐Ÿ‘
Omer
Omerโ€ข3y ago
I guess I couldn't reproduce the issue ๐Ÿ˜ฆ
adverse-sapphire
adverse-sapphireOPโ€ข3y ago
No description
adverse-sapphire
adverse-sapphireOPโ€ข3y ago
you can see from the gif that: 1- it takes a lot for the import 2- after the save, it takes a lot for the optimizations
Omer
Omerโ€ข3y ago
@aliemirs Have you any idea? Could it be related to types? @kino90 could you try version @pankod/refine-react-table@4.5.0? npm i @pankod/refine-react-table@4.5.0
adverse-sapphire
adverse-sapphireOPโ€ข3y ago
I'll try it as soon as I'll be back to my desk ๐Ÿ˜‰
ambitious-aqua
ambitious-aquaโ€ข3y ago
Hey! Sorry I had trouble with my discord connection. Interesting issue @kino90, can you also try using useTable from @pankod/refine-core? Let's see if we have the issue is coming from the core or the react-table itself ๐Ÿค” Also trying to repro the issue ๐Ÿ˜…
adverse-sapphire
adverse-sapphireOPโ€ข3y ago
useTable from refine-core looks ok (but does not return the correct values, as typescript is marking everything as error ๐Ÿ˜‚ )
adverse-sapphire
adverse-sapphireOPโ€ข3y ago
No description
adverse-sapphire
adverse-sapphireOPโ€ข3y ago
but the import and save are quick now I'll try updating to 4.5.0 after installing 4.5.0 still have problems importing useTable
adverse-sapphire
adverse-sapphireOPโ€ข3y ago
My project settings are pretty basic, too.. I just added prettier ๐Ÿซค
adverse-sapphire
adverse-sapphireOPโ€ข3y ago
@pankod/refine-antd is there because I'm actually trying to porting a POC from antd to our preferred UI Kit (Mantine UI) I also tried to run prettier --write ./path/to/file.tsx on the file which includes useTable to see if it was a prettier problem, but it runs smoothly from CLI (also, it won't give problems IMPORTING the hook, but only when SAVING ๐Ÿ˜‰ ) so it's clearly not prettier I disabled "optimize imports" functionality from "Actions on save" panel, and it's OK now, so it's something related to imports Maybe that helps you to reproduce the issue ๐Ÿ™‚
Omer
Omerโ€ข3y ago
I think this PR will fix the issue, https://github.com/pankod/refine/pull/2645
GitHub
fix: react-table export type by omeraplak ยท Pull Request #2645 ยท pa...
Please provide enough information so that others can review your pull request: UseTableProps and UseTableReturnType are exported as type. Closing issues Could potentially solve this problem -> h...
Omer
Omerโ€ข3y ago
Hey @kino90 , Could you try version @pankod/refine-react-table@4.7.3?
adverse-sapphire
adverse-sapphireOPโ€ข3y ago
installing ๐Ÿ˜‰ still very slow while importing and during imports optimizations ๐Ÿ˜ข
Omer
Omerโ€ข3y ago
frankly, I was hopeful hehe
adverse-sapphire
adverse-sapphireOPโ€ข3y ago
I was, too ahaha I solved the main issue disabling the "optimize imports" feature at every save, so I can keep working on the app.. but the problem is still there, just not as blocking..
Omer
Omerโ€ข3y ago
So can you do the same test for @pankod/refine-react-hook-form? https://github.com/pankod/refine/blob/master/examples/form/reactHookForm/useForm/src/pages/posts/create.tsx I have a guess
Omer
Omerโ€ข3y ago
I think this might work ๐Ÿ‘€ https://github.com/pankod/refine/pull/2648
GitHub
refactor: update@tanstack/react-table exports by omeraplak ยท Pull...
Please provide enough information so that others can review your pull request: We've updated @tanstack/react-table exports Closing issues Could potentially solve this issue -> https://discor...
Omer
Omerโ€ข3y ago
Hey @kino90 , Could you try version @pankod/refine-react-table@4.7.4 ? Thank you โšก๏ธ
adverse-sapphire
adverse-sapphireOPโ€ข3y ago
installing
adverse-sapphire
adverse-sapphireOPโ€ข3y ago
same ๐Ÿ˜ข
Omer
Omerโ€ข3y ago
I will look into this issue ๐Ÿ‘€