Antd + Nextjs modules issue [ThemedLayoutContextProvider adds 6500 modules]!

[w20k]

Hi,

I have a project set up with antd, refine, and Next.js (scaffold: npm create refine-app@latest), and it begins with 6974 modules compiled during the initial load. I'm just wondering if there's a viable solution to improve its speed or if someone has discovered an option to address this issue.

**still looking for an issue.

Same setup, but already added few crud pages, but pretty much same thing as a scaffold.

So, had to manually copy/paste notificationProvider and change path for RefineThemes. Now it's a bit better, 200ms instead of 2000ms :)

//SIder, Header, Title and main ThemeLayout also should be copied
import { ThemedLayoutContextProvider } from '@refinedev/antd';
import { useThemedLayoutContext } from '@refinedev/antd';
///
import { ErrorComponent } from '@refinedev/antd';
....
import { notificationProvider } from '@refinedev/antd 
....
import { RefineThemes } from '@refinedev/antd';

After coping those files into the project - it helped drastically. Still kind of bad, but better then it was.

node: v18.16.0
npm: 9.8.1
yarn: 1.22.19

[BatuhanW]

Hey @w20k, thanks for the report, we'll check it and get back to you.

[omeraplak]

Hey @w20k , apologies for the inconvenience. We suspect it's due to the ant-design/pro package. We're on it and will keep you posted

[w20k]

Are there any updates, or can you point me in the right direction for further research? I'm considering to give it a go and look at it. Working with antd and refine in development has become quite challenging.

[BatuhanW]

Hello @w20k, can you add the following line to your next.config.js file and let us know if that fixes your issue?

transpilePackages: [
    "@ant-design/icons-svg",
    "@refinedev/nextjs-router",
    "@refinedev/antd",
    "antd",
    "@ant-design/pro-components",
    "@ant-design/pro-layout",
    "@ant-design/pro-utils",
    "@ant-design/pro-provider",
    "rc-pagination",
    "rc-picker",
    "rc-util",
  ],

[w20k]

Hello, @BatuhanW, will do! Thank you!
I will test on my local project and demo to be sure if it's working or not!

[w20k]

Clean project:

Local Pet Project:

Pet project a little bit better, but still the same 😄

[BatuhanW]

Folks, I want to clarify that this issue isn't related to Refine, but it's an issue between NextJS and Ant Design.

There are some open issues on nextjs side, which you can track for updates.

vercel/next.js#48748

vercel/next.js#5180

[w20k]

Thanks for your comment. Will use this 'discussion' to track those issues and update, if somehow they will resolve it 👍