React 不支持 Antd 源映射
我有一个关于在 CRA (create-react-app) 中集成 Ant Design 库的问题。
在我尝试按照其 文档，如果没有集成 Craco，我总是收到这 4 个警告：
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
我使用以下版本：
"antd": "^4.19.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.1.2",
"react-scripts": "5.0.0",
有人可以帮助我解决这个问题吗？谢谢你！
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!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（9）
这个问题是react-script升级到5.0.0后出现的
解决方案：
替换为：
This problem occurred after react-script was upgraded to 5.0.0
solution :
replace with :
不过，我仅通过集成 CRACO 和 LESS 就成功消除了错误。更改
src/App.tsx：因此，据我所知，问题可能出在
import '~antd/dist/antd.css';上，导入于src/App.tsx。Though, I succeeded in eliminating the errors only by integrating CRACO and LESS. Changing in
src/App.tsx:So, from what I see, the issue may be with the
import '~antd/dist/antd.css';, imported insrc/App.tsx.之前的解决方案对我不起作用，因为虽然它消除了编译错误，但它破坏了应用程序的所有 Antd 样式。
我们找到了这个解决方案：
来自这个中文站点。
更定制的解决方案是使用 customize-cra
实际上它也可以在 他们的存储库的问题！
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:
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!
替换这一切对我来说都有效：
替换为：
Replacing this all work for me:
replace with :
在 app.tsx 中使用 import "antd/dist/antd.min.css";替换导入“antd/dist/antd.css”；
in app.tsx use import "antd/dist/antd.min.css"; to replace import "antd/dist/antd.css";
在花了很多时间解决这个问题之后，
我发现将
GENERATE_SOURCEMAP=false添加到您的 .env 文件中将消除该错误。据说这是Webpack 5造成的。
after spending much time on fixing this,,
i found that adding
GENERATE_SOURCEMAP=falseto your .env file will remove the error.it is said that this is caused by Webpack 5.
如果您在使用 React-scripts/cra 版本 5.0.0 时遇到此问题。您需要将以下内容添加到您的 .env 文件
GENERATE_SOURCEMAP=false
或者您可以将脚本更新为
“start”：“GENERATE_SOURCEMAP=false react-scripts start”，
注意：这是 5.0.1 发布之前的临时补丁。请参阅 create-react-app 存储库拉取请求更新：5.0.1 于 2022 年 4 月发布。变更日志。该更新没有修复这个问题。不确定什么时候会
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
在 app.js 文件中使用 import 'antd/dist/antd.min.css 而不是 import 'antd/dist/antd.css。
Use import 'antd/dist/antd.min.css instead of import 'antd/dist/antd.css in your app.js file.
我使用的是Vite+React。我用这个
它有效。
我的套餐版本：
I'm using Vite+React. And I use this
It works.
My Package Version: