Hey team, I’m attempting to register different/updated versions of the Ant Design components to my codebase. The purpose was to expand access to different Ant components and to make further use of the component capabilities.
For context, Plasmic is syncing with my GitHub repository using Loader, and the site is hosted with Vercel. I have configured the studio’s ‘custom app host’ to the Vercel link as instructed.
I have been following chatbot instructions to register the component and import the relevant libraries, and have a test component showing up in our studio and is functional.
I wanted to confirm the implementation choices that I was guided to take as I don’t quite understand the implications.
The primary change that allowed the component registry to be successful was the use of transpileModules in the ‘next.config.mjs’ file. This is the code change made:
import transpileModules from ‘next-transpile-modules’;
const withTM = transpileModules([
‘antd’,
‘@ant-design/icons’,
‘@ant-design/icons-svg’,
‘@rc-component/util’,
]);
/** @type {import(‘next’).NextConfig} */
const nextConfig = {
reactStrictMode: true,
};
export default withTM(nextConfig);
Are there any issues or ramifications for using transpileModules?
Is there a better way of registering these new components?
As a follow up, the standard Ant Design components are linked to two Style Token presets, one under “Ant Design System 5” and one under “Ant Design Pro Components”. Is there any way to link my newly registered Ant components to the “Ant Design System 5”, and is there a way to remove the “Ant Design Pro Components” and have them instead link to the “Ant Design System 5” version?
Thank you!!