ant-design Dayjs DatePicker doesn't respect Day.js locale from Config Provider (nextjs)

rsaldnfx 于 2022-11-03 发布在其他

关注(0)|答案(8)|浏览(265)

[ v] I have searched the issues of this repository and believe that this is not a duplicate.

Related but doesn't work for me: #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 lib to es in 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

ant-design

来源：https://github.com/ant-design/ant-design/issues/29907

8条答案

按热度按时间

9rygscc11#

Similar issues which may help

赞(0）回复(0）举报 2022-11-03

9fkzdhlc2#

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 libgeneratePicker 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 #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')

赞(0）回复(0）举报 2022-11-03

agxfikkp3#

Any updates here?

赞(0）回复(0）举报 2022-11-03

idv4meu84#

赞(0）回复(0）举报 2022-11-03

qnyhuwrf5#

You can add support of daysJs and antd with nextjs Please ?

赞(0）回复(0）举报 2022-11-03

von4xj4u6#

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..

赞(0）回复(0）举报 2022-11-03

ghhkc1vu7#

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" .

赞(0）回复(0）举报 2022-11-03

yrwegjxp8#

Similar issues which may help


* [Importing `generatePicker` from `lib` does not respect locale #29595](https://github.com/ant-design/ant-design/issues/29595)

* [SyntaxError: Cannot use import statement outside a module #29306](https://github.com/ant-design/ant-design/issues/29306)

* [Uncaught SyntaxError: Cannot use import statement outside a module #21094](https://github.com/ant-design/ant-design/issues/21094)

* [Cannot test component wrapped with ConfigProvider #26985](https://github.com/ant-design/ant-design/issues/26985)

* [using generatePicker, the test fails #23365](https://github.com/ant-design/ant-design/issues/23365)

* [Followed steps of "Use modularized antd" and got an error #22802](https://github.com/ant-design/ant-design/issues/22802)

* [Importing `generatePicker` from `lib` does not respect locale #29595](https://github.com/ant-design/ant-design/issues/29595)

I think this solution can help in some of these issues too

赞(0）回复(0）举报 2022-11-03

我来回答

ant-design Dayjs DatePicker doesn't respect Day.js locale from Config Provider (nextjs)

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

8条答案

相关问题

热门标签

最新问答