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!

Duffel

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

Langlauf

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.

Duffel

this saved us from lots of warnings after months! – Typesetter

This solution is for when you're using less, look at the solutions below for css https://mcmap.net/q/495086/-antd-source-map-not-supported-in-react – Inseverable

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!

Conditioned

worked for me in Oct 2022 -> "antd": "^4.23.4", – Eckstein

Answer 4

Replacing this all work for me:

 - import 'antd/dist/antd.css

replace with :

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

Figural

Answer 5

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

Bocage

Answer 6

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.

Dyaus

Answer 7

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

Adenitis

it works but is there any downside to not GENERATE_SOURCEMAP? – Neumark

@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. – Booted

Answer 8

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

Theroid

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

Albumose