Antd source map not supported in React

Question

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!

Answer 1

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

Answer 2

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.

Answer 3

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!

Answer 4

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.

Answer 5

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

Answer 6

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

Answer 7

Replacing this all work for me:

 - import 'antd/dist/antd.css

replace with :

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

Answer 8

Use import 'antd/dist/antd.min.css instead of import 'antd/dist/antd.css in your app.js file.

Answer 9

I'm using Vite+React. And I use this

import "antd/dist/reset.css";

It works. My Package Version:

"vite": "^4.3.2"
"antd": "^5.4.7",