Antd source map not supported in React

user_18318549 0
Viewed 13051

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!

cra antd create-react-app reactjs
6 Answers

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
user_177513510

Though, I succeeded in eliminating the errors only by integrating CRACO and LESS. Changing in src/App.tsx:

- import '~antd/dist/antd.css';
+ import '~antd/dist/antd.less';

So, from what I see, the issue may be with the import '~antd/dist/antd.css';, imported in src/App.tsx.

user_183185490

The previous solution did not work for me, because although it was removing the compilation error it was breaking all the Antd styles of the app.

We found this solution instead:

import 'antd/dist/antd.min.css'

From this Chinese site.

A more customized solution would be to use customize-cra

Actually it is also solved in the issues of their repo!

user_20765550

after spending much time on fixing this,, i found that adding GENERATE_SOURCEMAP=false to your .env file will remove the error.

it is said that this is caused by Webpack 5.

user_94282030

in app.tsx use import "antd/dist/antd.min.css"; to replace import "antd/dist/antd.css";

user_181513980

If you're experiencing this issue with react-scripts/cra version 5.0.0. You'll need to add the following to your .env file

GENERATE_SOURCEMAP=false

or you can update your script to

"start": "GENERATE_SOURCEMAP=false react-scripts start", Note: this is a temporary patch until 5.0.1 is released. See create-react-app repo pull request Update: 5.0.1 was release on April 2022. Changelog. The update did not fix this issue. Not sure when that will be ‍♂️

By: roger-perez

user_68068820
Related