xenial-black•2y ago

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

30 Replies

kapa.ai•2y 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: ----------------------

kapa.ai•2y ago

<@1014305963219615754> kapa.ai is still learning and improving, please let us know how it did by reacting below

judicial-coral•2y ago

Hello @geoffatsource can you share your package.json with us please ?

xenial-blackOP•2y ago

message.txt

judicial-coral•2y 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

xenial-blackOP•2y ago

Hmm. I got pretty far but when I run npx @refinedev/codemod@latest refine3-to-refine4 I get a couple of errors ...

xenial-blackOP•2y ago

message.txt

xenial-blackOP•2y ago

message.txt

xenial-blackOP•2y 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

judicial-coral•2y ago

i will check this errors Button should import from "antd" instead of "@refinedev/antd'". codemod should do that automatically but its seems failed

xenial-blackOP•2y 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.

Omer•2y 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

xenial-blackOP•2y 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:

xenial-blackOP•2y ago

message.txt

xenial-blackOP•2y 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?

Omer•2y 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?

judicial-coral•2y 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?

xenial-blackOP•2y 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

judicial-coral•2y ago

yes it's possible 🤔 sorry for the confusion

xenial-blackOP•2y 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.

judicial-coral•2y ago

is your project open source ? if it is I can try to debug

xenial-blackOP•2y 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')

sensitive-blue•2y ago

Please make sure you react files has tsx extension.

judicial-coral•2y ago

this is same as this isn't it ?

xenial-blackOP•2y ago

yes I just changed them all to tsx

sensitive-blue•2y ago

Can you try to provide us a minimal reproducible example? Simple file with failing codemod. We will try to help tomorrow.

xenial-blackOP•2y 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

judicial-coral•2y ago

did you solved ?

xenial-blackOP•2y ago

I was unable to get codemod to complete. But, the manual migration is complete, so we can close this issue. Thanks.

judicial-coral•2y ago

sorry for your trouble. I glad to hear that

Upgrade Ant Design from v4 to v5 not working

Did you find this page helpful?