Theme tokens don't work for generatePicker

[kembly]

Reproduction link

https://github.com/ant-design/ant-design

Steps to reproduce

1. Set colorPrimary in antd config
2. Observe DatePicker generated via generatePicker is ignoring the custom theme.

What is expected?

The custom color theme set in the antd config will be adopted by the date picker created from: generatePicker.

What is actually happening?

The custom color theme is ignored for the DatePicker which is created via generatePicker

Environment	Info
antd	5.1.7
React	React 18
System	Windows
Browser	Chrome

[github-actions]

You may look for issues:

1. 52% tagFontSize doesnt work in seed token config #40016
2. 51% Ant Design Theme Editor theme upload #39620

_{🤖 By issues-similarity-analysis}

[github-actions]

Hello @kembly. Please provide a online reproduction by forking codesandbox of antd@5.x or antd@4.x, or provide a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 3 days.

你好 @kembly, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击这里创建一个 antd@5.x 或 antd@4.x 的 codesandbox，或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。

[janarvaez]

Hello @afc163! I just reproduced the issue in this sandbox:
https://codesandbox.io/s/antd-reproduction-template-forked-3li8e2?file=/index.js

[MadCcc]

Change lib to es and everything looks good. It's problem width different context instance.
https://codesandbox.io/s/antd-reproduction-template-forked-pkpgbi

[sorokinvj]

@MadCcc thanks for the example! doesn't work in my case with dayjs though:

import generatePicker from 'antd/es/date-picker/generatePicker'
import { Dayjs } from 'dayjs'
import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs' // same error if I use es here

export const DatePicker = generatePicker<Dayjs>(dayjsGenerateConfig)

gives me:

Server Error
SyntaxError: Cannot use import statement outside a module

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
file:///Users/.../node_modules/antd/es/date-picker/generatePicker/index.js (1)
Object.compileFunction
node:vm (360:18)
wrapSafe
node:internal/modules/cjs/loader (1055:15)
Module._compile
node:internal/modules/cjs/loader (1090:27)
Object.Module._extensions..js
node:internal/modules/cjs/loader (1180:10)
Module.load
node:internal/modules/cjs/loader (1004:32)
Function.Module._load
node:internal/modules/cjs/loader (839:12)
Module.require
node:internal/modules/cjs/loader (1028:19)
require
node:internal/modules/cjs/helpers (102:18)
Object.antd/es/date-picker/generatePicker
file:///Users/.../.next/server/pages/_app.js (2898:18)
__webpack_require__
file:///Users/.../.next/server/webpack-runtime.js (33:42)

I am using NextJs 12.3.4 and antd 5.2.1

[zahirekrem09]

@MadCcc thanks for the example! doesn't work in my case with dayjs though:

import generatePicker from 'antd/es/date-picker/generatePicker'
import { Dayjs } from 'dayjs'
import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs' // same error if I use es here

export const DatePicker = generatePicker<Dayjs>(dayjsGenerateConfig)

gives me:

Server Error
SyntaxError: Cannot use import statement outside a module

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
file:///Users/.../node_modules/antd/es/date-picker/generatePicker/index.js (1)
Object.compileFunction
node:vm (360:18)
wrapSafe
node:internal/modules/cjs/loader (1055:15)
Module._compile
node:internal/modules/cjs/loader (1090:27)
Object.Module._extensions..js
node:internal/modules/cjs/loader (1180:10)
Module.load
node:internal/modules/cjs/loader (1004:32)
Function.Module._load
node:internal/modules/cjs/loader (839:12)
Module.require
node:internal/modules/cjs/loader (1028:19)
require
node:internal/modules/cjs/helpers (102:18)
Object.antd/es/date-picker/generatePicker
file:///Users/.../.next/server/pages/_app.js (2898:18)
__webpack_require__
file:///Users/.../.next/server/webpack-runtime.js (33:42)

I am using NextJs 12.3.4 and antd 5.2.1

did you solve this error, i am getting the same error but i couldn't solve it.

[Lolinpiko]

@sorokinvj / @zahirekrem09 Did you found a solution, i'm getting the same error

[zahirekrem09]

Unfortunately, I couldn't find it, but as far as I've told, it seems like an improvement has been made, I don't know when it will be published.

[dquang-tran]

Yep, problem still there

[zahirekrem09]

Yep, problem still there

`import React from 'react'

import { DatePicker } from 'antd'

import momentGenerateConfig from 'rc-picker/lib/generate/moment'

const HDatePicker = DatePicker.generatePicker(momentGenerateConfig)

export default HDatePicker
"antd": "5.5.0",`

[dquang-tran]

My problem was that the theme algorithm wasn't being picked up

<ConfigProvider
  theme={{
    algorithm: darkAlgorithm,
    token: {
      colorBgContainer: 'transparent',
      colorPrimary: colors.zinc[300],
    },
  }}
>

and that was due to my imports referring to lib, which I implemented due to this problem so. I changed it back to es, fixed the original issue by adding transpilePackages to my next.config.js, and now everything works

I'm on 5.8.4