ant-design / ant-design

An enterprise-class UI design language and React UI library
https://ant.design
MIT License
91.93k stars 48.98k forks source link

importing the react component library with less module in to Nextjs app throws error when building #33336

Open Srinirajini opened 2 years ago

Srinirajini commented 2 years ago

Reproduction link

https://github.com/Srinirajini/simple-next-app.git

Steps to reproduce

1) clone the repository https://github.com/Srinirajini/simple-next-app.git 2) install dependencies using the command "yarn" from the root of the cloned repo. 3) run the repo using the command "npm run dev" 4) you could see simple Antd's Button and Date picker components... 5) try to build the repo using the command "npm run build" 6) This end up with the error in the antd's date picker component "@import '../../style/themes/index';"

What is expected?

Successful building of the application.

What is actually happening?

npm run build

build next build

info - Checking validity of types
warn - Disabled SWC as replacement for Babel because of custom Babel configuration "babel.config.js" https://nextjs.org/docs/messages/swc-disabled info - Using external babel configuration from /Users/nsearch-srinivasan/workspace/nextjsWorkspace/simple-next-app/babel.config.js info - Creating an optimized production build
info - Compiled successfully

Build error occurred /Users/nsearch-srinivasan/workspace/nextjsWorkspace/simple-next-app/node_modules/antd/lib/date-picker/style/index.less:1 @import '../../style/themes/index'; ^

SyntaxError: Invalid or unexpected token at Object.compileFunction (node:vm:352:18) at wrapSafe (node:internal/modules/cjs/loader:1031:15) at Module._compile (node:internal/modules/cjs/loader:1065:27) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:1005:19) at require (node:internal/modules/cjs/helpers:102:18) at Object. (/Users/nsearch-srinivasan/workspace/nextjsWorkspace/simple-next-app/node_modules/antd/lib/date-picker/style/index.js:3:1) at Module._compile (node:internal/modules/cjs/loader:1101:14) { type: 'SyntaxError' } info - Collecting page data .%

Environment Info
antd 4.17.3
React 17.0.2
System MacOS Monterey
Browser Chrome 96.0.4664.55

The component library can be cloned from this https://github.com/Srinirajini/react-component-library.git.

Actually, the error happens in antd's Datepicker component with DayJS support, particularly at the import statement. I am following the recommendation given in the AntD's Documentation as mentioned in this link https://ant.design/docs/react/replace-moment. Please look at my component library code Datepicker.tsx implemented in the repo https://github.com/Srinirajini/react-component-library.git. and the code is exactly the same as the code recommended in the documentation. Note : The sample code given in the link is working with Next js app with babel and webpack, but when I tried to bundle it with Rollup and later try to consume the library in the Nextjs app it is giving the build error.

feelingzrs commented 2 years ago

I have the same problem. Have you solved it?

Srinirajini commented 2 years ago

Nope, I am blocked with this problem, I moved to my other sprint stories keeping this aside :(

tushar1998 commented 2 years ago

Same Issue did anyone find solution Using rollup and postcss to compile less files