ant-design
Dayjs DatePicker doesn't respect Day.js locale from Config Provider (nextjs)
- [ v] I have searched the issues of this repository and believe that this is not a duplicate.
Related but doesn't work for me: https://github.com/ant-design/ant-design/issues/27815
Reproduction link
https://github.com/chemicalkosek/antd-dayjs-next
Steps to reproduce
- Clone repository
- Launch with npm run dev
- See that the Datepicker with inline locale setup works. The other one doesn't respect the ConfigProvider (or actually the days locale)
- If without stopping the dev server I change
libtoesin the line:
import generatePicker from "antd/lib/date-picker/generatePicker";
to:
import generatePicker from "antd/es/date-picker/generatePicker";
I can see now with hot refresh that it works!
All the week names etc are in pl locale.
But If I refresh the page or stop the dev server and run again npm run dev (or build to production), I'l get the following error:
/home/maciek/Dokumenty/websites/antd-dayjs-next/node_modules/antd/es/date-picker/generatePicker/index.js:1
import _extends from "@babel/runtime/helpers/esm/extends";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:979:16)
at Module._compile (internal/modules/cjs/loader.js:1027:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at eval (webpack-internal:///antd/es/date-picker/generatePicker:1:18)
at Object.antd/es/date-picker/generatePicker (/home/maciek/Dokumenty/websites/antd-dayjs-next/.next/server/pages/index.js:149:1)
at __webpack_require__ (/home/maciek/Dokumenty/websites/antd-dayjs-next/.next/server/pages/index.js:23:31)
at eval (webpack-internal:///./components/DayjsDatePicker.js:4:92)
at Module../components/DayjsDatePicker.js (/home/maciek/Dokumenty/websites/antd-dayjs-next/.next/server/pages/index.js:104:1)
at __webpack_require__ (/home/maciek/Dokumenty/websites/antd-dayjs-next/.next/server/pages/index.js:23:31)
at eval (webpack-internal:///./pages/index.js:9:85)
at Module../pages/index.js (/home/maciek/Dokumenty/websites/antd-dayjs-next/.next/server/pages/index.js:127:1)
at __webpack_require__ (/home/maciek/Dokumenty/websites/antd-dayjs-next/.next/server/pages/index.js:23:31)
What is expected?
The dayjs locale works in dayjs Date Picker
What is actually happening?
The default english dayjs locale is seen
| Environment | Info |
|---|---|
| antd | 4.14.1 |
| React | 17.0.2 |
| System | Ubuntu 20.04 |
| Browser | Chrome 89 |
Similar issues which may help
- https://github.com/ant-design/ant-design/issues/29595
- https://github.com/ant-design/ant-design/issues/29306
- https://github.com/ant-design/ant-design/issues/21094
- https://github.com/ant-design/ant-design/issues/26985
- https://github.com/ant-design/ant-design/issues/23365
- https://github.com/ant-design/ant-design/issues/22802
- https://github.com/ant-design/ant-design/issues/29595
Thanks. I'm aware of those issues, I have spent days (weeks :)) trying to get antd and nextjs working with treeshaking.
I think I've read all the issues at antd and nexjts github :)
The thing is I can get js treeshaking working (and Day.js locale working globally on pickers) with babel-plugin-import.
But then it generates conflicting order between chunks from mini-css-extract-plugin, which sometimes breaks dev styles.
While that may not be a big issue, it also generates 30kb (603kb -> 633kb) more first load on the app.
Page Size First Load JS
┌ λ / 56 kB 631 kB
As I have recently noticed you no longer recommend the babel-plugin-import, I have tested the project without it and everything looks great!
The js treeshaking works.
The first load JS is now 603kb and there are no conflicting-order issues!
It is the leanest build ever and I don't mind loading the whole less file.
Also notice the size is 712b instead of 56kb
Page Size First Load JS
┌ λ / 712 B 603 kB
There's this one 'but' here. The issue I'm raising here is the only thing that doesn't work.
Either the Day.js locale doesn't work on antd picker with antd/lib/ generatePicker import OR it doesn't build with antd/es import while creating the error:
import _extends from "@babel/runtime/helpers/esm/extends";
^^^^^^
SyntaxError: Cannot use import statement outside a module
Since everything runs smoothly apart of this Day.js picker locale, my question is if there's actually an issue with how the Day.js picker is imported and/or generated and if anything can be done with it (either on my side or yours)? I would really like to ditch the babel-plugin-import as it's looking great now! It would be best if the lib generatePicker import worked with the Day.js locale.
So I think the main issue is Day.js locale not working on Day.js picker when doing the lib import.
Because the locale is the only problem, not the Picker itself.
Even the DatePicker component locale from configProvider works!
Like the translation from 'Select Date'. It's just the Day.js locale that's not applied.
The Day.js locale gets applied only if I define the locale specifically on the component:
<DayjsDatePicker locale={plPL.DatePicker}/>
You can also see the issue you linked https://github.com/ant-design/ant-design/issues/29595
Looks like he has the same problem. Can't import from es in next.js.
But in his case the lib import doesn't even translate the components locale ('Select Date')
seems like this isn't just a problem with generatePicker I'm also experiencing this for Button. also looked at other solutions for it might the only thing I think of is that nextJS doesn't automatically support less.. but I could be wrong..
I also had this problem in nextjs. the main problem was that i was importing generatePicker from lib but all other components including ConfigProvider were being imported from es, so all the config was being set in es
The solution was to import all components from "antd/lib" instead of "antd".
Similar issues which may help
-
Importing
generatePickerfromlibdoes not respect locale #29595 - SyntaxError: Cannot use import statement outside a module #29306
- Uncaught SyntaxError: Cannot use import statement outside a module #21094
- Cannot test component wrapped with ConfigProvider #26985
- using generatePicker, the test fails #23365
- Followed steps of "Use modularized antd" and got an error #22802
I think this solution can help in some of these issues too
For some who still encounter this problem, you can try to fix it by updating the import statement like this. Hope this help
- import { ConfigProvider } from 'antd'
+ import ConfigProvider from 'antd/lib/config-provider'
any update ? it's quite important to our project to have possibility to manipulate locale
I don't know what issues you guys still have. It was an issue in antd@4, but works perfectly in antd@5. I'm gonna close this soon.
Reproduction link https://github.com/chemicalkosek/antd-dayjs-next
Your ConfigProvider is imported from antd/es/ConfigProvider But your DayjsDatePicker is imported from antd/lib, so the picker will consume antd/lib/ConfigProvider, which is another provider at runtime. I think.
antd/lib/ConfigProvider + antd/lib/date-picker ✅
antd/es/ConfigProvider + antd/es/date-picker ✅
antd/lib/ConfigProvider + antd/es/date-picker ❌
antd/es/ConfigProvider + antd/lib/date-picker ❌
Cannot use import statement outside a module
This is not antd related issue, try to solve it from nextjs or build tools.
If you still have issues about this, feel free to open a new issue with reproduction link.