I have an issue regarding the integration of Ant Design library in a CRA (create-react-app).
After I have tried to integrate it as it is required in their documentation, without integration of Craco, I always get these 4 warnings:
WARNING in ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/antd/dist/antd.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map: 'webpack://antd/./components/config-provider/style/index.less' URL is not supported
@ ./node_modules/antd/dist/antd.css 8:6-231 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 61:4-74:5 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-201 83:0-201 84:22-29 84:33-47 84:50-64
@ ./src/components/pages/app/App.tsx 10:0-28
@ ./src/components/index.ts 3:0-34 4:15-18
@ ./src/index.tsx 6:0-31 8:38-41
WARNING in ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/antd/dist/antd.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map: 'webpack://antd/./components/icon/style/index.less' URL is not supported
@ ./node_modules/antd/dist/antd.css 8:6-231 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-201 83:0-201 84:22-29 84:33-47 84:50-64 61:4-74:5
@ ./src/components/pages/app/App.tsx 10:0-28
@ ./src/components/index.ts 3:0-34 4:15-18
@ ./src/index.tsx 6:0-31 8:38-41
WARNING in ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/antd/dist/antd.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map: 'webpack://antd/./components/locale-provider/style/index.less' URL is not supported
@ ./node_modules/antd/dist/antd.css 8:6-231 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-201 83:0-201 84:22-29 84:33-47 84:50-64 61:4-74:5
@ ./src/components/pages/app/App.tsx 10:0-28
@ ./src/components/index.ts 3:0-34 4:15-18
@ ./src/index.tsx 6:0-31 8:38-41
WARNING in ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/antd/dist/antd.css)
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map: 'webpack://antd/./components/time-picker/style/index.less' URL is not supported
@ ./node_modules/antd/dist/antd.css 8:6-231 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-201 83:0-201 84:22-29 84:33-47 84:50-64 61:4-74:5
@ ./src/components/pages/app/App.tsx 10:0-28
@ ./src/components/index.ts 3:0-34 4:15-18
@ ./src/index.tsx 6:0-31 8:38-41
I use the following versions:
"antd": "^4.19.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.1.2",
"react-scripts": "5.0.0",
Can someone help me regarding this issue? Thank you!
This problem occurred after react-script was upgraded to 5.0.0 solution :
- import 'antd/dist/antd.css
replace with :
+ import 'antd/dist/antd.min.css