Are you stuck with v3 Ant Design components?
Do you have a project that was built using Ant Design React UI library version 3? If it is yes time to move on to v4. But how are we going to migrate them without rewriting all of them? Don’t worry Ant design got you.
For the last few months, I’ve been working with Ant Design. For those who don’t know about Ant Design, it is a React UI library you can use on your projects. Check the official website so you can use it on your next React project.
Here’s my experience in migrating from v3 to v4. Let me tell you why I had to do this before getting started. I found this awesome open source project on GitLab called “Entgra IoT server” which is an IoT platform used by thousands of people. It has an App manager that you can publish apps to connected devices. This was using ant design v3 which was the latest by the time it got developed. It has two main UIs for a store and a publisher. Those two UI’s needed to be migrated from v3 to v4. I started my research to find an efficient way to do this. That’s when I found that there’s a script that I can use to migrate.
What is this script? It is a codemod CLI tool called @ant-design/codemod-v4 which helps you to upgrade to v4. After running the script I need to make sure that, are there any UI breaks. I found a few UI breaks in both of them, then I fixed them and got the UI back to the way it was.
By the time I finished my UI testing, I found that It had skipped some of them like icons, forms, etc. In order to call it a “Successful migration,” I had to migrate the files that are skipped by the script manually. I found that ant has a dependency called @ant-design/compatible which will make v3 compatible with the v4 components but if I used it, it won’t be a successful migration.
After I checked the UI breaks and fixed them, I migrated the icons and the forms with separated PRs. Here’s the list of Pull Requests I sent to Entgra.
I’m glad to help Entgra with there product and I learned cool new things. I hope this will be helpful If you also need to do some migration please be sure to go through the documentation before doing this.
I’m going to stop right here. See you in the next one. PEACE ✌️
