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!

score 96 · Accepted Answer · edited May 09 '22 at 02:24

96

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

edited May 09 '22 at 02:24

Jakub Kurdziel

3,216
2
12
22

answered May 06 '22 at 22:56

Fourat Ben Driaa

976
3
5

score 9 · Answer 2 · edited Mar 17 '22 at 22:14

9

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.

edited Mar 17 '22 at 22:14

ouflak

2,458
10
44
49

answered Mar 17 '22 at 11:34

SB7x

453
1
3
7

1

this saved us from lots of warnings after months! – Parham Heidari Apr 26 '22 at 10:08
1

This solution is for when you're using less, look at the solutions below for css https://stackoverflow.com/a/72111591/9521924 – Hiimdjango Aug 14 '22 at 01:34

score 5 · Answer 3 · answered May 04 '22 at 10:37

5

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!

answered May 04 '22 at 10:37

Watchmaker

4,908
1
37
38

worked for me in Oct 2022 -> "antd": "^4.23.4", – Michael K Oct 06 '22 at 20:36

score 3 · Answer 4 · edited Oct 15 '22 at 17:10

3

Replacing this all work for me:

 - import 'antd/dist/antd.css

replace with :

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

edited Oct 15 '22 at 17:10

Alpha

1,413
3
9
23

answered Oct 10 '22 at 09:29

Anas Isah

47
7

score 2 · Answer 5 · answered Aug 01 '22 at 13:52

2

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

answered Aug 01 '22 at 13:52

jokereven

19
4

score 1 · Answer 6 · answered Jul 22 '22 at 09:00

1

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.

answered Jul 22 '22 at 09:00

EDMOND GIHOZO

278
4
11

score 0 · Answer 7 · answered Aug 19 '22 at 00:08

0

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

answered Aug 19 '22 at 00:08

Gustavo Carvalho

27
3

it works but is there any downside to not GENERATE_SOURCEMAP? – Jaydip Sapariya Sep 19 '22 at 05:23
@JaydipSapariya Severely degraded debugging capability. It will drop into the total gibberish minified generated output, not your nice readable source code, in the debugger. The source map remembers what source is to blame for chunks of generated output. Your browser dev tools use it to backtrack to your source, and it indicates your code in that, instead of showing the generated gibberish. – doug65536 Mar 23 '23 at 03:25

score 0 · Answer 8 · answered Nov 09 '22 at 17:29

0

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

answered Nov 09 '22 at 17:29

Shakil- The Coding monster

653
8
8

score 0 · Answer 9 · answered May 11 '23 at 08:38

0

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

answered May 11 '23 at 08:38

Sayedul Karim

117
6

Antd source map not supported in React

9 Answers9