Upgrade Ant Design from v4 to v5 not working

I am trying to upgrade Ant Design from v4 to v5 so that I can upgrade Refine. As per your docs, I am using npm run refine update and am getting the following error:
/client/refine/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
throw ex;
^

Error: Project type not found
at E (/Users/geoffatsource/dev/procurement-admin/client/refine/node_modules/@pankod/refine-cli/dist/cli.js:2:6383)
at hr (/Users/geoffatsource/dev/procurement-admin/client/refine/node_modules/@pankod/refine-cli/dist/cli.js:2:7757)
at no (/Users/geoffatsource/dev/procurement-admin/client/refine/node_modules/@pankod/refine-cli/dist/cli.js:19:2373)
at Object.<anonymous> (/Users/geoffatsource/dev/procurement-admin/client/refine/node_modules/@pankod/refine-cli/dist/cli.js:19:2563)
at Module._compile (node:internal/modules/cjs/loader:1155:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
at Module.load (node:internal/modules/cjs/loader:1033:32)
at Function.Module._load (node:internal/modules/cjs/loader:868:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:22:47
/client/refine/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
throw ex;
^

Error: Project type not found
at E (/Users/geoffatsource/dev/procurement-admin/client/refine/node_modules/@pankod/refine-cli/dist/cli.js:2:6383)
at hr (/Users/geoffatsource/dev/procurement-admin/client/refine/node_modules/@pankod/refine-cli/dist/cli.js:2:7757)
at no (/Users/geoffatsource/dev/procurement-admin/client/refine/node_modules/@pankod/refine-cli/dist/cli.js:19:2373)
at Object.<anonymous> (/Users/geoffatsource/dev/procurement-admin/client/refine/node_modules/@pankod/refine-cli/dist/cli.js:19:2563)
at Module._compile (node:internal/modules/cjs/loader:1155:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
at Module.load (node:internal/modules/cjs/loader:1033:32)
at Function.Module._load (node:internal/modules/cjs/loader:868:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:22:47
K
kapa.ai215d ago
Hi @geoffatsource. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. The error message you're seeing seems to be related to the refine update command not being able to identify the project type. However, the provided extracts do not contain specific information about this error. As an alternative, you can try updating the @refinedev/antd package manually to version 4.x.x using the following command:
npm i @refinedev/antd@latest
npm i @refinedev/antd@latest
Also, you can use the @refinedev/codemod package to handle the breaking changes for your project automatically. This will migrate your @refinedev/antd version from 3.x.x to 4.x.x without any manual steps. You can do this by running the following command in the root folder of your project (where package.json is contained):
npx @refinedev/codemod antd4-to-antd5
npx @refinedev/codemod antd4-to-antd5
Please note that customized or swizzled components and .less files cannot be migrated automatically. You need to migrate them manually. For more detailed information, please refer to the Migration Guide (https://refine.dev/docs/api-reference/antd/migration-guide/v4-to-v5/) and the Migrating from 3.x.x to 4.x.x Guide (https://refine.dev/docs/migration-guide/3x-to-4x/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
K
kapa.ai215d ago
<@1014305963219615754> kapa.ai is still learning and improving, please let us know how it did by reacting below
A
adverse-sapphire215d ago
Hello @geoffatsource can you share your package.json with us please ?
R
reduced-jade215d ago
A
adverse-sapphire215d ago
if i remember correctly with that version of CLI, it was only checking dependencies for project type validation and not considering devDependencies. this was bug and we fixed in newer versions you can install npm i @refinedev/cli@latest or you can move your "react-scripts" to dependencies from devDependencies ofc after update you can change to devDependencies again
R
reduced-jade214d ago
Hmm. I got pretty far but when I run npx @refinedev/codemod@latest refine3-to-refine4 I get a couple of errors ...
R
reduced-jade214d ago
R
reduced-jade214d ago
R
reduced-jade214d ago
.. but it does finish with no errors?
Results:
0 errors
30 unmodified
0 skipped
76 ok
Time elapsed: 5.071seconds
npm WARN using --force Recommended protections disabled.

added 4 packages, removed 9 packages, changed 2 packages, and audited 2138 packages in 11s
Results:
0 errors
30 unmodified
0 skipped
76 ok
Time elapsed: 5.071seconds
npm WARN using --force Recommended protections disabled.

added 4 packages, removed 9 packages, changed 2 packages, and audited 2138 packages in 11s
but when I try to run everything locally I get about 900 errors. Most of them are cannot resolve @pankod/refine-x but then if I manually fix those... ... I get hundreds of errors like this:
export 'Button' (imported as 'Button') was not found in '@refinedev/antd' (possible exports: AuthPage, AutoSaveIndicator, BooleanField, Breadcrumb, CloneButton, Create, CreateButton, DateField, DeleteButton, Edit, EditButton, EmailField, ErrorComponent, ExportButton, FileField, FilterDropdown, Header, ImageField, ImportButton, Layout, List, ListButton, LoginPage, MarkdownField, NumberField, PageHeader, ReadyPage, RefineThemes, RefreshButton, SaveButton, Show, ShowButton, Sider, TagField, TextField, ThemedHeader, ThemedHeaderV2, ThemedLayout, ThemedLayoutContext, ThemedLayoutContextProvider, ThemedLayoutV2, ThemedSider, ThemedSiderV2, ThemedTitle, ThemedTitleV2, Title, UrlField, WelcomePage, getDefaultFilter, getDefaultSortOrder, getValueFromEvent, mapAntdFilterToCrudFilter, mapAntdSorterToCrudSorting, notificationProvider, useCheckboxGroup, useDrawerForm, useEditableTable, useFileUploadState, useForm, useImport, useModal, useModalForm, useRadioGroup, useSelect, useSiderVisible, useSimpleList, useStepsForm, useTable, useThemedLayoutContext)
export 'Button' (imported as 'Button') was not found in '@refinedev/antd' (possible exports: AuthPage, AutoSaveIndicator, BooleanField, Breadcrumb, CloneButton, Create, CreateButton, DateField, DeleteButton, Edit, EditButton, EmailField, ErrorComponent, ExportButton, FileField, FilterDropdown, Header, ImageField, ImportButton, Layout, List, ListButton, LoginPage, MarkdownField, NumberField, PageHeader, ReadyPage, RefineThemes, RefreshButton, SaveButton, Show, ShowButton, Sider, TagField, TextField, ThemedHeader, ThemedHeaderV2, ThemedLayout, ThemedLayoutContext, ThemedLayoutContextProvider, ThemedLayoutV2, ThemedSider, ThemedSiderV2, ThemedTitle, ThemedTitleV2, Title, UrlField, WelcomePage, getDefaultFilter, getDefaultSortOrder, getValueFromEvent, mapAntdFilterToCrudFilter, mapAntdSorterToCrudSorting, notificationProvider, useCheckboxGroup, useDrawerForm, useEditableTable, useFileUploadState, useForm, useImport, useModal, useModalForm, useRadioGroup, useSelect, useSiderVisible, useSimpleList, useStepsForm, useTable, useThemedLayoutContext)
it looks like it's not actually fully completing the codemod upgrade. Not sure what to do
A
adverse-sapphire214d ago
i will check this errors Button should import from "antd" instead of "@refinedev/antd'". codemod should do that automatically but its seems failed
R
reduced-jade214d ago
The refinedev codemod antd upgrade from v4 to v5 doesn't seem to do very much at all and the docs (https://refine.dev/docs/api-reference/antd/migration-guide/v4-to-v5/#updating-the-packages) are referring to both v4 to v5 and v3 to v4 in the same document. We're stuck.
Migration Guide | refine
Ant Design released a new major version, v5. This document will help you upgrade from antd 4.x version to antd 5.x version.
O
Omer213d ago
We're sorry to hear that. Could you provide more details about your situation? Honestly, we were able to migrate more than 100 projects without any issues
R
reduced-jade200d ago
Thanks for the reply Omer. I believe you! I will gather more info on Monday. 🙂 finally getting back to this. upgrade still fails. Here's a log of what I did: finally getting back to this. upgrade still fails. Here's a log of what I did:
R
reduced-jade200d ago
R
reduced-jade200d ago
It looks like it changed 80 of 110 or so files, but there are still a lot of bad references to @pankod/refine-x and the code does not compile do you offer paid consultation services?
O
Omer197d ago
It seems we're encountering an error while parsing a file. @core, any idea on how we can identify the file causing this error?
A
adverse-sapphire197d ago
hello @geoffatsource It appears that there are bugs in the CodeMod, and we need to add some controls. However, when an error occurs, CodeMod should not stop. It should only not work on the page where it encountered an error, and continue working on other pages. Can you confirm this? For example, CodeMod has run on these pages:
OKK src/components/spec-relations/create.tsx
OKK src/components/spec-products/list.tsx
OKK src/components/spec-products/edit.tsx
OKK src/components/spec-pricings/create.tsx
OKK src/components/spec-pricings/import.tsx
OKK src/components/spec-pricings/refresh-button.tsx
OKK src/components/products-custom/create.tsx
OKK src/components/projects/procurement-button.tsx
OKK src/components/spec-relations/create.tsx
OKK src/components/spec-products/list.tsx
OKK src/components/spec-products/edit.tsx
OKK src/components/spec-pricings/create.tsx
OKK src/components/spec-pricings/import.tsx
OKK src/components/spec-pricings/refresh-button.tsx
OKK src/components/products-custom/create.tsx
OKK src/components/projects/procurement-button.tsx
However, NOC src/components/specs/fields.ts gave an error with CodeMod, and there is probably no need for CodeMod on this page. Am I mistaken?
R
reduced-jade197d ago
yes, it continues to run, and you're correct about fields.ts. As an aside, I have discovered that I am on @pankod/refine-antd@3.70.4 and also using some components from antd@4.24.12 which may be causing some issues. I am working to port to @pankod/refine-antd@4.9.0 before I try again but it's a slow process
A
adverse-sapphire197d ago
yes it's possible 🤔 sorry for the confusion
R
reduced-jade196d ago
I am still completely stuck. Your v3 to v4 codemod does not work for me at all. It could not even update the imports properly in App.ts which is disappointing. I don't know what else to tell you other than it doesn't work. So I have some .ts files in my project (they are not components). If I rename all my .ts files to .tsx it gets further, changing about 160 files vs previously getting through only about 80 files. ... and down to 39 errors from 998, which is good.
A
adverse-sapphire196d ago
is your project open source ? if it is I can try to debug
R
reduced-jade196d ago
Unfortunately no, this is for work. It seems that /Users/geoffatsource/dev/procurement-admin/client/refine/node_modules/@refinedev/codemod/dist/transformations/v4/fix-v4-deprecations.js is erroring, causing those workers to abort.
/Users/***/refine/node_modules/@refinedev/codemod/dist/transformations/v4/fix-v4-deprecations.js:86
const sortProperty = p.node.arguments[0].properties.find(p => p.key.name === "sorter");

TypeError: Cannot read properties of undefined (reading 'find')
/Users/***/refine/node_modules/@refinedev/codemod/dist/transformations/v4/fix-v4-deprecations.js:86
const sortProperty = p.node.arguments[0].properties.find(p => p.key.name === "sorter");

TypeError: Cannot read properties of undefined (reading 'find')
/Users/***/refine/node_modules/@refinedev/codemod/dist/transformations/v4/fix-v4-deprecations.js:398
const options = resources.value.expression.elements.filter(p => {
^

TypeError: Cannot read properties of undefined (reading 'filter')
/Users/***/refine/node_modules/@refinedev/codemod/dist/transformations/v4/fix-v4-deprecations.js:398
const options = resources.value.expression.elements.filter(p => {
^

TypeError: Cannot read properties of undefined (reading 'filter')
C
conscious-sapphire196d ago
Please make sure you react files has tsx extension.
A
adverse-sapphire196d ago
this is same as this isn't it ?
R
reduced-jade196d ago
yes I just changed them all to tsx
C
conscious-sapphire196d ago
Can you try to provide us a minimal reproducible example? Simple file with failing codemod. We will try to help tomorrow.
R
reduced-jade195d ago
I think that would take quite a bit of time... we'll see I finally got migration done manually. Still lots of cleanup to do but it compiles and runs
A
adverse-sapphire195d ago
did you solved ?
R
reduced-jade195d ago
I was unable to get codemod to complete. But, the manual migration is complete, so we can close this issue. Thanks.
A
adverse-sapphire194d ago
sorry for your trouble. I glad to hear that
More Posts
Handle Errors inside of Forms being posted to a custom APIHey everyone! We're using Refine to such a great extend and I'm very thankful for all the work that How can I just see the current fields value?So this seems like a really dumb question, but using refine, its really difficult to use the value oHow to hide edit button action on specific row at list resourcehiding edit action for specific data in list resourceUnable to modify login error messageIn this documentation https://refine.dev/docs/api-reference/core/components/auth-page/#login Under aredirect to edit after create successi want to redirect user to edit page with its id after create is successfuladding data from useCustom in useForm default values``` const { data } = useCustom({ method: "get", url: "/advertisers/initialize", useCustom filterhey, is it possible to set filter when using useCustom to get a specific range of dates when fetchinhandle axios console error coming from useCreate````import { HttpError } from "@refinedev/core"; import axios, { AxiosRequestConfig } from "axios"; How to use nested Route with antdInferenceHow to use nested Route with antdInferencehandling errors and accessing objects``` onError: async (error) => { console.log(error); if ( error.statusCustom title handler with Typescriptwrite a custom title handler with TypescriptIs Simple-rest made for auth ?is simple rest made just for basic api calls? cause i m trying to implement auth and its forcing me How to use react router lazy for routes?I want to use the react router lazy api to load the components on route as example here https://reacUseTable does not call Connection endpoint for countI did a quick tutorial where I had a single book page with Refine and Ant. I defined the resources iHow to navigate to a list page with a filter parameter?I want to navigate to a list page by setting some filter parameter in the URL. How can I achieve thaGet return value from Edit page```tsx <Edit saveButtonProps={saveButtonProps} > <Form {...formProps} layout="vertical" onFiniAntdInferencer not workingI'm trying to use AntdInferencer when create but it keep showing loading button ```tsx </Route> tutorial is very slow to loadHi, I'm newbie and trying to learn refine.(attracted by the rich features), but the first problem I How to set global error and success notification?I want to set the notification for error and success of API calls globally. Is there a way to implemDebounce on list table CRUD search```tsx const { tableProps, searchFormProps } = useTable<IUser, HttpError, IUserFilterVariables>({