Failed to parse source map: ‘webpack://antd/./components/config-provider/style/index.less‘ URL is no

最新推荐文章于 2023-12-20 11:06:36 发布

原创最新推荐文章于 2023-12-20 11:06:36 发布 · 3.8k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#webpack

疑难点记录专栏收录该内容

21 篇文章

订阅专栏

在创建的React项目中，遇到运行时关于source-map的警告，涉及webpack配置和less文件的解析。尝试修改source-map-loader的规则以包含less文件，但仍然报错。最终发现是缺少对less的loader配置。添加less-loader并配置后，less文件能正常解析，但原有css错误依然存在。为了解决当前问题，选择临时移除css规则。需要进一步研究如何完全解决这个webpack配置问题。

react脚手架搭建项目，运行出现这个问题

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

根据错误提示关键词 webpack,source-map推测是webpack的source-map问题，运行npm run eject暴露webpack配置文件，直接搜索source-map，找到对应位置

 rules: [
        // Handle node_modules packages that contain sourcemaps
        shouldUseSourceMap && {
          enforce: 'pre',
          exclude: /@babel(?:\/|\\{1,2})runtime/,
          test: /\.(js|mjs|jsx|ts|tsx|css)$/,
          loader: require.resolve('source-map-loader'),
        },
       ]

确实没有less的正则，我尝试加上

 rules: [
        // Handle node_modules packages that contain sourcemaps
        shouldUseSourceMap && {
          enforce: 'pre',
          exclude: /@babel(?:\/|\\{1,2})runtime/,
          test: /\.(js|mjs|jsx|ts|tsx|css|less)$/,
          loader: require.resolve('source-map-loader'),
        },
       ]

依旧报错，然后我删除了css

 rules: [
        // Handle node_modules packages that contain sourcemaps
        shouldUseSourceMap && {
          enforce: 'pre',
          exclude: /@babel(?:\/|\\{1,2})runtime/,
          test: /\.(js|mjs|jsx|ts|tsx)$/,
          loader: require.resolve('source-map-loader'),
        },
       ]