correct-apricot•12mo 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•12mo 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•12mo ago

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

eager-peach•12mo ago

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

correct-apricot•12mo ago

message.txt

eager-peach•12mo 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

correct-apricot•12mo ago

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

correct-apricot•12mo ago

message.txt

correct-apricot•12mo ago

message.txt

correct-apricot•12mo 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

eager-peach•12mo ago

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

correct-apricot•12mo 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•12mo 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

correct-apricot•12mo 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:

correct-apricot•12mo ago

message.txt

correct-apricot•12mo 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?